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