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 通常用來為應用設定初始值。
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 並啟動應用。