angularJS Provider、factory、service詳解及實(shí)例代碼
factory
用 Factory 就是創(chuàng)建一個(gè)對(duì)象,為它添加屬性,然后把這個(gè)對(duì)象返回出來(lái)。你把 service 傳進(jìn) controller 之后,在 controller 里這個(gè)對(duì)象里的屬性就可以通過(guò) factory 使用了。
app.controller('myFactoryCtrl', function($scope, myFactory){ $scope.artist = myFactory.getArtis(); }); app.factory('myFactory', function(){ var _artist = ''; var service = {}; service.getArtist = function(){ return _artist; } return service; });
service
Service 是用"new"關(guān)鍵字實(shí)例化的。因此,你應(yīng)該給"this"添加屬性,然后 service 返回"this"。你把 service 傳進(jìn) controller 之后,在controller里 "this" 上的屬性就可以通過(guò) service 來(lái)使用了。
app.controller('myFactoryCtrl', function($scope, myService){ $scope.artist = myService.getArtis(); }); app.service('myService', function(){ var _artist =''; this.getArtist = function(){ return _artist; } });
provider
Providers 是唯一一種你可以傳進(jìn) .config() 函數(shù)的 service。當(dāng)你想要在 service 對(duì)象啟用之前,先進(jìn)行模塊范圍的配置,那就應(yīng)該用 provider。
app.controller('myProviderCtrl', function($scope, myProvider){ $scope.artist = myProvider.getArtist(); $scope.data.thingFromConfig = myProvider.thingOnConfig; }); app.provider('myProvider', function(){ this._artist = ''; this.thingFromConfig = ''; this.$get = function(){ var that = this; return { getArtist: function(){ return that._artist; }, thingOnConfig: that.thingFromConfig } } }); app.config(function(myProviderProvider){ myProviderProvider.thingFromConfig = 'This was set in config()'; });
value和constant
$provide.value('myValue', 10); $provide.constant('myConstant', 10); /* 二者的區(qū)別: 1. value可以被修改,constant一旦聲明就無(wú)法修改 2. value不可以在config中注入,constant可以。 */
provider、factory、service三者的關(guān)系
app.provider('myDate', { $get: function() { return new Date(); } }); //可以寫成 app.factory('myDate', function(){ return new Date(); }); //可以寫成 app.service('myDate', Date);
總結(jié)
- 所有的供應(yīng)商都只被實(shí)例化一次,也就說(shuō)他們都是單例的
- 除了constant,所有的供應(yīng)商都可以被裝飾器(decorator)裝飾
- value就是一個(gè)簡(jiǎn)單的可注入的值
- service是一個(gè)可注入的構(gòu)造器
- factory是一個(gè)可注入的方法
- decorator可以修改或封裝其他的供應(yīng)商,當(dāng)然除了constant
- provider是一個(gè)可配置的factory
以上就是對(duì)angularJS Provider、factory、service的資料整理,后續(xù)繼續(xù)補(bǔ)充相關(guān)資料,謝謝大家對(duì)本站的支持!
相關(guān)文章
angularjs實(shí)現(xiàn)天氣預(yù)報(bào)功能
這篇文章主要為大家詳細(xì)介紹了angularjs實(shí)現(xiàn)天氣預(yù)報(bào)功能,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-10-10AngularJS基礎(chǔ) ng-show 指令簡(jiǎn)單示例
本文主要介紹AngularJS ng-show 指令,這里對(duì)ng-show 指令的基礎(chǔ)知識(shí)做了詳細(xì)介紹,并附有代碼示例,希望能幫助學(xué)習(xí)AngularJS的同學(xué)2016-08-08Angular 4依賴注入學(xué)習(xí)教程之組件服務(wù)注入(二)
大家都知道依賴注入式AngularJS的重要特性之一,之前我們已經(jīng)介紹了關(guān)于Angular 4依賴注入基礎(chǔ)的內(nèi)容,下面這篇文章主要給大家介紹了關(guān)于Angular 4依賴注入之組件服務(wù)注入的相關(guān)資料,需要的朋友可以參考借鑒,下面來(lái)一起看看吧。2017-06-06AngularJS折疊菜單實(shí)現(xiàn)方法示例
這篇文章主要介紹了AngularJS折疊菜單實(shí)現(xiàn)方法,結(jié)合完整實(shí)例形式分析了AngularJS實(shí)現(xiàn)折疊菜單的具體步驟與相關(guān)操作技巧,需要的朋友可以參考下2017-05-05ionic3實(shí)戰(zhàn)教程之隨機(jī)布局瀑布流的實(shí)現(xiàn)方法
這篇文章主要給大家介紹了關(guān)于ionic3實(shí)戰(zhàn)教程之隨機(jī)布局瀑布流的實(shí)現(xiàn)方法,文中通過(guò)示例代碼和圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧。2017-12-12Angularjs中的驗(yàn)證input輸入框只能輸入數(shù)字和小數(shù)點(diǎn)的寫法(推薦)
這篇文章主要介紹了Angularjs中的驗(yàn)證input輸入框只能輸入數(shù)字和小數(shù)點(diǎn)的寫法,需要的朋友可以參考下2017-08-08Angular實(shí)現(xiàn)防抖和節(jié)流的示例代碼
這篇博客主要是詳細(xì)介紹兩種常用Angular實(shí)現(xiàn)防抖和節(jié)流的方法:使用RxJS操作符和使用Angular自帶的工具,文中通過(guò)代碼示例給大家講解的非常詳細(xì),需要的朋友可以參考下2024-02-02Angular實(shí)現(xiàn)的table表格排序功能完整示例
這篇文章主要介紹了Angular實(shí)現(xiàn)的table表格排序功能,結(jié)合完整實(shí)例形式分析了AngularJS表格排序所涉及的事件響應(yīng)、元素遍歷、屬性修改等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12Angular應(yīng)用Bootstrap過(guò)程步驟邏輯詳解
這篇文章主要為大家介紹了Angular應(yīng)用Bootstrap過(guò)程步驟邏輯詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-07-07