AngularJS模塊可以在被加載和執(zhí)行之前對其自身進(jìn)行配置殖氏。我們可以在應(yīng)用的加載階段應(yīng)用不同的邏輯組。
配置
在模塊的加載階段凿滤,AngularJS會在提供者注冊和配置的過程中對模塊進(jìn)行配置。在整個(gè)AngularJS的工作流中,這個(gè)階段是唯一能夠在應(yīng)用啟動前進(jìn)行修改的部分致扯。
angular.module('myApp',[]).config(function($provide) { })
我們在某個(gè)模塊之上創(chuàng)建一個(gè)服務(wù)或指令時(shí):
angular.module('myApp',[]).factory('myFactory', function(){
var service = {};
return service;
})
.directive('myDirective', function(){
return {
template: '<button>Click me</button>'
}
})
AngularJS會在編譯時(shí)執(zhí)行這些輔助函數(shù)。它們在功能上等同于下面的寫法:
angular.module('myApp', [])
.config(function($provide ,$compileProvider) {
$provide.factory('myFactory', function() {
var service = {};
return service;
});
$compileProvider.directive('myDirective', function() {
return {
template: '<button>Click me</button>'
};
});
});
AngularJS會以這些函數(shù)書寫和注冊的順序來執(zhí)行它們当辐。也就是說我們無法注入一個(gè)尚未注冊的提供者抖僵。唯一例外的是constant()
方法,這個(gè)方法總會在所有配置塊之前被執(zhí)行缘揪。
當(dāng)對模塊進(jìn)行配置時(shí)耍群,需要格外注意只有少數(shù)幾種類型的對象可以被注入到config()
函數(shù)中:提供者和常量。如果我們將一個(gè)服務(wù)注入進(jìn)去找筝,會在真正對其進(jìn)行配置之前就意外地把服務(wù)實(shí)例化了蹈垢。
這種對配置服務(wù)進(jìn)行嚴(yán)格限制的另外一個(gè)副作用就是,我們只能注入用provider()
語法構(gòu)建的服務(wù)呻征,其他的則不行耘婚。
這些config()
代碼塊可以對我們的服務(wù)進(jìn)行自定義配置,例如設(shè)置API密鑰或自定義URL等陆赋。也可以定義多個(gè)配置塊沐祷,它們會按照順序執(zhí)行,這樣就可以將應(yīng)用不同階段的配置代碼集中在不同的代碼塊中攒岛。
angular.module('myApp', [])
.config(function($routeProvider) {
$routeProvider.when('/', {
controller: 'WelcomeController',
template: 'views/welcome.html'
});
})
.config(function(ConnectionProvider) {
ConnectionProvider.setApiKey('SOME_API_KEY');
});
config()
函數(shù)接受一個(gè)參數(shù):configFunction
赖临。AngularJS在模塊加載時(shí)會執(zhí)行這個(gè)函數(shù)。
運(yùn)行塊
和配置塊不同灾锯,運(yùn)行塊在注入器創(chuàng)建之后被執(zhí)行兢榨,它是所有AngularJS應(yīng)用中第一個(gè)被執(zhí)行的方法。
運(yùn)行塊通常用來注冊全局的事件監(jiān)聽器顺饮。例如吵聪,我們會在.run()
塊中設(shè)置路由事件的監(jiān)聽器以及過濾未經(jīng)授權(quán)的請求。
假設(shè)我們需要在每次路由發(fā)生變化時(shí)兼雄,都執(zhí)行一個(gè)函數(shù)來驗(yàn)證用戶的權(quán)限吟逝,放置這個(gè)功能唯一合理的地方就是run
方法:
angular.module('myApp', [])
.run(function($rootScope, AuthService) {
$rootScope.$on('$routeChangeStart', function(evt, next, current) {
// 如果用戶未登錄
if (!AuthService.userLoggedIn()) {
if (next.templateUrl === "login.html") {
// 已經(jīng)轉(zhuǎn)向登錄路由因此無需重定向
} else {
$location.path('/login');
}
}
});
});
run()
函數(shù)接受一個(gè)參數(shù):initializeFn
。AngularJS在注入器創(chuàng)建后會執(zhí)行這個(gè)函數(shù)赦肋。