AngularJS之使用服務封裝可復用代碼

創建服務組件

在AngularJS中創建一個服務組件很簡單，只需要定義一個具有$get方法的構造函數， 然后使用模塊的provider方法進行登記：

1. //定義構造函數
2. var myServiceProvider = function(){
3. this.$get = function(){
4. return ....
5. };
6. };
7. //在模塊中登記
8. angular.module("myModule",[])
9. .provider("myService",myServiceProvider);

示例(http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/中“使用服務封裝可復用代碼”第一頁)定義了一個支持四則運算的服務：ezCalculator。

可配置的服務

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

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

AngularJS使用模塊的config()方法對服務進行配置，需要將實例化的服務提供者 （而不是服務實例）注入到配置函數中：

1. angular.module("myModule",[])
2. .config(["myServiceProvider",function(myServiceProvider){
3. //do some configuration.
4. }]);

注意：服務提供者provider對象在注入器中的登記名稱是：服務名+Provider。 例如： $http的服務提供者實例名稱是"$httpProvider"。

服務定義語法糖

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

• factory

使用一個對象工廠函數定義服務，調用該工廠函數將返回服務實例。

• service

使用一個類構造函數定義服務，通過new操作符將創建服務實例。

• value

使用一個值定義服務，這個值就是服務實例。

• constant

使用一個常量定義服務，這個常量就是服務實例。

factory方法

factory方法要求提供一個對象工廠，調用該類工廠將返回服務實例。

 

1. var myServiceFactory = function(){
2. return ...
3. };
4. angular.module("myModule",[])
5. .factory("myService",myServiceFactory);

INSIDE：AngularJS會將factory方法封裝為provider，上面的示例 等同於：

1. var myServiceFactory = function(){
2. return ...
3. };
4. angular.module("myModule",[])
5. .provider("myService",function(){
6. this.$get = myServiceFactory;
7. });

(http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/中“使用服務封裝可復用代碼”第四頁）預置了使用factory方法改寫的ezCalculator示例，感受下和provider方法的區別！

service方法

service方法要求提供一個構造函數，AngularJS使用這個構造函數創建服務實例：

 

1. var myServiceClass = function(){
2. this.method1 = function(){...}
3. };
4. angular.module("myModule",[])
5. .service("myService",myServiceClass);

INSIDE：AngularJS會將service方法封裝為provider，上面的示例 等同於：

1. var myServiceClass = function(){
2. //class definition.
3. };
4. angular.module("myModule",[])
5. .provider("myService",function(){
6. this.$get = function(){
7. return new myServiceClass();
8. };
9. });

(http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/中“使用服務封裝可復用代碼”第五頁）預置了使用service方法改寫的ezCalculator示例，感受下和factory方法的區別！

value方法

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

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

1. angular.module("myModule",[])
2. .value("myValueService","cx129800123");

INSIDE：AngularJS會將value方法封裝為provider，上面的示例 等同於：

1. angular.module("myModule",[])
2. .provider("myService",function(){
3. this.$get = function(){
4. return "cx129800123";
5. };
6. });

constant方法

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

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

1. angular.module("myModule",[])
2. .constant("myConstantService","Great Wall");

和value方法不同，AngularJS並沒有將constant方法封裝成一個provider，而僅僅 是在內部登記這個值。這使得常量在AngularJS的啟動配置階段就可以使用（創建任何 服務之前）：你可以將常量注入到模塊的config()方法中。

參考資料：http://www.hubwiz.com/course/54f3ba65e564e50cfccbad4b/