ماژول های AngularJS

  • یک ماژول AngularJS یک اپلیکیشن را تعریف می کند.
  • یک ماژول AngularJS بخش های مختلف یک اپلیکیشن را در خود نگه داری میکند.
  • یک ماژول AngularJS شامل همه کنترلر های اپلیکیشن می باشد.
  • کنترلر ها همیشه متعلق به ماژول ها هستند.

ساخت یک ماژول AngularJS

یک ماژول با استفاده از یک متد AngularJS   ساخته می شود . با استفاده از متد   angular.module 

<div ng-app="myApp">...</div>
<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

var app = angular.module("myApp", []);

پارامتر [] در تعریف ماژول ها می تواند توسط ماژول های وابسته استفاده شود.
بدون پارامتر [] شما یک ماژول جدید ایجاد نکرده اید اما یک ماژول موجود را بازیابی کردید.

فایل myCtrl.js

app.controller("myCtrl",
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> 
مشاهده مثال

نظر شما

لطفا نام و نام خانوادگی خود را وارد کنید
لطفا ایمیل خود را وارد کنید لطفا ایمیل صحیح وارد کنید.
لطفا متن نظر خود را وارد کنید
>

مقالات و دروس

به خبرنامه مدرسه طراحی وب ایران (وب مهراز) بپیوندید.

لطفا شماره همراه صحیح وارد کنید.
لطفا ایمیل صحیح وارد کنید.

مقالات مرتبط