وحدات AngularJS

ما هي وحدة AngularJS؟

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

يوضح الرسم التوضيحي أعلاه ذلك الحد.

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

⚠️ ملاحظة حول الإصدار: انتهى دعم AngularJS في يناير 2022. عصري زاوي يستخدم @NgModule، والمكونات المستقلة هي الوضع الافتراضي. الكود أدناه قديم.

كيفية إنشاء وحدة نمطية في 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 الرئيسي، فلن نتمكن من الوصول إلى وظائف وحدة التحكم.

المُهيئ مقابل المُستقبِل: وحدة angular لا يتم إنشاء وحدة نمطية إلا عندما التبعية يتم تمرير المصفوفة؛ وبدونها يسترجع الاستدعاء وحدة نمطية موجودة.

سيبدو كود 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 AngularJS، النمط المستخدم في التطويرping تتمثل تطبيقات الويب الحديثة في إنشاء وحدات ووحدات تحكم متعددة لفصل مستويات متعددة من الوظائف بشكل منطقي.

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

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

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

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

الخطوة 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',[]);

   تم إنشاء وحدتين منفصلتين من وحدات AngularJS، إحداهما تحمل اسم 'AdditionApp' والأخرى تحمل اسم 'Sub'tracتطبيق tionApp'.

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

   يوجد متحكمان منفصلان مُعرّفان لكل وحدة، أحدهما يُسمى DemoAddController والآخر يُسمى DemoSubtracوحدة التحكم tController. تحتوي كل وحدة تحكم على منطق منفصل للجمع والطرحtraction of numbers.

الخطوة 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'

   سنفعل الشيء نفسه بالنسبة للقطع الفرعيةtracوظيفة tion.

الخطوة 3) أنشئ ملفات التطبيق الرئيسية. لننشئ ملفًا باسم "ApplicationSub".tracأضف الكود التالي إلى ملف "tion.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 ">

   نحن بصدد الوصول إلى "الفرعي"tracوحدة tionApp و DemoSubtractController باستخدام توجيه ng-app و ng-controller على التوالي.

3. {{d}}

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

الأسئلة الشائعة