AngularJs Managing Service Dependencies詳解
angular允許service將其他service聲明為依賴,使用在自身實(shí)例化時(shí)使用的構(gòu)造函數(shù)中。
為了聲明依賴,我們需要在工廠方法聲明中指定它們,并且在工廠方法中通過$inject屬性(字符串標(biāo)識(shí)數(shù)組)或者使用array notation。
通常$inject屬性聲明可以被丟棄(即http://www.dbjr.com.cn/article/91815.htm中提到的隱式依賴注入,但這個(gè)是實(shí)驗(yàn)屬性,在而且在壓縮混淆后會(huì)失效,慎用?。?。
使用array notation
function myModuleCfgFn ($provide) { $provide.factory(‘myService',[‘dep1','dep2',function(dep1,dep2){}]); }
使用$inject屬性
function myModuleCfgFn($provide) { var myServiceFactory = function(dep1, dep2) {}; myServiceFactory.$inject = ['dep1', 'dep2']; $provide.factory('myService', myServiceFactory); }
使用隱式DI(不兼容壓縮混淆的代碼)
function myModuleCfgFn($provide) { $provide.factory('myService', function(dep1, dep2) {}); }
下面有一個(gè)例子,里面有兩個(gè)service,它們之間存在依賴關(guān)系,以及其他一些angular提供的service。
/** * batchLog service 允許消息在內(nèi)存中形成隊(duì)列,50秒flush一次。 * * @param {*} message Message to be logged. */ function batchLogModule($provide){ $provide.factory('batchLog', ['$timeout', '$log', function($timeout, $log) { var messageQueue = []; function log() { if (messageQueue.length) { $log('batchLog messages: ', messageQueue); messageQueue = []; } $timeout(log, 50000); } log(); return function(message) { messageQueue.push(message); } }]); /** * routeTemplateMonitor監(jiān)控每一個(gè)route的變化,每個(gè)比阿奴啊都會(huì)通過batchLog service記錄下來 */ $provide.factory('routeTemplateMonitor', ['$route', 'batchLog', '$rootScope', function($route, batchLog, $rootScope) { $rootScope.$on('$routeChangeSuccess', function() { batchLog($route.current ? $route.current.template : null); }); }]); } // 獲得主service,運(yùn)行應(yīng)用(監(jiān)聽事件) angular.injector([batchLogModule]).get('routeTemplateMonitor');
例子中需要注意的事項(xiàng):
- batchLog service依賴angular內(nèi)置的$timeout(http://docs.angularjs.org/api/ng.$timeout)與$log services(http://docs.angularjs.org/api/ng.$log),實(shí)現(xiàn)通過console.log批量log消息。
- routeTemplateMonitor service依賴內(nèi)置的$route(http://docs.angularjs.org/api/ng.$route) service與我們自定義的batchLog service。
- 我們兩個(gè)service都使用工廠方法簽名以及array notation來注釋inject,聲明它們的依賴。array中的字符串標(biāo)識(shí)的順序與工廠方法簽名(參數(shù))中的順序必須一致,這十分重要。除非在工廠方法參數(shù)中使用隱式依賴聲明,否則,injector將根據(jù)array中字符串的順序決定inject哪一個(gè)服務(wù)。
以上就是關(guān)于AngularJs Managing Service Dependencies 資料的整理,后續(xù)繼續(xù)添加相關(guān)資料,謝謝大家對(duì)本站的支持!
- AngularJS 面試題集錦
- AngularJS $on、$emit和$broadcast的使用
- AngularJS實(shí)現(xiàn)標(biāo)簽頁(yè)的兩種方式
- angularjs實(shí)現(xiàn)文字上下無縫滾動(dòng)特效代碼
- AngularJs unit-testing(單元測(cè)試)詳解
- AngularJs Creating Services詳解及示例代碼
- AngularJs Using $location詳解及示例代碼
- AngularJs Understanding Angular Templates
- AngularJs E2E Testing 詳解
- AngularJs Understanding the Controller Component
- AngularJs Understanding the Model Component
- AngularJs Dependency Injection(DI,依賴注入)
- AngularGauge 屬性解析詳解
相關(guān)文章
淺談angular4 ng-content 中隱藏的內(nèi)容
本篇文章主要介紹了淺談angular4 ng-content 中隱藏的內(nèi)容,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2017-08-08Angular5整合富文本編輯器TinyMCE的方法(漢化+上傳)
TinyMCE是一個(gè)輕量級(jí)的富文本編輯器,相對(duì)于CK編輯器更加精簡(jiǎn),但必須滿足絕大部分場(chǎng)景的需要。這篇文章主要介紹了Angular5整合富文本編輯器TinyMCE(漢化+上傳)的相關(guān)知識(shí),需要的朋友可以參考下2020-05-05Angularjs中ng-repeat-start與ng-repeat-end的用法實(shí)例介紹
這篇文章主要給大家介紹了Angularjs中ng-repeat-start與ng-repeat-end的用法,文章開始先進(jìn)行了簡(jiǎn)單的介紹,而后通過完整的實(shí)例代碼詳細(xì)給大家介紹這兩者的用法,有需要的朋友們可以參考借鑒,下面來一起看看吧。2016-12-12詳解Angular的數(shù)據(jù)顯示優(yōu)化處理
本文主要對(duì)Angular的數(shù)據(jù)顯示優(yōu)化處理進(jìn)行詳細(xì)介紹,具有一定的參考價(jià)值,下面跟著小編一起來看下吧2016-12-12Angular在一個(gè)頁(yè)面中使用兩個(gè)ng-app的方法
這篇文章主要介紹了Angular在一個(gè)頁(yè)面中使用兩個(gè)ng-app的方法,非常不錯(cuò),具有參考借鑒價(jià)值,需要的朋友可以參考下2017-02-02詳解Webstorm 下的Angular2.0開發(fā)之路(圖文)
這篇文章主要介紹了詳解Webstorm 下的Angular2.0開發(fā)之路(圖文) ,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2018-12-12AngularJS自定義過濾器用法經(jīng)典實(shí)例總結(jié)
這篇文章主要介紹了AngularJS自定義過濾器用法,結(jié)合實(shí)例形式總結(jié)分析了AngularJS自定義過濾器進(jìn)行包含、替換、篩選、過濾、排序等操作相關(guān)實(shí)現(xiàn)技巧與注意事項(xiàng),需要的朋友可以參考下2018-05-05