懶實例化-一個服務只有當程式的組件用到它的時候才進行實例化; 單例模式-每個依賴服務的組件,都是獲得服務工廠生成單個實例的引用。服務是一個單例對象或函數,對外提供特定的功能。 ...
1.服務(Service)介紹
Angular services are substitutable objects that are wired together using dependency injection (DI). You can use services to organize and share code across your app.
Angular服務的兩大特點:
- Lazily instantiated – Angular only instantiates a service when an application component depends on it.
- Singletons – Each component dependent on a service gets a reference to the single instance generated by the service factory.
懶實例化-一個服務只有當程式的組件用到它的時候才進行實例化;
單例模式-每個依賴服務的組件,都是獲得服務工廠生成單個實例的引用。服務是一個單例對象或函數,對外提供特定的功能。
官方提供的示例demo: Using a Service
2.內置(built-in)服務
Angular本身提供了非常多的內置服務,方便用戶進行開發。和後端打交道用到的$http
,URL跳轉用到的$location
;動畫相關的$animate
服務等等。
3.自定義(custom)服務的五種方式
3.1 value()
定義一個服務,服務可以是字元串,數字或者函數,對象等。它和constant
不相同的地方是,它可以在其他
的地方修改,但是不能註入到config
中,但是它可以被裝飾器decorator
修飾。
var app = angular.module('app', []);
app.value('appVersion',"v.1.0.1");
3.2 constant()
定義常量時候使用,定義的值不能進行修改。可以註入到任何需要它的組件中,但是不能被裝飾器decorator
修飾。
前後端分類的項目中,定義後端伺服器URL地址。代碼如下:
var app = angular.module('app', []);
app.constant('AppConfig', {
serverBaseUrl: 'http://192.168.1.1/api/',
});
3.3 factory()
註入的一個function
,是在開發過程,自定義服務方法使用做多的一種方式。它和service
的區別是,factory
註入的是普通的function
,而service
註入的是一個構造函數constructor
。因為它可以返回任何東西,所以在實際開發中使用的最多。它實際上是一個只有$get
方法的provider
。
var app = angular.module('app', []);
app.factory('myService',function(){
var appVersion="v.1.0.1";
return appVersion;
});
3.4 service()
註入的是一個構造器,可以在控制器之間共用數據。
var app = angular.module('app' ,[]);
app.config(function ($provide) {
$provide.service('customData', function () {
this.data = 'Angular Service Here';
});
});
3.5 provider()
provider
可以說是一個可以配置的factory
。Angular規定provider必須返回一個$get
方法。provider是value
,service
和factory
的封裝。value
,service
和factory
三種方式定義的服務,底層還是調用provider方法。
var app = angular.module('app', []);
app.config(function($provide) {
$provide.provider('registration', function() {
var type;
return {
setType: function(value) {
type = value;
},
$get: function() {
return {
title: 'Service from Provider ' + type
}
}
}
})
});
//對registrationProvider進行配置
app.config(function(registrationProvider) {
registrationProvider.setType('Angular');
});
說明:在配置這裡,我們註入的registrationProvider
而不是在provider方法裡面定義的registration
服務名稱,這裡其實是Angular本身通過做的一件事情。config
裡面要註入供應商,所以寫成駝峰命名格式registrationProvider
,Angular會幫我們註入這個provider。
3.6 Decorator
在說明value
和constant
方法時,提到了裝飾器decorator
。它本身不是Provider
,而是來裝飾其他的provider
的。而上面說過provider是value
,service
和factory
的封裝。但是constant
不是,所有decorator
不能裝飾constant
。裝飾這個概念,個人理解類似C#
裡面的委托,可以改變已經定義服務裡面的方法實現。
對value
裝飾
var app = angular.module('app', []);
app.value('appVersion',"v.1.0.1");
app.config(function($provide){
$provide.decorator('appVersion',function($delegate){
return $delegate+"- @cmsoft"
});
});
參考
Angular Service
AngularJS中的Provider們:Service和Factory等的區別
走進AngularJs(六) 服務
http://www.html-js.com/article/1825