وحدات AngularJS
تحدد الوحدة النمطية AngularJS التطبيق.
الوحدة عبارة عن حاوية لأجزاء مختلفة من التطبيق.
الوحدة عبارة عن حاوية لوحدات التحكم في التطبيق.
تنتمي وحدات التحكم دائمًا إلى وحدة نمطية.
إنشاء وحدة
يتم إنشاء وحدة نمطية باستخدام وظيفة AngularJSangular.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
= "John";
$scope.lastName
= "Doe";
});
</script>
سوف تتعلم المزيد عن وحدات التحكم لاحقًا في هذا البرنامج التعليمي.
إضافة توجيه
يحتوي AngularJS على مجموعة من التوجيهات المضمنة التي يمكنك استخدامها لإضافة وظائف إلى تطبيقك.
للحصول على مرجع كامل ، قم بزيارة مرجع توجيه AngularJS الخاص بنا .
بالإضافة إلى ذلك ، يمكنك استخدام الوحدة لإضافة التوجيهات الخاصة بك إلى تطبيقاتك:
مثال
<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 وضع الوحدة النمطية ووحدات التحكم في ملفات JavaScript.
في هذا المثال ، يحتوي "myApp.js" على تعريف وحدة تطبيق ، بينما يحتوي "myCtrl.js" على وحدة التحكم:
مثال
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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", []);
يمكن استخدام المعلمة [] في تعريف الوحدة النمطية لتحديد الوحدات التابعة.
بدون المعامل [] ، لا تقوم بإنشاء وحدة نمطية جديدة ، ولكن تسترجع وحدة موجودة.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
يمكن للوظائف أن تلوث مساحة الاسم العالمية
يجب تجنب الدوال العامة في JavaScript. يمكن بسهولة الكتابة فوقها أو إتلافها بواسطة نصوص أخرى.
تعمل وحدات AngularJS على تقليل هذه المشكلة ، عن طريق الحفاظ على جميع الوظائف محلية للوحدة.
متى يتم تحميل المكتبة
بينما من الشائع في تطبيقات HTML وضع البرامج النصية في نهاية
<body>العنصر ، يوصى بتحميل مكتبة AngularJS إما في <head>ملف <body>.
هذا لأنه angular.moduleلا يمكن تجميع المكالمات الموجهة إلى المكتبة إلا بعد تحميلها.
مثال
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/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
= "John";
$scope.lastName
= "Doe";
});
</script>
</body>
</html>