關于AngularJS中幾種Providers的區(qū)別總結

更新時間：2020年05月17日 09:34:13 作者：lavender

這篇文章主要給大家介紹了關于AngularJS中幾種Providers的區(qū)別的相關資料，文中通過示例代碼介紹的非常詳細，對大家學習或者使用AngularJS具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧

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

什么是Provider?

AngularJS文檔對provider的定義:

provider是一個帶有$get()方法的對象。injector調用$get方法創(chuàng)建一個新的service的實例。provider還有一些其他的方法，可以用來配置provider。

AngularJS使用$provide注冊新的providers。providers基本上都會創(chuàng)建一個新實例, 但每個provider只創(chuàng)建一次。$provide提供了6種方法創(chuàng)建自定義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提供了一種更簡便的方式創(chuàng)建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');
})

創(chuàng)建value的簡單方法：

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

Service

service是一個可以注入的構造函數(shù)。如果你想，你可以在函數(shù)中指定需要的依賴。

service是一個單例, 只被創(chuàng)建一次。services是一個很好的方式，用于控制器之間傳遞數(shù)據(jù)，如共享數(shù)據(jù)。

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');
});

創(chuàng)建service簡單方式:

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

Factory

factory是一個可注入的函數(shù)。

與service的相同點：factory也是一個單例，也可以在此函數(shù)中指定依賴。

區(qū)別是：factory注入一個普通函數(shù)，AngularJs將調用此函數(shù)，而service注入一個構造函數(shù)。

service是一個構造函數(shù)，要調用new創(chuàng)建一個新對象。而用factory，你可以讓這個函數(shù)返回你想要的任何東西。
你將會看到，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');
});

創(chuàng)建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函數(shù)和配置選項。

provider實際是一個可配置的factory。 provider接受一個對象或構造函數(shù)。

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是一個可注入的構造函數(shù)。

factory是以個可注入的函數(shù)。

decorator可以修改或封裝其它的providers，除了constant。

provider是一個可配置的factory。

到此這篇關于關于AngularJS中幾種Providers的區(qū)別總結的文章就介紹到這了,更多相關AngularJS中Providers區(qū)別內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: