Angular學(xué)習(xí)筆記(6)—模塊加載

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ù)赦肋。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末块攒,一起剝皮案震驚了整個(gè)濱河市励稳,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌囱井,老刑警劉巖驹尼,帶你破解...
    沈念sama閱讀 218,036評論 6 506
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異庞呕,居然都是意外死亡新翎,警方通過查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 93,046評論 3 395
  • 文/潘曉璐 我一進(jìn)店門千扶,熙熙樓的掌柜王于貴愁眉苦臉地迎上來料祠,“玉大人,你說我怎么就攤上這事澎羞。” “怎么了敛苇?”我有些...
    開封第一講書人閱讀 164,411評論 0 354
  • 文/不壞的土叔 我叫張陵妆绞,是天一觀的道長。 經(jīng)常有香客問我枫攀,道長括饶,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 58,622評論 1 293
  • 正文 為了忘掉前任来涨,我火速辦了婚禮图焰,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘蹦掐。我一直安慰自己技羔,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 67,661評論 6 392
  • 文/花漫 我一把揭開白布卧抗。 她就那樣靜靜地躺著藤滥,像睡著了一般。 火紅的嫁衣襯著肌膚如雪社裆。 梳的紋絲不亂的頭發(fā)上拙绊,一...
    開封第一講書人閱讀 51,521評論 1 304
  • 那天,我揣著相機(jī)與錄音泳秀,去河邊找鬼标沪。 笑死,一個(gè)胖子當(dāng)著我的面吹牛嗜傅,可吹牛的內(nèi)容都是我干的金句。 我是一名探鬼主播,決...
    沈念sama閱讀 40,288評論 3 418
  • 文/蒼蘭香墨 我猛地睜開眼磺陡,長吁一口氣:“原來是場噩夢啊……” “哼趴梢!你這毒婦竟也來了漠畜?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 39,200評論 0 276
  • 序言:老撾萬榮一對情侶失蹤坞靶,失蹤者是張志新(化名)和其女友劉穎憔狞,沒想到半個(gè)月后,有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體彰阴,經(jīng)...
    沈念sama閱讀 45,644評論 1 314
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡瘾敢,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 37,837評論 3 336
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了尿这。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片簇抵。...
    茶點(diǎn)故事閱讀 39,953評論 1 348
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖射众,靈堂內(nèi)的尸體忽然破棺而出碟摆,到底是詐尸還是另有隱情,我是刑警寧澤叨橱,帶...
    沈念sama閱讀 35,673評論 5 346
  • 正文 年R本政府宣布典蜕,位于F島的核電站,受9級特大地震影響罗洗,放射性物質(zhì)發(fā)生泄漏愉舔。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 41,281評論 3 329
  • 文/蒙蒙 一伙菜、第九天 我趴在偏房一處隱蔽的房頂上張望轩缤。 院中可真熱鬧,春花似錦贩绕、人聲如沸火的。這莊子的主人今日做“春日...
    開封第一講書人閱讀 31,889評論 0 22
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽卫玖。三九已至,卻和暖如春踊淳,著一層夾襖步出監(jiān)牢的瞬間假瞬,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 33,011評論 1 269
  • 我被黑心中介騙來泰國打工迂尝, 沒想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留脱茉,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 48,119評論 3 370
  • 正文 我出身青樓垄开,卻偏偏與公主長得像琴许,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個(gè)殘疾皇子溉躲,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 44,901評論 2 355

推薦閱讀更多精彩內(nèi)容

  • Spring Cloud為開發(fā)人員提供了快速構(gòu)建分布式系統(tǒng)中一些常見模式的工具(例如配置管理榜田,服務(wù)發(fā)現(xiàn)益兄,斷路器,智...
    卡卡羅2017閱讀 134,656評論 18 139
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)箭券。ng-model 指令也可以:...
    壬萬er閱讀 869評論 0 2
  • 1. 介紹 AngularJS是一款由Google公司開發(fā)維護(hù)的前端MVC框架净捅,其克服了HTML在構(gòu)建應(yīng)用上的諸多...
    崔皓翔閱讀 838評論 0 5
  • Spring Boot 參考指南 介紹 轉(zhuǎn)載自:https://www.gitbook.com/book/qbgb...
    毛宇鵬閱讀 46,811評論 6 342
  • 大家好废亭,我是IT修真院深圳分院第01期學(xué)員国章,一枚正直善良的web程序員。 今天給大家分享一下豆村,修真院官網(wǎng) JS任務(wù)...
    長天_閱讀 1,352評論 0 4