angular模塊的方法

AngularJS并沒有main方法,AngularJS使用模塊的概念來代替main方法澜掩。

加載和依賴
模塊加載動作發(fā)生在兩個不同的階段,這一點從函數(shù)名上面就可以反映出來,它們分別是Config代碼塊和Run代碼塊(或者叫做階段)宇挫。

Config代碼塊
在這一階段里面,AngularJS會連接并注冊好所有數(shù)據(jù)源酪术。
因此器瘪,只有數(shù)據(jù)源和常量可以注入到Config代碼塊中。
那些不確定是否已經(jīng)初始化好的服務不能注入進來绘雁。

Run代碼塊
Run代碼塊用來啟動你的應用橡疼。
為了避免在開始之后再對系統(tǒng)進行配置操作,只有實例和常量可以被注入到Run代碼塊中庐舟。
你會發(fā)現(xiàn)欣除,在AngularJS中,Run代碼塊是與main方法最類似的東西挪略。

快捷方法
利用模塊可以做什么呢历帚?我們可以用它來實例化控制器、指令杠娱、過濾器以及服務挽牢,但是利用模塊類還可以做更多事情。
如下模塊配置的API方法:

1.config(configFn)
利用此方法可以做一些注冊工作摊求,這些工作需要在模塊加載時完成禽拔。

2.constant(name, object)
此方法會首先運行,所以你可以用它來聲明整個應用范圍內(nèi)的常量睹簇,并且讓它們在所有配置(config方法)和實例(后面的所有方法奏赘,例如controller、service等)方法中可用太惠。它經(jīng)常被用來在指令中提供默認配置磨淌。作為一個constant,我們放入其中的值將不會改變凿渊。

3.controller(name,constructor)
它的基本作用是配置好控制器方便后面使用梁只。

4.directive(name,directiveFactory)
可以使用此方法在應用中創(chuàng)建指令。

5.filter(name,filterFactory)
允許你創(chuàng)建命名的AngularJS過濾器埃脏。

6.run(initializationFn)
如果你想要在APP啟動之后執(zhí)行某些操作搪锣,而這些操作需要在頁面對用戶可用之前執(zhí)行,就可以使用此方法彩掐。
run的作用构舟,相當于去初始化一些全局的數(shù)據(jù),省略了控制器的環(huán)節(jié)堵幽,就可以直接把值掛載到全局作用域下狗超。

7.value(name,object)
允許在整個應用中注冊值弹澎。value service有點像是一個constant,但是它是可以被改變的努咐。它也經(jīng)常被用在一個指令上面苦蒿,來進行配置。一個value service有點像是一個factory service的縮小版渗稍,它經(jīng)常用來保存值但是我們不能在其中對值進行計算佩迟。

8.factory(name,factoryFn)
一個Factory是一個能夠返回任何數(shù)據(jù)類型的service。
對于你如何創(chuàng)建它并沒有什么要求竿屹,你僅僅需要在其中返回一些東西即可报强。
如果你有一個類或者對象,需要首先為它提供一些邏輯或者參數(shù)羔沙,然后才能對它初始化躺涝,那么你就可以使用這里的factory接口。
factory是一個函數(shù)扼雏,它負責創(chuàng)建一些特定的值(或者對象)坚嗜。
我們來看一個greeter(打招呼)函數(shù)的實例,這個函數(shù)需要一條問候語來初始化:

function Greeter(salutation) {
this.greet = function(name) {
return salutation + ' ' + name;
};
}

// greeter函數(shù)示例如下:
myApp.factory('greeter', function(salut) {
return new Greeter(salut);
});

// 然后可以這樣來調(diào)用它:
var myGreeter = greeter('Halo');

9.service(name,object)
factory和service之間的不同點在于诗充,factory會直接調(diào)用傳遞給它的函數(shù)苍蔬,然后返回執(zhí)行的結果;
而service將會使用"new"關鍵字來調(diào)用傳遞給它的構造方法蝴蜓,然后再返回結果碟绑。
所以,前面的greeter Factory可以替換成下面這個greeter Service:

myApp.service('greeter', Greeter);

每當我們需要一個greeter實例的時候茎匠,AngularJS就會調(diào)用新的Greeter()來返回一個實例格仲。

補充:下面兩個例子是等價的

app.service('foo', function() {  
    var thisIsPrivate = "Private";  
        this.variable = "This is public";  
        this.getPrivate = function() {    
            return thisIsPrivate;  
        };
}); 

//如果我們已經(jīng)有了一個類,并且我們想將它用在service中
//也可以這樣寫
app.service('foo3',Foobar);  
app.factory('foo2', function() {  
    return new Foobar();
});  

function Foobar() {  
    var thisIsPrivate = "Private";  
    this.variable = "This is public";  
    this.getPrivate = function() {    
        return thisIsPrivate;  
    };
} 

10.provider(name,providerFn)
provider是這幾個方法中最復雜的部分(顯然诵冒,也是可配置性最好的部分)凯肋。
provider中既綁定了factory也綁定了service,并且在注入系統(tǒng)準備完畢之前汽馋,還可以享受到配置provider函數(shù)的好處(也就是config塊)侮东。
我們來看看使用provider改造之后的greeter Service是什么樣子:

myApp.provider('greeter', function() {
    var salutation = 'Hello';
    this.setSalutation = function(s) {
        salutation = s;
    }
    function Greeter(a) {
        this.greet = function() {
            return salutation + ' ' + a;
        }
    }
    this.$get = function(a) {
        return new Greeter(a);
    };
});

這樣我們就可以在運行時動態(tài)設置問候語了(例如,可以根據(jù)用戶使用的不同語言進行設置)豹芯。

var myApp = angular.module(myApp, [])
    .config(function(greeterProvider) {
        greeterProvider.setSalutation('Namaste');
    });

補充:上一個例子中補充的factory代碼等價于下面的provider代碼:

app.provider('foo', function() {   
    return {     
        $get: function() {
            var thisIsPrivate = "Private";      
                function getPrivate() {        
                    return thisIsPrivate;      
                }       
            return {        
                variable: "This is public",        
                getPrivate: getPrivate      
            };    
        }   
    }; 
});   

一個provider中應當有一個$get函數(shù)悄雅,其中的內(nèi)容就是我們想要注入我們應用中的部分。
因此當我們將foo注入一個控制器時铁蹈,我們實際上注入的是$get函數(shù)宽闲。

既然factory如此簡單,那我們?yōu)槭裁催€要使用provider呢?因為我們可以在config階段配置一個provider便锨。
我們可以編寫下面的代碼:

app.provider('foo', function() {
  var thisIsPrivate = "Private"; 
  return { 
    setPrivate: function(newVal) {
      thisIsPrivate = newVal;
    }, 
    $get: function() {
      function getPrivate() {
        return thisIsPrivate;
      } 
      return {
        variable: "This is public",
        getPrivate: getPrivate
      };
    }
  }; 
});
 
app.config(function(fooProvider) {
  fooProvider.setPrivate('New value from config');
});   

在這里我們將thisIsPrivate移到了我們的$get函數(shù)的外面围辙,然后我們創(chuàng)建了一個setPrivate來在一個config函數(shù)中修改thisIsPrivate。
這比在factory中添加setter要容易放案,除此之外,我們可以用它來配置URL矫俺。

?著作權歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
  • 序言:七十年代末吱殉,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子厘托,更是在濱河造成了極大的恐慌友雳,老刑警劉巖,帶你破解...
    沈念sama閱讀 211,123評論 6 490
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件铅匹,死亡現(xiàn)場離奇詭異押赊,居然都是意外死亡,警方通過查閱死者的電腦和手機包斑,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 90,031評論 2 384
  • 文/潘曉璐 我一進店門流礁,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人罗丰,你說我怎么就攤上這事神帅。” “怎么了萌抵?”我有些...
    開封第一講書人閱讀 156,723評論 0 345
  • 文/不壞的土叔 我叫張陵找御,是天一觀的道長。 經(jīng)常有香客問我绍填,道長霎桅,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 56,357評論 1 283
  • 正文 為了忘掉前任讨永,我火速辦了婚禮滔驶,結果婚禮上,老公的妹妹穿的比我還像新娘住闯。我一直安慰自己瓜浸,他們只是感情好,可當我...
    茶點故事閱讀 65,412評論 5 384
  • 文/花漫 我一把揭開白布比原。 她就那樣靜靜地躺著插佛,像睡著了一般。 火紅的嫁衣襯著肌膚如雪量窘。 梳的紋絲不亂的頭發(fā)上雇寇,一...
    開封第一講書人閱讀 49,760評論 1 289
  • 那天,我揣著相機與錄音,去河邊找鬼锨侯。 笑死嫩海,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的囚痴。 我是一名探鬼主播叁怪,決...
    沈念sama閱讀 38,904評論 3 405
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼深滚!你這毒婦竟也來了奕谭?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 37,672評論 0 266
  • 序言:老撾萬榮一對情侶失蹤痴荐,失蹤者是張志新(化名)和其女友劉穎血柳,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體生兆,經(jīng)...
    沈念sama閱讀 44,118評論 1 303
  • 正文 獨居荒郊野嶺守林人離奇死亡难捌,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 36,456評論 2 325
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了鸦难。 大學時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片根吁。...
    茶點故事閱讀 38,599評論 1 340
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖明刷,靈堂內(nèi)的尸體忽然破棺而出婴栽,到底是詐尸還是另有隱情,我是刑警寧澤辈末,帶...
    沈念sama閱讀 34,264評論 4 328
  • 正文 年R本政府宣布愚争,位于F島的核電站,受9級特大地震影響挤聘,放射性物質(zhì)發(fā)生泄漏轰枝。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 39,857評論 3 312
  • 文/蒙蒙 一组去、第九天 我趴在偏房一處隱蔽的房頂上張望鞍陨。 院中可真熱鬧,春花似錦从隆、人聲如沸诚撵。這莊子的主人今日做“春日...
    開封第一講書人閱讀 30,731評論 0 21
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽寿烟。三九已至,卻和暖如春辛燥,著一層夾襖步出監(jiān)牢的瞬間筛武,已是汗流浹背缝其。 一陣腳步聲響...
    開封第一講書人閱讀 31,956評論 1 264
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留徘六,地道東北人内边。 一個月前我還...
    沈念sama閱讀 46,286評論 2 360
  • 正文 我出身青樓,卻偏偏與公主長得像待锈,于是被迫代替她去往敵國和親漠其。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 43,465評論 2 348

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

  • Spring Cloud為開發(fā)人員提供了快速構建分布式系統(tǒng)中一些常見模式的工具(例如配置管理竿音,服務發(fā)現(xiàn)辉懒,斷路器,智...
    卡卡羅2017閱讀 134,628評論 18 139
  • AngularJS中的Module類負責定義應用如何啟動谍失,它還可以通過聲明的方式定義應用中的各個片段。我們來看看它...
    hx永恒之戀閱讀 415評論 0 1
  • 1莹汤、angularjs的幾大特性是什么快鱼? 雙向數(shù)據(jù)綁定、依賴注入纲岭、模板抹竹、指令、MVC/MVVM 2止潮、列舉幾種常見的...
    秀才JaneBook閱讀 1,539評論 0 22
  • AngularJS是什么窃判? AngularJs(后面就簡稱ng了)是一個用于設計動態(tài)web應用的結構框架。首先喇闸,它...
    Lisy_閱讀 673評論 0 2
  • 清明節(jié)已經(jīng)過去一個月袄琳,每臨這樣一個傳統(tǒng)假日,馬路上車水馬龍燃乍,遇見的都是歸家心切的面容唆樊。大多數(shù)人都踏上了回鄉(xiāng)祭...
    豪甯爸爸閱讀 313評論 0 6