首頁 > web前端 > js教程 > 主體

angularjs中有幾種服務? angularjs中的服務詳細分析

寻∝梦
發布: 2018-09-08 16:51:37
原創
1328 人瀏覽過

本篇文章主要的講述了關於angularjs的幾種服務的詳細分析。還有angularjs服務的各自用法及區別的介紹,現在我們就一起來看這篇文章吧

總體介紹

在一個分層良好的Angular 應用中,Controller這一層應該很薄。也就是說,應用程式裡大部分的業務邏輯和持久化資料都應該放在 Service 裡。

為此,要理解 AngularJS 中的幾個 Provider 之間的差異很有必要。
Provider 所建立的新服務都可以用來注入。包括:

  • provider

  • factory

  • service

  • constant

  • value

#各自用法及區別

provider

用於產生一個可配置的Service,由兩個部分組成。第一部分的變數和函數是可以在 app.config 函數中存取的,可以在它們被其他地方存取到之前來修改它們。定義方式如下:

app.provider('myProvider', function(){
    var a = '';    var func = function(){};
})
登入後複製

在app.config 函數對a 進行修改,這也是在有如此簡單的factory 的情況下也使用provider 的原因:

app.config(function(myProviderProvider){
    myProvider.a = 'hello world';
})
登入後複製

第二部分的變量和函數是透過$get() 函數傳回的,可以在任何傳入了該provider 的控制器中進行存取的。

app.provider('myProvider', function(){
    this.$get = function(){
        return {
            foo: function(){},
            a: a
        }
    }
})
登入後複製

factory

factory 傳回一個物件。只需要建立一個對象,為它添加屬性,然後返回這個對象。在控制器中註入該 factory,即可使用它的所有屬性。

app.factory('myFactory', function(){
    var fac = {};
    fac.a = 'hello world';
    fac.foo = function(){};    return fac;
})
登入後複製

看得出來,factory 的第二個參數就是 provider 中 $get 要對應的函數實作。

service

service 類似於建構器, 透過new 關鍵字實例化對象,將一些屬性和方法直接加入this 上,在建立service 物件時, this 會被當作傳回值返回。

app.service('myService', function(){
    var a = '';    this.setA = function(){};    this.getA = function(){};    this.foo = function(){};
})
登入後複製

注入 myService 的控制器可以存取到綁定在 myService 中 this 上的 setA() , getA() 和 foo() 三個方法。

constant

constant 用來定義常數,一旦定義就無法改變。可以被注入到任何地方,但是不能被裝飾器(decorator)裝飾。

app.constant('APP_KEY', 'a1s2d3f4')
登入後複製

value

與 constant 一樣,可以用來定義值。但與 constant 的差別是:可以被修改,可以被 decorator 裝飾,不能被注入到 config 中。

app.value('version', '1.0')
登入後複製

value 通常用來為應用程式設定初始值。 (想看更多就到PHP中文網AngularJS開發手冊欄位中學習)

decorator

比較特殊,它不是 provider 。它是用來裝飾其他 provider 的,不過 constant 除外,因為從原始碼可以看出,constant 不是透過 provider() 方法創建的。

下面是用 decorator 裝飾 value 的栗子。

app.value('version', '1.0');
app.decorator('version', function ($delegate) {
    return $delegate + '.1';
})
登入後複製

那麼如果要使用前面的 myService service,但其中缺少一個你想要的 greet 函數。可以修改 service 嗎?答案是不行!但可以裝飾它:

app.decorator('myService', function($delegate){
    $delegate.greet = function(){
        return "Hello, I am a new function of 'myService'";
    }
})
登入後複製

$delegate 代表實際上的 service 實例。
裝飾一個 service 的能力是非常實用的,尤其是當我們想要使用第三方的 service 時,此時不需要將程式碼複製到我們的專案中,而只需要進行一些修改即可。

什麼時候使用 provider 而不用 factory ?

provider 是 factory 的加強版。當需要一個可設定的 factory 的時候,使用 provider。

簡單介紹 AngularJS 運行應用程式的過程,分成兩個階段,config 階段和 run 階段。 config 階段是設定任何的 provider 的階段。也是設定任何的指令,控制器,過濾器以及其它東西的階段。在 run 階段,AngularJS 會編譯你的 DOM 並啟動應用程式。

這篇文章到這就結束了(想看更多就到PHP中文網AngularJS使用手冊欄位中學習),有問題的可以在下方留言提問。

以上是angularjs中有幾種服務? angularjs中的服務詳細分析的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板