English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
module是angular中重要的模块组织方式,它提供了将一组内聚的业务组件(controller、service、filter、directive…)封装在一起的能力。这样做可以将代码按照业务领域问题分module的封装,然后利用module的依赖注入其关联的模块内容,使得我们能够更好的”分离关注点“,达到更好的”高内聚低耦合“。”高内聚低耦合“是来自面向对象设计原则。内聚是指模块或者对象内部的完整性,一组紧密联系的逻辑应该被封装在同一模块、对象等代码单元中,而不是分散在各处;耦合则指模块、对象等代码单元之间的依赖程度,如果一个模块的修改,会影响到另一个模块,则说明这两模块之间是相互依赖紧耦合的。
同时module也是我们angular代码的入口,首先需要声明module,然后才能定义angular中的其他组件元素,如controller、service、filter、directive、config代码块、run代码块等。
La definizione di module è: angular.module('com.ngbook.demo', []). La funzione module può passare 3 parametri, che sono rispettivamente:
Per il metodo angular.module, i modi comuni che usiamo ci sono, ovvero angular.module('com.ngbook.demo', [dipendenze opzionali]) e angular.module('com.ngbook.demo'). Si prega di prestare attenzione che sono due modi completamente diversi, uno è la dichiarazione e creazione del module, mentre l'altro è ottenere il module già dichiarato. Nell'applicazione, la dichiarazione del module dovrebbe essere una e unica; per ottenere il module, può esserci più di una volta. Si raccomanda di separare i componenti angular in file diversi, dichiarare il module nel file del module, e poi importare altri componenti moduli.需要注意的是在打包或者script方式引入的时候,我们需要首先加载module声明文件,然后才能加载其他组件模块。
Nella comunità cinese di angular, a volte si sente chiedere da alcuni compagni riguardo agli errori 'ng:areq':
[ng:areq] L'argomento 'DemoCtrl' non è una funzione, ricevuto undefined!
Questo spesso succede perché si dimentica di definire il controller o si dichiara più volte il module, la dichiarazione ripetuta del module può cancellare le informazioni di definizione del module precedente, quindi il programma non può trovare i componenti definiti. Questo possiamo anche sapere dal codice sorgente di angular (da 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 non è un nome valido {0}', context); } }; assertNotHasOwnProperty(name, 'module'); if (requires && modules.hasOwnProperty(name)) { modules[name] = null; } return ensure(modules, name, function() { if (!requires) { throw $injectorMinErr('nomod', "Il modulo '{0}' non è disponibile! Potrebbe esserci un errore di battitura " + "il nome del modulo o dimenticato di caricarlo. Se si registra un modulo assicurarsi che si " + "specificare le dipendenze come secondo argomento.\n nome); } 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; }; } }); }; }); }
Nel codice, possiamo conoscere che Angular, durante l'avvio, imposta l'oggetto globale Angular e poi pubblica l'API di module. Riguardo al codice dell'API di module, possiamo vedere chiaramente la prima istruzione, il nome del module non può essere chiamato hasOwnProperty, altrimenti verrà generato un errore di tipo "badname". Subito dopo, se viene passato il parametro name, significa che si dichiara il module, e le informazioni del module esistente verranno eliminate e impostate a null.
从moduleInstance的定义中,我们可以看出,angular.module为我们公开的API有:invokeQueue、runBlocks、requires、name、provider、factory、service、value、constant、animation、filter、controller、directive、config、run。其中invokeQueue和runBlocks是按名约定的私有属性,请不要随意使用,其他API都是我们常用的angular组件定义方法。从invokeLater代码中可以看到这类angular组件定义的返回依然是moduleInstance实例,这就形成了流畅API,推荐使用链式定义这些组件,而不是声明一个全局的module变量。
最后,如果传入了第三个参数configFn,则将其配置到config信息中。当angular进入config阶段时,它们将依次执行,进行对angular应用或angular组件如service等的实例化前的配置。
以上就是对Angular Module声明和获取重载的资料整理,后续将继续补充相关资料,感谢大家对本站的支持!
声明:本文内容来源于网络,版权归原作者所有。内容由互联网用户自发贡献并自行上传,本网站不拥有所有权,未进行人工编辑处理,也不承担相关法律责任。如果您发现涉嫌版权的内容,请发送邮件至:notice#oldtoolbag.com(发送邮件时,请将#更换为@)进行举报,并提供相关证据。一经查实,本站将立即删除涉嫌侵权内容。