مسیریابی در AngularJs #بخش سوم
نویسنده: حمید صابری
تاریخ: ۱۳۹۲/۱۰/۲۱ ۰:۱۰
آدرس: www.dntips.ir
| مطالب | ۳۶۹۴ |
| نویسندگان | ۲۷۶ |
| گروههای مطالب | ۱۰۲۴ |
| نقشههای راه | ۱۱۹ |
| دورهها | ۱۴ |
| اشتراکها | ۱۷۹۱۴ |
در بخشهای پیشین ( بخش اول و بخش دوم) به خوبی با اصول و روش مسیریابی (Routing) در AngularJS آشناشدیم. در این بخش میخواهم به برخی جزئیات درباره مسیریابی بپردازم.اولین موضوع، تغییراتی است که از نسخه 1.2 به بعد در روش استفاده از سرویس مسیریابی در AngularJS بوجود آمده است. از نسخه 1.2 سرویس مسیریابی از هسته اصلی AngularJS خارج شد و برای استفاده از امکانات این سرویس باید فایل angular-route.js و یا angular-route.min.js را به صفحه خود بیفزاییم:
<script src="~/Scripts/angular.min.js"></script> <script src="~/Scripts/angular-route.min.js"></script>
var app = angular.module("mainApp", ['ngRoute']); .when('/controllerAS', {
controller: 'testController',
controllerAs: 'tCtrl',
template: '<div>{{tCtrl.Title}}</div>'
}) when(string path, object route)
.when('/controllerAS', {
controller: 'testController',
controllerAs: 'tCtrl',
template: '<div>{{tCtrl.Title}}</div>',
caseInsensitiveMatch: true
}) $routeProvider
.when('/resolveTest',
{
resolve: {
// این وابستگی بلافاصله بازمیگردد
person: function () {
return {
name: "Hamid Saberi",
email: "Hamid.Saberi@Gmail.com"
}
},
// بازمیگرداند promise این وابستگی یک
// شدن آن به تاخیر میافتد resolve پس تغییر مسیر تا
currentDetails: function ($http) {
return $http({
method: 'Get',
url: '/current_details'
});
},
//میتوانیم از یک وابستگی در وابستگی دیگر استفاده کنیم
facebookId: function ($http, currentDetails) {
$http({
method: 'GET',
url: 'http://facebook.com/api/current_user',
params: {
email: currentDetails.data.emails[0]
}
})
},
// بارگذاری فایلهای اسکریپت مورد نیاز
fileDeps:function($q, $rootScope){
var deferred = $q.defer();
var dependencies =
[
'controllers/AboutViewController.js',
'directives/some-directive.js'
];
//$Script.js بارگذاری وابستگیها با استفاده از
$script(dependencies, function(){
// همه وابستگیها بارگذاری شده اند
$rootScope.$apply(function(){
deferred.resolve();
});
});
return deferred.promise;
}
},
controller: function ($scope, person, currentDetails, facebookId) {
this.Person = person;
},
controllerAs: 'rtCtrl',
template: '<div>{{rtCtrl.Person.name}}</div>',
caseInsensitiveMatch: true
})