نحوه تعریف ماژول در آنگولار

در این مقاله به نحوه تعریف ماژول در نرم افزار های آنگولار خواهیم پرداخت

تعریف ماژولها در آنگولارجی اس

یک ماژول آنگولارجی اس یک اپلیکیشن را تعریف می کند.

ماژول یک کانتینر برای قسمت های مختلف یک نرم افزار است.

ماژول یک کانتینر برای کنترلر های نرم افزار است.

کنترلر ها همواره به یک ماژول تعلق دارند.

ایجاد یک ماژول

یک ماژول با استفاده از عملگر آنگولار به صورت angular.module ایجاد میشود.

<div ng-app="myApp">...</div>

<script>

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

</script>

پارامتر myApp به یک تگ html ارجاع داده میشود که اپلیکیشن را اجرا خواهد کرد.

حالا میتوانید کنترلرها ، دستورالعمل ها ، فیلترهاو غیره را در اپلیکیشن آنگولار اجرا کنید.

افزودن یک کنترلر

برای افزودن یک کنترلر به اپلیکیشن خود، از دستور العمل 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>

مشاهده نتیجه

افزودن یک دستورالعمل

آنگولار به شما امکان ایجاد دستورالعمل را میدهد تا عملکرد نرم افزار خود را افزایش دهید.

شما میتوانید از ماژول ها برای افزودن دستورالعمل ها به نرم افزار خود استفاده کنید:

<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.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";
});

زمان بارگزاری کتابخانه

هرچند که شما در HTML میتوانید بعد از تگ <body> اسکریپت های خود را درج کنید پیشنهاد میشود که کد های آنگولار را درون تگ <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>