1. 程式人生 > >AngularJS之使用服務封裝

AngularJS之使用服務封裝

建立服務元件

在AngularJS中建立一個服務元件很簡單,只需要定義一個具有$get方法的建構函式, 然後使用模組的provider方法進行登記:

//定義建構函式
var myServiceProvider = function(){
this.$get = function(){
return ….
};
};
//在模組中登記
angular.module(“myModule”,[])
.provider(“myService”,myServiceProvider);

可配置的服務

有時我們希望服務在不同的場景下可以有不同的行為,這意味著服務可以進行配置。

比如,我們希望小計算器可以根據不同的本地化區域,給計算結果追加貨幣符號字首, 那麼需要在這個服務建立之前,首先配置本地化區域的值,然後在具體的計算中, 根據這個值選擇合適的貨幣符號。

AngularJS使用模組的config()方法對服務進行配置,需要將例項化的服務提供者 (而不是服務例項)注入到配置函式中:

angular.module(“myModule”,[])
.config([“myServiceProvider”,function(myServiceProvider){
//do some configuration.
}]);
注意:服務提供者provider物件在注入器中的登記名稱是:服務名+Provider。 例如: http"httpProvider”。

服務定義語法糖

使用模組的provider方法定義服務元件,在有些場景下顯得有些笨重。AngularJS友好 地提供了一些簡化的定義方法,這些方法通常只是對provider方法的封裝, 分別適用於不同的應用場景:

factory
使用一個物件工廠函式定義服務,呼叫該工廠函式將返回服務例項。

service
使用一個類建構函式定義服務,通過new操作符將建立服務例項。

value
使用一個值定義服務,這個值就是服務例項。

constant
使用一個常量定義服務,這個常量就是服務例項。

factory方法

factory方法要求提供一個物件工廠,呼叫該類工廠將返回服務例項。

var myServiceFactory = function(){
return …
};
angular.module(“myModule”,[])
.factory(“myService”,myServiceFactory);
INSIDE:AngularJS會將factory方法封裝為provider,上面的示例 等同於:

var myServiceFactory = function(){
return …
};
angular.module(“myModule”,[])
.provider(“myService”,function(){
this.$get = myServiceFactory;
});

service方法

service方法要求提供一個建構函式,AngularJS使用這個建構函式建立服務例項:

var myServiceClass = function(){
this.method1 = function(){…}
};
angular.module(“myModule”,[])
.service(“myService”,myServiceClass);
INSIDE:AngularJS會將service方法封裝為provider,上面的示例 等同於:

var myServiceClass = function(){
//class definition.
};
angular.module(“myModule”,[])
.provider(“myService”,function(){
this.$get = function(){
return new myServiceClass();
};
});
(http://*/course/54f3ba65e564e50cfccbad4b/中“使用服務封裝可複用程式碼”第五頁)預置了使用service方法改寫的ezCalculator示例,感受下和factory方法的區別!

value方法

有時我們需要在不同的元件之間共享一個變數,可以將這種情況視為一種服務: provider返回的總是變數的值。

value方法提供了對這種情況的簡化封裝:

angular.module(“myModule”,[])
.value(“myValueService”,”cx129800123”);
INSIDE:AngularJS會將value方法封裝為provider,上面的示例 等同於:

angular.module(“myModule”,[])
.provider(“myService”,function(){
this.$get = function(){
return “cx129800123”;
};
});
constant方法

有時我們需要在不同的元件之間共享一個常量,可以將這種情況視為一種服務: provider返回的總是常量的值。

constant方法提供了對這種情況的簡化封裝:

angular.module(“myModule”,[])
.constant(“myConstantService”,”Great Wall”);
和value方法不同,AngularJS並沒有將constant方法封裝成一個provider,而僅僅 是在內部登記這個值。這使得常量在AngularJS的啟動配置階段就可以使用(建立任何 服務之前):你可以將常量注入到模組的config()方法中。