angularjs中的factory,service與provider的區(qū)別

在Angular中,控制器應(yīng)該是簡潔精煉的;一些邏輯和重復(fù)性的數(shù)據(jù)都應(yīng)該要存儲到服務(wù)中。控制器就應(yīng)該在需要他們的時候?qū)嵗诓恍枰臅r候就取消掉。因此,Angular在你每次切換路由的時候,就會清理當前的控制器。但是呢,服務(wù)為我們提供了一種長期存儲應(yīng)用數(shù)據(jù)的方式,同時,也可以在不同的控制器之間統(tǒng)一的使用服務(wù)。

Angular為我們提供了三種創(chuàng)建服務(wù)的方式:

  • Factory
  • Service
  • Provider

廢話不多說,簡要分析一下。

factory新創(chuàng)建了一個對象,然后在這個對象上新添屬性,最后返回這個對象。
service使用new關(guān)鍵詞進行了實例化。只需要在this上添加屬性和方法,服務(wù)就會自動的返回this。

factory與service在controller的用法并沒有什么不同,不要以為service每次注入controller都要new一次,AngularJS 在初始化的時候,會new一次service,所以當 controller 要求注入 service 的時候,AngularJS 就會把已經(jīng) new 過的的 service 給 controller。

注意:Provider 都是 singleton !!!!!

沒錯,所以就算 service 有 new 這個指令,可是其實也只是做一次而已。
每個要求注入 service 的 components 拿到的都會是同一個service reference。
factory 也是相同的情況,全部系統(tǒng)共用一個 Factory reference。

所以我們才用Provider做controller之間傳值的橋梁!!!

Provider:

provider是唯一一種可以創(chuàng)建用來注入到config()函數(shù)的服務(wù)的方式。想在你的服務(wù)啟動之前,進行一些模塊化的配置的話,就使用provider。

來簡單的說明一下 Provider 跟 Factory 和 Service 的關(guān)系。個人覺得 Mark Meyer 在 top 10 mistakes angularjs developers make 文章解說的很好。把 code 借來并附上我的注解。

// factory  的底層就是回傳 provider 的 $get 裡的值 
function factory(name, factoryFn) {
     return provider(name, { $get: factoryFn });
}

// service  的底層就是在 factory 裡使用 $jnjector.instantiate 跟 construct 建立新物件
// ( $injector.instantiate 會做 new instance 的動作)
function service(name, constructor) {
     return factory(name, ['$injector',
          function($injector) {
               return $injector.instantiate(constructor);
          }]);
}

再來看看provider的使用方式:

app.provider('My', function () {
        //  私有屬性和方法
        var artist;

        // 只有直接添加在this上的屬性才能被config函數(shù)訪問
        this._artist = '';
        this.thingFromConfig = '';

        // 只有$get函數(shù)返回的屬性才能被控制器訪問
        this.$get = function () {
            var that = this;
            return {
                getArtist: function () {
                    return that._artist;
                },
                thingFromConfig: that.thingFromConfig
            };
        };
    })
    .config(['MyProvider', function ( MyProvider ) {
        MyProvider.thingFromConfig = 'this is set in config()';
    }])
    .controller('myProviderCtrl', [
        '$scope', 'My',
        function ( $scope, My ) {
            $scope.artist = My.thingFromConfig;
        }]);

你可以認為provider有三個部分,第一部分是私有變量和私有函數(shù),這些變量和函數(shù)會在以后被修改。第二部分是在app.config函數(shù)里可以訪問的變量和函數(shù),所以,他們可以在在其他地方使用之前被修改。注意,這些變量和函數(shù)一定要添加到this上面才行。在我們的例子中,app.config()函數(shù)能夠修改的只有thingFromConfig。第三部分是在控制器里可以訪問的變量和函數(shù)。

當使用 provider創(chuàng)建服務(wù)的時候,唯一可以讓控制器訪問的屬性和方法是在$get()函數(shù)里返回的屬性和方法。將$get添加到了this上面,最終這個函數(shù)會被返回。

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,362評論 6 537
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 99,013評論 3 423
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 177,346評論 0 382
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經(jīng)常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,421評論 1 316
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,146評論 6 410
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開封第一講書人閱讀 55,534評論 1 325
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,585評論 3 444
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側(cè)響起,我...
    開封第一講書人閱讀 42,767評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 49,318評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點故事閱讀 41,074評論 3 356
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發(fā)現(xiàn)自己被綠了。 大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,258評論 1 371
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,828評論 5 362
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點故事閱讀 44,486評論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,916評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,156評論 1 290
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,993評論 3 395
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,234評論 2 375

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

  • 1、angularjs的幾大特性是什么? 雙向數(shù)據(jù)綁定、依賴注入、模板、指令、MVC/MVVM 2、列舉幾種常見的...
    2e9a10d418ab閱讀 1,377評論 0 10
  • Angular面試題 一、ng-show/ng-hide與ng-if的區(qū)別? 第一點區(qū)別是,ng-if在后面表達式...
    w_zhuan閱讀 5,555評論 0 26
  • 1、angularjs的幾大特性是什么? 雙向數(shù)據(jù)綁定、依賴注入、模板、指令、MVC/MVVM 2、列舉幾種常見的...
    秀才JaneBook閱讀 1,553評論 0 22
  • ng-model 指令ng-model 指令 綁定 HTML 元素 到應(yīng)用程序數(shù)據(jù)。ng-model 指令也可以:...
    壬萬er閱讀 887評論 0 2
  • AngularJSAngularJS 是一個 MV* 框架, 最適于開發(fā)客戶端的單頁面應(yīng)用。它不是個功能庫,...
    一直以來都很好閱讀 908評論 0 0