AngularJs Managing Service Dependencies詳解
angular允許service將其他service聲明為依賴,使用在自身實(shí)例化時(shí)使用的構(gòu)造函數(shù)中。
為了聲明依賴,我們需要在工廠方法聲明中指定它們,并且在工廠方法中通過$inject屬性(字符串標(biāo)識(shí)數(shù)組)或者使用array notation。
通常$inject屬性聲明可以被丟棄(即http://www.dhdzp.com/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)簽頁的兩種方式
- 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)文章
對(duì)angularJs中自定義指令replace的屬性詳解
今天小編就為大家分享一篇對(duì)angularJs中自定義指令replace的屬性詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-10-10
淺談angular.js中實(shí)現(xiàn)雙向綁定的方法$watch $digest $apply
Angular用戶都想知道數(shù)據(jù)綁定是怎么實(shí)現(xiàn)的。你可能會(huì)看到各種各樣的詞匯:$watch,$apply,$digest它們是如何工作的呢?這里我想回答這些問題,其實(shí)它們?cè)诠俜降奈臋n里都已經(jīng)回答了,但是我還是想把它們結(jié)合在一起來講2015-10-10
AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法
這篇文章主要介紹了AngularJS實(shí)現(xiàn)動(dòng)態(tài)編譯添加到dom中的方法,結(jié)合實(shí)例形式分析了AngularJS動(dòng)態(tài)編輯構(gòu)建模板的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11
Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件詳解
這篇文章主要給大家介紹了關(guān)于Angular 2父子組件數(shù)據(jù)傳遞之@ViewChild獲取子組件的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家具有一定參考學(xué)習(xí)價(jià)值,需要的朋友們下面來一起看看吧。2017-07-07
基于?angular?material?theming?機(jī)制修改?mat-toolbar?的背景色(示例詳解
最近在學(xué)習(xí)?angular,記錄一下昨天的進(jìn)展,解決的問題是通過?theme?的配置修改?mat-toolbar?的背景色,避免對(duì)色彩的硬編碼,這篇文章主要介紹了基于?angular?material?theming?機(jī)制修改?mat-toolbar?的背景色,需要的朋友可以參考下2022-10-10

