ورود به کارتابل مشتریان وب مهراز
ماژول های AngularJS
یادگیری AngularJS- یک ماژول AngularJS یک اپلیکیشن را تعریف می کند.
- یک ماژول AngularJS بخش های مختلف یک اپلیکیشن را در خود نگه داری میکند.
- یک ماژول AngularJS شامل همه کنترلر های اپلیکیشن می باشد.
- کنترلر ها همیشه متعلق به ماژول ها هستند.
ساخت یک ماژول AngularJS
یک ماژول با استفاده از یک متد AngularJS ساخته می شود . با استفاده از متد angular.module
<script>
var app = angular.module("myApp", []);
</script>
پارامتر "myApp" به HTML ای اشاره دارد که اپلیکشن در آن اجرا می شود. حال شما می توانید controllers ها , directives ها , filters ها و .. به برنامه AngularJS خود اضافه کنید.
اضافه کردن controller به برنامه AngularJS
اضافه کردن یک controller به برنامه 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>شما در این دوره آموزشی چیز های زیادی در مورد controller ها یاد خواهید گرفت.
اضافه کردن یک دستور یا directive در 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> شما در این دوره آموزشی چیز های زیادی در مورد directive ها یاد خواهید گرفت.
ماژول ها و کنترلر ها در یک فایل .JS
گذاشتن کد های AngularJS در یک فایل JavaScript خارجی کار متداولی است.
برای مثال شما می توانید فایل JavaScript ای با نام "myApp.js" داشته باشید که شامل تمامی تعاریف ماژول های برنامه و یک فایل "myCtrl.js" هم داشته باشید ، که شامل کنترل های برنامه AngularJS شما باشد.
<!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
پارامتر [] در تعریف ماژول ها می تواند توسط ماژول های وابسته استفاده شود.
بدون پارامتر [] شما یک ماژول جدید ایجاد نکرده اید اما یک ماژول موجود را بازیابی کردید.
فایل myCtrl.js
function($scope) {
$scope.firstName = "John";
$scope.lastName= "Doe";
});
توابع و متد ها میتواند فضای نام ها را آلوده کنند
از استفاده از متد هایی با نام مشابه متد های سراسری در JavaScript خود داری کنید.
آن ها می توانند به راحتی متد را overwrite کرده و اسکریپت را نابود کند.
ماژول های AngularJS با محلی کردن متد ها این مشکل را کاهش می دهند.
زمان بارگذاری کتابخانه
گذاشتن اسکریپت ها در پایان تگ <body> در صفحات HTML کار متداولی است.
پیشنهاد میکنیم فایل AngularJS را در تک <head> و یا ابتدای تگ <body> قرار دهید.
دلیل این پیشنهاد این است که متد angular.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> 
نظر شما
>