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