Angular Module聲明和獲取重載實(shí)例代碼
module是angular中重要的模塊組織方式,它提供了將一組內(nèi)聚的業(yè)務(wù)組件(controller、service、filter、directive…)封裝在一起的能力。這樣做可以將代碼按照業(yè)務(wù)領(lǐng)域問題分module的封裝,然后利用module的依賴注入其關(guān)聯(lián)的模塊內(nèi)容,使得我們能夠更好的”分離關(guān)注點(diǎn)“,達(dá)到更好的”高內(nèi)聚低耦合“?!备邇?nèi)聚低耦合“是來自面向?qū)ο笤O(shè)計(jì)原則。內(nèi)聚是指模塊或者對象內(nèi)部的完整性,一組緊密聯(lián)系的邏輯應(yīng)該被封裝在同一模塊、對象等代碼單元中,而不是分散在各處;耦合則指模塊、對象等代碼單元之間的依賴程度,如果一個(gè)模塊的修改,會影響到另一個(gè)模塊,則說明這兩模塊之間是相互依賴緊耦合的。
同時(shí)module也是我們angular代碼的入口,首先需要聲明module,然后才能定義angular中的其他組件元素,如controller、service、filter、directive、config代碼塊、run代碼塊等。
關(guān)于module的定義為:angular.module(‘com.ngbook.demo', [])。關(guān)于module函數(shù)可以傳遞3個(gè)參數(shù),它們分別為:
- name:模塊定義的名稱,它應(yīng)該是一個(gè)唯一的必選參數(shù),它會在后邊被其他模塊注入或者是在ngAPP指令中聲明應(yīng)用程序主模塊;
- requires:模塊的依賴,它是聲明本模塊需要依賴的其他模塊的參數(shù)。特別注意:如果在這里沒有聲明模塊的依賴,則我們是無法在模塊中使用依賴模塊的任何組件的;它是個(gè)可選參數(shù)。
- configFn: 模塊的啟動配置函數(shù),在angular config階段會調(diào)用該函數(shù),對模塊中的組件進(jìn)行實(shí)例化對象實(shí)例之前的特定配置,如我們常見的對$routeProvider配置應(yīng)用程序的路由信息。它等同于”module.config“函數(shù),建議用”module.config“函數(shù)替換它。這也是個(gè)可選參數(shù)。
對于angular.module方法,我們常用的方式有有種,分別為angular.module(‘com.ngbook.demo', [可選依賴])和angular.module(‘com.ngbook.demo')。請注意它是完全不同的方式,一個(gè)是聲明創(chuàng)建module,而另外一個(gè)則是獲取已經(jīng)聲明了的module。在應(yīng)用程序中,對module的聲明應(yīng)該有且只有一次;對于獲取module,則可以有多次。推薦將angular組件獨(dú)立分離在不同的文件中,module文件中聲明module,其他組件則引入module,需要注意的是在打包或者script方式引入的時(shí)候,我們需要首先加載module聲明文件,然后才能加載其他組件模塊。
在angular中文社區(qū)群中,有時(shí)會聽見某些同學(xué)問關(guān)于”ng:areq“的錯(cuò)誤:
[ng:areq] Argument 'DemoCtrl' is not a function, got undefined!
這往往是因?yàn)橥浂xcontroller或者是聲明了多次module,多次聲明module會導(dǎo)致前邊的module定義信息被清空,所以程序就會找不到已定義的組件。這我們也能從angular源碼中了解到(來自loader.js):
function setupModuleLoader(window) {
...
function ensure(obj, name, factory) {
return obj[name] || (obj[name] = factory());
}
var angular = ensure(window, 'angular', Object);
return ensure(angular, 'module', function() {
var modules = {};
return function module(name, requires, configFn) {
var assertNotHasOwnProperty = function(name, context) {
if (name === 'hasOwnProperty') {
throw ngMinErr('badname', 'hasOwnProperty is not a valid {0} name', context);
}
};
assertNotHasOwnProperty(name, 'module');
if (requires && modules.hasOwnProperty(name)) {
modules[name] = null;
}
return ensure(modules, name, function() {
if (!requires) {
throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " +
"the module name or forgot to load it. If registering a module ensure that you " +
"specify the dependencies as the second argument.", name);
}
var invokeQueue = [];
var runBlocks = [];
var config = invokeLater('$injector', 'invoke');
var moduleInstance = {
_invokeQueue: invokeQueue,
_runBlocks: runBlocks,
requires: requires,
name: name,
provider: invokeLater('$provide', 'provider'),
factory: invokeLater('$provide', 'factory'),
service: invokeLater('$provide', 'service'),
value: invokeLater('$provide', 'value'),
constant: invokeLater('$provide', 'constant', 'unshift'),
animation: invokeLater('$animateProvider', 'register'),
filter: invokeLater('$filterProvider', 'register'),
controller: invokeLater('$controllerProvider', 'register'),
directive: invokeLater('$compileProvider', 'directive'),
config: config,
run: function(block) {
runBlocks.push(block);
return this;
}
};
if (configFn) {
config(configFn);
}
return moduleInstance;
function invokeLater(provider, method, insertMethod) {
return function() {
invokeQueue[insertMethod || 'push']([provider, method, arguments]);
return moduleInstance;
};
}
});
};
});
}
在代碼中,我們能了解到angular在啟動時(shí),會設(shè)置全局的angular對象,然后在angular對象上發(fā)布module這個(gè)API。關(guān)于module API代碼,能清晰的看見第一行謂語句,module名稱不能以hasOwnProperty命名,否則會拋出”badname“的錯(cuò)誤信息。緊接著,如果傳入了name參數(shù),其表示是聲明module,則會刪除已有的module信息,將其置為null。
從moduleInstance的定義,我們能夠看出,angular.module為我們公開的API有:invokeQueue、runBlocks、requires、name、provider、factory、servic、value、constant、animation、filter、controller、directive、config、run。其中invokeQueue和runBlocks是按名約定的私有屬性,請不要隨意使用,其他API都是我們常用的angular組件定義方法,從invokeLater代碼中能看到這類angular組件定義的返回依然是moduleInstance實(shí)例,這就形成了流暢API,推薦使用鏈?zhǔn)蕉x這些組件,而不是聲明一個(gè)全局的module變量。
最后,如果傳入了第三個(gè)參數(shù)configFn,則會將它配置到config信息中,當(dāng)angular進(jìn)入config階段時(shí),它們將會依次執(zhí)行,進(jìn)行對angular應(yīng)用或者angular組件如service等的實(shí)例化前的配置。
以上就是對Angular Module聲明和獲取重載的資料整理,后續(xù)繼續(xù)補(bǔ)充相關(guān)資料,謝謝大家對本站的支持!
- Angular 理解module和injector,即依賴注入
- AngularJs Modules詳解及示例代碼
- 深入淺析AngularJS中的module(模塊)
- 詳解AngularJS中module模塊的導(dǎo)入導(dǎo)出
- AngularJS Module方法詳解
- Angular ng-repeat 對象和數(shù)組遍歷實(shí)例
- 基于AngularJS實(shí)現(xiàn)iOS8自帶的計(jì)算器
- 微信+angularJS的SPA應(yīng)用中用router進(jìn)行頁面跳轉(zhuǎn),jssdk校驗(yàn)失敗問題解決
- AngularJS 實(shí)現(xiàn)JavaScript 動畫效果詳解
- 深入理解AngularJS中的ng-bind-html指令和$sce服務(wù)
相關(guān)文章
angularjs使用gulp-uglify壓縮后執(zhí)行報(bào)錯(cuò)的解決方法
下面小編就為大家分享一篇angularjs使用gulp-uglify壓縮后執(zhí)行報(bào)錯(cuò)的解決方法,具有很好的參考價(jià)值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-03-03
AngularJS常見過濾器用法實(shí)例總結(jié)
這篇文章主要介紹了AngularJS常見過濾器用法,結(jié)合實(shí)例形式總結(jié)分析了AngularJS大小寫過濾器、貨幣過濾器、日期過濾器、limitTo過濾器、orderBy過濾器及自定義過濾器使用方法,需要的朋友可以參考下2017-07-07
實(shí)踐中學(xué)習(xí)AngularJS表單
表單是最常用的一種組建。在Angular.js中,其實(shí)并沒有單獨(dú)的為表單添加多少特殊功能。但是,利用Angular.js框架本身的特點(diǎn),可以更友好的呈現(xiàn)表單。下面將介紹幾種常用的功能在Angular中是如何巧妙實(shí)現(xiàn)的2016-03-03
Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購物車功能示例
這篇文章主要介紹了Angular實(shí)現(xiàn)可刪除并計(jì)算總金額的購物車功能,涉及AngularJS事件響應(yīng)、元素遍歷與數(shù)值運(yùn)算等相關(guān)操作技巧,需要的朋友可以參考下2017-12-12
基于angular實(shí)現(xiàn)三級聯(lián)動的生日插件
這篇文章主要為大家詳細(xì)介紹了基于angular實(shí)現(xiàn)三級聯(lián)動的生日插件,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
詳解Angular組件數(shù)據(jù)不能實(shí)時(shí)更新到視圖上的問題
這篇文章主要為大家介紹了Angular組件數(shù)據(jù)不能實(shí)時(shí)更新到視圖上的問題詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10

