آموزش انگولار-ماژول ها

یک ماژول انگولار، درواقع یک اپلیکیشن را تعریف می کند. 

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

همچنین می توان گفت که ماژول، یک ظرف برای کنترلرهای اپلیکیشن است.

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


یک ماژول به همراه یک کنترلر

اپلیکیشن زیر("myApp") دارای یک کنترلر("myCtrl") است:

مثالی از انگولار

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body>

<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>
خودتان امتحان کنید »

ماژول ها و کنترلرها در فایل های جداگانه

در اپلیکیشن های انگولار، رسم بر آن است که ماژول ها و کنترلرها را در فایل های جداگانه ی جاوا اسکریپت قرار می دهند.

در مثال زیر، فایل "myApp.js" دربردارنده ی یک ماژول اپلیکیشن است درحالی که فایل "myCtrl.js" دربردارنده ی کنترلر است:

مثالی از انگولار

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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", []);
Note

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

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="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/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>
خودتان امتحان کنید »
تبلیغات اینترنتی
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehiمجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامیپرداخت آنلاین -  بانک ملتمعرفی بیاموز در شبکه سهپرداخت آنلاین - بانک اقتصاد نوینپرداخت آنلاین - بانک سامان