ماژول ها (Modules)
اینجا درباره «ماژول AngularJS» حرف می زنیم. «ماژول (Module)» یعنی ظرف برنامه. همه چیز داخل آن زندگی می کند؛ کنترلر، دستور، فیلتر و سرویس. مثل کیف مدرسه که کتاب ها را منظم نگه می دارد.
ساخت یک ماژول
با تابع angular.module ماژول می سازیم. نام ماژول به عنصر HTML وصل می شود.
<div ng-app="myApp">...</div>
<script>
var app = angular.module("myApp", []);
<\/script>
افزودن یک کنترلر (Controller)
«کنترلر (Controller)» منطق صفحه را مدیریت می کند. با 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>
افزودن یک دستور (Directive)
«دستور (Directive)» به HTML توان می دهد. می توانیم دستور دلخواه بسازیم.
<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>
ماژول و کنترلر در فایل ها
معمولاً کد را جدا می گذاریم. فایل 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>
var app = angular.module("myApp", []);
app.controller("myCtrl", function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
});
کی کتابخانه را لود کنیم؟
بهتر است 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>
نکته های مهم
نکته: آرگومان [] برای تعریف وابستگی هاست. بدون آن، ماژول جدید ساخته نمی شود؛ همان قبلی برگردانده می شود.
هشدار: توابع سراسری خطرناک هستند. ماژول ها محدوده امنی می دهند و برخورد را کم می کنند.
گام های عملی
- کتابخانه AngularJS را زودتر لود کن.
- یک ماژول بساز. نام مناسب انتخاب کن.
- کنترلر را اضافه کن. با
ng-controllerوصل کن. - اگر لازم است دستور بساز. در ماژول ثبت کن.
برای ادامه، صفحه دستورها را ببین. همچنین به عبارات برگرد. این ها کنار «ماژول AngularJS» مسیر را کامل می کنند.
جمع بندی سریع
- ماژول ظرف برنامه است.
- کنترلر به ماژول تعلق دارد.
- دستور دلخواه را در ماژول ثبت کن.
- کتابخانه را زودتر لود کن.