相關教學推薦:《angular教學》
#什麼是Provider?
angularjs文件對provider的定義:
provider是一個帶有$get()
方法的物件。 injector呼叫$get
方法建立一個新的service的實例。 provider還有一些其他的方法,可以用來設定provider。
AngularJS使用$provide
註冊新的providers。 providers基本上都會創建一個新實例, 但每個provider只創建一次。 $provide
提供了6種方法來建立自訂provider, 我會用簡單的程式碼範例分別解釋他們。
6種方法如下:
constant
#value
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');
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中文網其他相關文章!