مодуل‌های AngularJS
- صفحه قبلی عبارت‌های AngularJS
- صفحه بعدی دستورالعمل‌های 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 ما بروید.
علاوه بر این، شما می‌توانید از ماژول برای افزودن دستورالعمل‌های خود به برنامه استفاده کنید:
مثال
<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://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", []);
پارامتر [] در تعریف ماژول می‌تواند برای تعریف ماژول‌های وابسته استفاده شود.
اگر هیچ پارامتر [] وجود نداشته باشد، شما در حال ایجاد یک ماژول جدید نیستید، بلکه در حال بازیابی یک ماژول موجود هستید.
myCtrl.js
app.controller("myCtrl", function($scope) {
$scope.firstName = "Bill";
$scope.lastName= "Gates";
});
توابع ممکن است نام‌های فضای نام جهانی را آلوده کنند
در JavaScript از استفاده از توابع جهانی باید اجتناب شود. آن‌ها به راحتی می‌توانند توسط اسکریپت‌های دیگر پوشیده یا خراب شوند.
AngularJS ماژول با نگه داشتن همه توابع در محیط محلی ماژول این مشکل را کاهش می‌دهد.
چه زمانی کتابخانه را بارگذاری کنید
در حالی که در برنامه‌های HTML، قرار دادن اسکریپت در <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>
- صفحه قبلی عبارت‌های AngularJS
- صفحه بعدی دستورالعمل‌های AngularJS
