module是angular中重要的模块组织方式，它提供了将一组内聚的业务组件（controller、service、filter、directive…）封装在一起的能力。这样做可以将代码按照业务领域问题分module的封装，然后利用module的依赖注入其关联的模块内容，使得我们能够更好的”分离关注点“，达到更好的”高内聚低耦合“。”高内聚低耦合“是来自面向对象设计原则。内聚是指模块或者对象内部的完整性，一组紧密联系的逻辑应该被封装在同一模块、对象等代码单元中，而不是分散在各处；耦合则指模块、对象等代码单元之间的依赖程度，如果一个模块的修改，会影响到另一个模块，则说明这两模块之间是相互依赖紧耦合的。
同时module也是我们angular代码的入口，首先需要声明module，然后才能定义angular中的其他组件元素，如controller、service、filter、directive、config代码块、run代码块等。
关于module的定义为：angular.module(‘com.ngbook.demo', [])。关于module函数可以传递3个参数，它们分别为：
对于angular.module方法，我们常用的方式有有种，分别为angular.module(‘com.ngbook.demo', [可选依赖])和angular.module(‘com.ngbook.demo')。请注意它是完全不同的方式，一个是声明创建module，而另外一个则是获取已经声明了的module。在应用程序中，对module的声明应该有且只有一次；对于获取module，则可以有多次。推荐将angular组件独立分离在不同的文件中，module文件中声明module，其他组件则引入module，需要注意的是在打包或者script方式引入的时候，我们需要首先加载module声明文件，然后才能加载其他组件模块。
在angular中文社区群中，有时会听见某些同学问关于”ng:areq“的错误：
[ng:areq] argument 'democtrl' is not a function, got undefined！
这往往是因为忘记定义controller或者是声明了多次module，多次声明module会导致前边的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在启动时，会设置全局的angular对象，然后在angular对象上发布module这个api。关于module api代码，能清晰的看见第一行谓语句，module名称不能以hasownproperty命名，否则会抛出”badname“的错误信息。紧接着，如果传入了name参数，其表示是声明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实例，这就形成了流畅api，推荐使用链式定义这些组件，而不是声明一个全局的module变量。
最后，如果传入了第三个参数configfn，则会将它配置到config信息中，当angular进入config阶段时，它们将会依次执行，进行对angular应用或者angular组件如service等的实例化前的配置。
以上就是对angular module声明和获取重载的资料整理，后续继续补充相关资料，谢谢大家对本站的支持！
如对本文有疑问， 点击进行留言回复！！
解决三元运算符 报错“SyntaxError: can''t assign to conditional expression”
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
使用 Angular RouteReuseStrategy 缓存（路由）组件的实例代码
分享Angular http interceptors 拦截器使用(推荐)
网友评论