وحدة AngularJS تعرف على التطبيق.
وحدة هي وعاء لأجزاء مختلفة من التطبيق.
وحدة هي وعاء لوحدات تحكم التطبيق.
التحكم تنتمي دائما إلى وحدة نمطية.
إنشاء وحدة نمطية
يتم إنشاء وحدة باستخدام وظيفة AngularJS angular.module
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
</script>تشير "اسم التطبيق" المعلمة إلى عنصر 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 التطبيقات لوضع وحدة والتحكم في ملفات جافا سكريبت.
في هذا المثال، "myApp.js" يحتوي على تعريف وحدة التطبيق، في حين أن "myCtrl.js" يحتوي على وحدة تحكم:
مثال
<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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";
});
يمكن ظائف تلوث النطاق العالمي
وينبغي تجنب ظائف العالمية في جافا سكريبت. يمكن بسهولة أن الكتابة أو تدميرها من قبل غيرها من الكتابات.
AngularJS حدات يقلل هذه المشكلة، عن طريق الحفاظ على جميع وظائف محلية إلى الوحدة النمطية.
عندما لتحميل مكتبة
في حين أنه من الشائع في تطبيقات HTML لوضع البرامج النصية في نهاية <body> عنصر، فمن المستحسن أن تقوم بتحميل مكتبة AngularJS إما في <head> أو في بداية <body> .
وذلك لأن المكالمات إلى angular.module لا يمكن إلا أن يكون ترجمة بعد أن تم تحميل مكتبة.
مثال
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/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>
انها محاولة لنفسك »