談談AngularJS中Providers之間的差異

相關教學推薦：《angular教學》

#什麼是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。 #########英文原文網址：https://xebia.com/blog/differences-between-providers-in-angularjs/#########相關推薦：###程式設計教學######

以上是談談AngularJS中Providers之間的差異的詳細內容。更多資訊請關注PHP中文網其他相關文章！