AngularJS中幾種Providers的區別

原文：https://xebia.com/blog/differ...

什麼是Provider?
AngularJS文檔對provider的定義:
provider是一個帶有$get()方法的對象。injector調用$get方法建立一個新的service的實例。provider還有一些其餘的方法，能夠用來配置provider。

AngularJS使用$provide註冊新的providers。providers基本上都會建立一個新實例, 但每一個provider只建立一次。$provide提供了6種方法建立自定義provider, 我會用簡單的代碼示例分別解釋他們。
6種方法以下:
constant
value
service
factory
decorator
provider

Constant
constant能被injected到任何地方。constant不能被decorator攔截, 意味着constant的值永遠不能被改變。

var app = angular.module('app', []); 
app.config(function ($provide) {
  $provide.constant('movieTitle', 'The Matrix');
}); 

app.controller('ctrl', function (movieTitle) {
  expect(movieTitle).toEqual('The Matrix');
});

AngularJS提供了一種更簡便的方式建立constant. 你能夠將上面3至5行的代碼重寫爲:

app.constant('movieTitle', 'The Matrix');

Value
value是一個簡單的可被注入的值，能夠是string, number, 也能夠是function。
與constant不一樣的是：value不能被注入到configurations, 但value能被decorators攔截。

var app = angular.module('app', []); 
app.config(function ($provide) {
 $provide.value('movieTitle', 'The Matrix')
});

app.controller('ctrl', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix');
})

建立value的簡單方法：

app.value('movieTitle', 'The Matrix');

Service
service是一個能夠注入的構造函數。若是你想，你能夠在函數中指定須要的依賴。
service是一個單例, 只被建立一次。services是一個很好的方式，用於控制器之間傳遞數據，如共享數據。

var app = angular.module('app' ,\[\]); 
app.config(function ($provide) {
 $provide.service('movie', function () {
   this.title = 'The Matrix';
 });
});

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});

建立service簡單方式:

app.service('movie', function () {
 this.title = 'The Matrix';
});

Factory
factory是一個可注入的函數。
與service的相同點：factory也是一個單例，也能夠在此函數中指定依賴。
區別是：factory注入一個普通函數，AngularJs將調用此函數，而service注入一個構造函數。
service是一個構造函數，要調用new建立一個新對象。而用factory，你能夠讓這個函數返回你想要的任何東西。
你將會看到，factory是一個只有$get方法的provider。

var app = angular.module('app', []); 
app.config(function ($provide) {
 $provide.factory('movie', function () {
   return {
     title: 'The Matrix';
   }
 });
}); 

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix');
});

建立factory的簡單方式：

app.factory('movie', function () {
 return {
   title: 'The Matrix';
 }
});

Decorator
decorator能夠修改或封裝其它的providers，但constant不能被裝飾。

var app = angular.module('app', []); 
app.value('movieTitle', 'The Matrix'); 
app.config(function ($provide) {
 $provide.decorator('movieTitle', function ($delegate) {
   return $delegate + ' - starring Keanu Reeves';
 });
});

app.controller('myController', function (movieTitle) {
 expect(movieTitle).toEqual('The Matrix - starring Keanu Reeves');
});

Provider
provider是全部providers中最複雜的，能夠有複雜的creation函數和配置選項。
provider實際是一個可配置的factory。 provider接受一個對象或構造函數。

var app = angular.module('app', []); 
app.provider('movie', function () {
 var version;
 return {
   setVersion: function (value) {
     version = value;
   },
   $get: function () {
     return {
       title: 'The Matrix' + ' ' + version
     }
   }
 }
});

app.config(function (movieProvider) {
 movieProvider.setVersion('Reloaded');
});

app.controller('ctrl', function (movie) {
 expect(movie.title).toEqual('The Matrix Reloaded');
});

總結全部的providers只會被實例化一次，所以他們都是單例的。除了constant，其餘的providers均可以被decorated。constant是一個值, 能夠被注入到任何地方，它的值不能被改變。value是一個簡單的可注入的值。service是一個可注入的構造函數。factory是以個可注入的函數。decorator能夠修改或封裝其它的providers，除了constant。provider是一個可配置的factory。