وحدات AngularJS

من قبل: جيمس هارتمان جيمس هارتمان
Hours تحديث

ما هي وحدة AngularJS؟

تحدد الوحدة وظيفة التطبيق التي يتم تطبيقها على صفحة HTML بأكملها باستخدام التوجيه ng-app. فهو يحدد الوظائف، مثل الخدمات والتوجيهات والمرشحات، بطريقة تجعل من السهل إعادة استخدامها في تطبيقات مختلفة.

في جميع دروسنا السابقة، ربما لاحظت التوجيه ng-app المستخدم لتحديد تطبيق Angular الرئيسي. هذا هو أحد المفاهيم الأساسية للوحدات النمطية في Angular.JS.

كيفية إنشاء وحدة نمطية في AngularJS

قبل أن نبدأ مع ما هي الوحدة النمطية، دعونا نلقي نظرة على مثال لتطبيق AngularJS بدون وحدة نمطية ثم نفهم الحاجة إلى وجود وحدات نمطية في تطبيقك.

لنفكر في إنشاء ملف يسمى "DemoController.js" وإضافة الكود أدناه إلى الملف

Function Democontroller($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                            });

في الكود أعلاه، قمنا بإنشاء وظيفة تسمى "DemoController" والتي ستكون بمثابة وحدة تحكم داخل تطبيقنا.

في وحدة التحكم هذه، نقوم فقط بإضافة متغيرين a وb وتعيين إضافة هذه المتغيرات إلى متغير جديد، c، وإسناده مرة أخرى إلى كائن النطاق.

لنقم الآن بإنشاء Sample.html الرئيسي الخاص بنا، والذي سيكون تطبيقنا الرئيسي. لنقم بإدراج مقتطف الشفرة أدناه في صفحة HTML الخاصة بنا.

<body ng-app="">
      <div ng-controller="DemoController">
      <h3> Guru99 Global Event</h3>
      {{c}}

في الكود أعلاه، قمنا بتضمين DemoController الخاص بنا ثم استدعاء قيمة المتغير $scope.c عبر تعبير.

لكن لاحظ أن توجيه ng-app الخاص بنا يحتوي على قيمة فارغة.

  • هذا يعني في الأساس أنه يمكن الوصول إلى جميع وحدات التحكم التي يتم استدعاؤها ضمن سياق توجيه ng-app بشكل عالمي. لا توجد حدود تفصل بين وحدات التحكم المتعددة عن بعضها البعض.
  • الآن في البرمجة الحديثة، من الممارسات السيئة عدم ربط وحدات التحكم بأي وحدات نمطية وجعلها قابلة للوصول عالميًا. يجب أن يكون هناك بعض الحدود المنطقية المحددة لوحدات التحكم.

وهذا هو المكان الذي تأتي فيه الوحدات. تُستخدم الوحدات لإنشاء هذا الفصل بين الحدود والمساعدة في فصل وحدات التحكم بناءً على الوظيفة.

دعونا نغير الكود أعلاه لتنفيذ الوحدات وإرفاق وحدة التحكم الخاصة بنا بهذه الوحدة

var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('DemoController', function($scope) {
                                    $scope.a=1;
                                    $scope.b=2;
                                    $scope.c=$scope.b + $scope.a;
                         });

دعونا نلاحظ الاختلافات الرئيسية في الكود المكتوب أعلاه

  1. var sampleApp = angular.module('sampleApp',[]);

    نحن نقوم على وجه التحديد بإنشاء وحدة AngularJS تسمى "sampleApp". سيشكل هذا حدًا منطقيًا للوظيفة التي ستحتوي عليها هذه الوحدة. لذلك في مثالنا أعلاه، لدينا وحدة تحتوي على وحدة تحكم تؤدي دور إضافة كائنين للنطاق. ومن ثم، يمكن أن يكون لدينا وحدة واحدة ذات حدود منطقية تنص على أن هذه الوحدة ستؤدي فقط وظيفة الحسابات الرياضية للتطبيق.

  2. sampleApp.controller('DemoController', function($scope)

    نقوم الآن بإرفاق وحدة التحكم بوحدة AngularJS "SampleApp". هذا يعني أننا إذا لم نقم بالإشارة إلى الوحدة النمطية "sampleApp" في كود HTML الرئيسي الخاص بنا، فلن نتمكن من الإشارة إلى وظيفة وحدة التحكم الخاصة بنا.

لن يبدو رمز HTML الرئيسي لدينا كما هو موضح أدناه

<body ng-app="'sampleApp'">
                           <div ng-controller="DemoController">
                           <h3> Guru99 Global Event</h3>
                		   {{c}}

دعونا نلاحظ الاختلافات الرئيسية في الكود المكتوب أعلاه ورمزنا السابق

<body ng-app="'sampleApp'">

في علامة جسدنا،

  • بدلًا من وجود توجيه ng-app فارغًا، فإننا الآن نستدعي الوحدة النمطية SampleApp.
  • من خلال استدعاء وحدة التطبيق هذه، يمكننا الآن الوصول إلى وحدة التحكم "DemoController" والوظائف الموجودة في وحدة التحكم التجريبية.

الوحدات ووحدات التحكم في AngularJS

In الزاوي، فإن النمط المستخدم لتطوير تطبيقات الويب الحديثة هو إنشاء وحدات ووحدات تحكم متعددة للفصل المنطقي بين مستويات الوظائف المتعددة.

عادة سيتم تخزين الوحدات بشكل منفصل Javascript الملفات، والتي ستكون مختلفة عن ملف التطبيق الرئيسي.

دعونا نلقي نظرة على مثال لكيفية تحقيق ذلك.

في المثال أدناه ،

  • سنقوم بإنشاء ملف يسمى Utilities.js والذي سيحتوي على وحدتين، واحدة لأداء وظيفة الجمع والأخرى لأداء وظيفة الطرح.
  • سنقوم بعد ذلك بإنشاء ملفين منفصلين للتطبيق والوصول إلى ملف الأداة المساعدة من كل ملف تطبيق.
  • في أحد ملفات التطبيق، سنصل إلى وحدة الجمع، وفي الملف الآخر، سنصل إلى وحدة الطرح.

الخطوة 1) حدد الكود الخاص بالوحدات النمطية ووحدات التحكم المتعددة.

var AdditionApp = angular.module('AdditionApp',[]);
AdditionApp.controller('DemoAddController', function($scope) {
       $scope.a=5;
       $scope.b=6;
       $scope.c=$scope.a + $scope.b;
});
var SubractionApp = angular.module('SubtractionApp',[]);
SubractionApp.controller('DemoSubtractController', function($scope) {
       $scope.a=8;
       $scope.b=6;
       $scope.d=$scope.a - $scope.b;
});

دعونا نلاحظ النقاط الرئيسية في الكود المكتوب أعلاه

  1.  var AdditionApp = angular.module('AdditionApp',[]);
 var SubractionApp = angular.module('SubtractionApp',[]);

    تم إنشاء وحدتين Angular منفصلتين، إحداهما تحمل اسم "AdditionApp" والثانية تحمل اسم "SubtractionApp".

  2. AdditionApp.controller('DemoAddController', function($scope)
SubractionApp.controller('DemoSubtractController', function($scope)

    هناك وحدتا تحكم منفصلتان تم تعريفهما لكل وحدة، إحداهما تسمى DemoAddController والأخرى تسمى DemoSubtractController. تحتوي كل وحدة تحكم على منطق منفصل لجمع وطرح الأرقام.

الخطوة 2) قم بإنشاء ملفات التطبيق الرئيسية الخاصة بك. لنقم بإنشاء ملف يسمى ApplicationAddition.html وأضف الكود أدناه

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "AdditionApp" ng-controller="DemoAddController">
    Addition :{{c}}

</div>
</body>
</html>

دعونا نلاحظ النقاط الرئيسية في الكود المكتوب أعلاه

  1. <script src="/lib/Utilities.js"></script>

    نحن نشير إلى ملف Utilities.js الخاص بنا في ملف التطبيق الرئيسي لدينا. يتيح لنا ذلك الرجوع إلى أي وحدات AngularJS محددة في هذا الملف.

  2. <div ng-app = "AdditionApp" ng-controller="DemoAddController">

    نحن نصل إلى وحدة "AdditionApp" وDemoAddController باستخدام توجيه ng-app و نانوغرام تحكم على التوالي.

  3. {{c}}

    نظرًا لأننا نشير إلى الوحدة ووحدة التحكم المذكورة أعلاه، فإننا قادرون على الإشارة إلى المتغير $scope.c عبر تعبير. سيكون التعبير نتيجة إضافة متغيري النطاق a وb الذي تم تنفيذه في وحدة التحكم 'DemoAddController'

    بنفس الطريقة التي سنفعلها مع دالة الطرح.

الخطوة 3) قم بإنشاء ملفات التطبيق الرئيسية الخاصة بك. لنقم بإنشاء ملف يسمى "ApplicationSubtraction.html" وأضف الكود أدناه

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Addition</title>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
    <script src="lib/utilities.js"></script>
</head>
<body>
<div ng-app = "SubtractionApp" ng-controller="DemoSubtractController">
    Subtraction :{{d}}
  
</div>
</body>
</html>

دعونا نلاحظ النقاط الرئيسية في الكود المكتوب أعلاه

  1. <script src="/lib/Utilities.js"></script>

    نحن نشير إلى ملف Utilities.js الخاص بنا في ملف التطبيق الرئيسي لدينا. يتيح لنا ذلك الرجوع إلى أي وحدات محددة في هذا الملف.

  2. <div ng-app = " SubtractionApp " ng-controller=" DemoSubtractController ">

    نحن نصل إلى وحدة "SubtractionApp" وDemoSubtractController باستخدام توجيه ng-app ووحدة التحكم ng على التوالي.

  3. {{d}}

    وبما أننا نشير إلى الوحدة ووحدة التحكم المذكورة أعلاه، فإننا قادرون على الإشارة إلى المتغير $scope.d عبر تعبير. سيكون التعبير نتيجة طرح متغيري النطاق a وb الذي تم تنفيذه في "DemoSubtractController" مراقب

ملخص

  • بدون استخدام وحدات AngularJS، تبدأ وحدات التحكم في الحصول على نطاق عالمي مما يؤدي إلى ممارسات برمجة سيئة.
  • يتم استخدام الوحدات لفصل منطق الأعمال. يمكن إنشاء وحدات متعددة لفصلها منطقيًا داخل هذه الوحدات المختلفة.
  • يمكن أن يكون لكل وحدة AngularJS مجموعة خاصة بها من وحدات التحكم المحددة والمخصصة لها.
  • عند تعريف الوحدات ووحدات التحكم، يتم تعريفها عادةً بشكل منفصل Javaسيناريو ملفات. هؤلاء Javaيتم بعد ذلك الرجوع إلى ملفات النصوص في ملف التطبيق الرئيسي.

تلخيص هذه التدوينة بـ: