您好,登錄后才能下訂單哦!
小編給大家分享一下AngularJS中Providers是什么,相信大部分人都還不怎么了解,因此分享這篇文章給大家參考一下,希望大家閱讀完這篇文章后大有收獲,下面讓我們一起去了解一下吧!
什么是Provider?
angularjs文檔對(duì)provider的定義:
provider是一個(gè)帶有$get()
方法的對(duì)象。injector調(diào)用$get
方法創(chuàng)建一個(gè)新的service的實(shí)例。provider還有一些其他的方法,可以用來配置provider。
AngularJS使用$provide
注冊新的providers。providers基本上都會(huì)創(chuàng)建一個(gè)新實(shí)例, 但每個(gè)provider只創(chuàng)建一次。$provide
提供了6種方法創(chuàng)建自定義provider, 我會(huì)用簡單的代碼示例分別解釋他們。
6種方法如下:
constant
value
service
factory
decorator
provider
Constant
constant能被injected到任何地方。constant不能被decorator攔截, 意味著constant的值永遠(yuǎn)不能被改變。
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是一個(gè)簡單的可被注入的值,可以是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是一個(gè)可以注入的構(gòu)造函數(shù)。如果你想,你可以在函數(shù)中指定需要的依賴。
service是一個(gè)單例, 只被創(chuàng)建一次。services是一個(gè)很好的方式,用于控制器之間傳遞數(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是一個(gè)可注入的函數(shù)。
與service的相同點(diǎn):factory也是一個(gè)單例,也可以在此函數(shù)中指定依賴。
區(qū)別是:factory注入一個(gè)普通函數(shù),AngularJs將調(diào)用此函數(shù),而service注入一個(gè)構(gòu)造函數(shù)。
service是一個(gè)構(gòu)造函數(shù),要調(diào)用new創(chuàng)建一個(gè)新對(duì)象。而用factory,你可以讓這個(gè)函數(shù)返回你想要的任何東西。
你將會(huì)看到,factory是一個(gè)只有$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中最復(fù)雜的,可以有復(fù)雜的creation函數(shù)和配置選項(xiàng)。
provider實(shí)際是一個(gè)可配置的factory。 provider接受一個(gè)對(duì)象或構(gòu)造函數(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'); });
以上是AngularJS中Providers是什么的所有內(nèi)容,感謝各位的閱讀!相信大家都有了一定的了解,希望分享的內(nèi)容對(duì)大家有所幫助,如果還想學(xué)習(xí)更多知識(shí),歡迎關(guān)注億速云行業(yè)資訊頻道!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。