آموزش انگولار-ماژول ها
یک ماژول انگولار، درواقع یک اپلیکیشن را تعریف می کند.
ماژول درواقع یک ظرف برای نگهداری قسمت های مختلف یک اپلیکیشن است.
همچنین می توان گفت که ماژول، یک ظرف برای کنترلرهای اپلیکیشن است.
کنترلرها همواره به یک ماژول تعلق دارند.
یک ماژول به همراه یک کنترلر
اپلیکیشن زیر("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>
- نوشته شده توسط احسان عباسی
- بازدید: 8473
دیدگاه‌ها
سلام. وقتتون بخیر. خروجی مثال دوم بطور صحیح نمایش داده نمی شه...!
سلام وعرض ادب
همان طور که در مثال ها مشاهده می کنید، برای لینک دادن به فایل js از روش CDN استفاده کردیم و ممکنه که بطور صحیح این کار انجام نشه و در نتیجه خروجی مثال بطور صحیح نمایش داده نمی شه ...
لطفا اگر با این مشکل مواجه شدید بجای http از https استفاده کنید.