وحدة AngularJS

يحدد مودول AngularJS تطبيقًا.

الوحدة هي حاوية للأجزاء المختلفة من التطبيق.

الوحدة هي حاوية لمستشار التطبيق.

المستشار دائمًا ينتمي إلى وحدة ما.

إنشاء الوحدة

من خلال استخدام وظائف AngularJS،angular.module إنشاء وحدة:

<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>
يُشير معامل "myApp" إلى العنصر HTML الذي سيتم تشغيل التطبيق فيه.

الآن يمكنك إضافة مسيطر، تعليمات، مرشحات، إلخ إلى تطبيق AngularJS.

إضافة مسيطر

اضف مسيطرًا إلى تطبيقك باستخدام ng-controller يرجع إلي المسيطر

الاستدلال

<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>

جرب بنفسك

ستتعرف على المزيد عن المسيطر في الجزء الخلفي من هذا الدليل.

إضافة تعليمات

يملك AngularJS مجموعة من التعليمات المدمجة، يمكنك استخدامها لاضافة ميزات للتطبيق.

للإشارة إلى المعلومات الكاملة، يرجى زيارة دليل تعليمات AngularJS الخاص بنا.

بالإضافة إلى ذلك، يمكنك استخدام module لاضافة تعليمات خاصة بك للتطبيق:

الاستدلال

<div ng-app="myApp" w3-test-directive></div>
<script>
var app = angular.module("myApp", []);
app.directive("w3TestDirective", function() {
  return {
    template : "I was made in a directive constructor!"
  };
});
</script>

جرب بنفسك

ستتعرف على تعليمات الاستدلال في الجزء الخلفي من هذا الدليل.

في الملف

من المعتاد في تطبيقات AngularJS وضع module والمسيطر في ملفات JavaScript.

في هذا المثال، "myApp.js" يحتوي على تعريف module التطبيق، و "myCtrl.js" يحتوي على المسيطر:

الاستدلال

<!DOCTYPE html>
<html>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script src="myApp.js"></script>
<script src="myCtrl.js"></script>
</body>
</html>

جرب بنفسك

myApp.js

var app = angular.module("myApp", []);

يمكن استخدام معلمة [] في تعريف module الاعتماد.

إذا لم يكن هناك معلمة []، فإنك لست تنشئ module جديدًا، بل تقوم ب检索 module موجود.

myCtrl.js

app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName= "Gates";
});

قد تلويث المساحة الاسمية العالمية للدوال

ينبغي تجنب استخدام الدوال العالمية في JavaScript. لأنها سهلة التغطية أو التدمير من قبل سكربت أخرى.

يقلل AngularJS لمodule من هذا المشكلة عن طريق الحفاظ على جميع الدوال في محلية module.

متى يتم تحميل المكتبة

على الرغم من أن وضع سكربت في <body> من المعتاد أن تكون في نهاية عنصر <head> أو <body> في بداية تحميل مكتبة AngularJS.

هذا لأنه يمكن ترجمة هذا فقط بعد تحميل مكتبة. angular.module التطبيق.

الاستدلال

<!DOCTYPE html>
<html>
<body>
<script src="https://cdn.staticfile.net/angular.js/1.6.9/angular.min.js"></script>
<div ng-app="myApp" ng-controller="myCtrl">
{{ firstName + " " + lastName }}
</div>
<script>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
  $scope.firstName = "Bill";
  $scope.lastName = "Gates";
});
</script>
</body>
</html>

جرب بنفسك