در این قسمت با ماژول ها آشنا می شوید، هر ماژول می تواند یک برنامه را تعیین کند و بعبارتی یک ماژول یک ظرف برای نگهدری قسمت های محتلف یک برنامه کاربردی است.
- یک ماژول AngularJS یک برنامه را تعریف می کند.
- این ماژول یک ظرف برای قسمت های مختلف یک برنامه است.
- این ماژول یک ظرف برای کنترل کننده های برنامه است.
- کنترل کننده ها همیشه به یک ماژول متعلق هستند.
ایجاد یک ماژول
یک ماژول با استفاده از تابع Angular.modular از AngularJS ایجاد می شود.
<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 رایج است که ماژول و کنترل کننده ها را در فایل های جاوا اسکریپت قرار دهد.
در این مثال، myApp.js شامل یک تعریف ماژول برنامه است، در حالی که myCtrl.js حاوی کنترل کننده است:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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> بارگذاری کنید.
این به این دلیل است که call to modular.module می تواند پس از بارگذاری کتابخانه کامپایل شود.
<!DOCTYPE html>
<html>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/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>