angular学习（十四）——Module
为什么使用Module
大多数程序都有一个主方法，其他部分的模块都由这个主方法组织在一起。
AngularJS却没有所谓的main方法，而由module明确的声明app应该如何bootstrap。这样做有几个优点：
- 声明式的程序更容易理解
- 你可以打包代码后形成重用module
- module可以按任意顺序加载，甚至是并行。因为module是延迟执行的。
Module版的helloword
<div ng-app="myApp">来说明app需要从哪个module启动，angular.module('myApp', [])后面的数组可以添加需要依赖的其他module。
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8"/>
<title></title>
</head>
<script src="script/angular.min.js"></script>
<body ng-app="myApp">
<div ng-app="myApp">
<div>
{{ 'World' | greet }}
</div>
</div>
</body>
<script>
// 定义module
var myAppModule = angular.module('myApp', []);
// 配置module.
// 创建greeting过滤器
myAppModule.filter('greet', function () {
return function (name) {
return 'Hello, ' + name + '!';
};
});
</script>
</html>
推荐设置
上面只是一个简单的例子，并不是一个大规模的工程。但实际工作中，最好不要只写一个大模块，而是应该分成不同的小模块，如下：
- 每个功能一个module
- 每个可重用的组件作为一个module，特别是directive和filter
- 一个app级别的module，它依赖于上述模块并且有一些初始化的代码
<!DOCTYPE html>
<html>
<head>
<meta charset="uft-8"/>
<title></title>
</head>
<script src="script/angular.min.js"></script>
<body ng-app="xmpl">
<div ng-controller="XmplController">
{{ greeting }}
</div>
</body>
<script>
angular.module('xmpl.service', [])
.value('greeter', {
salutation: 'Hello',
localize: function(localization) {
this.salutation = localization.salutation;
},
greet: function(name) {
return this.salutation + ' ' + name + '!';
}
})
.value('user', {
load: function(name) {
this.name = name;
}
});
angular.module('xmpl.directive', []);
angular.module('xmpl.filter', []);
angular.module('xmpl', ['xmpl.service', 'xmpl.directive', 'xmpl.filter'])
.run(function(greeter, user) {
//可以看成是做初始化的主方法的一部分
greeter.localize({
salutation: 'Bonjour'
});
user.load('World');
})
.controller('XmplController', function($scope, greeter, user) {
$scope.greeting = greeter.greet(user.name);
});
</script>
</html>
Module的加载和依赖
module是配置块和运行块的集合，这些块被用于引导进程中。
简单的说，就是两个块的集合：
- 配置块 在provider的注册和配置阶段执行，只有provider和常量可以注入到配置块。这可以防止在service实例未完全初始化前就使用产生的错误。
- 运行块 在injector创建之后执行，被用于启动app。只有实例和常量可以注入到运行块。这可以放置在app运行阶段进行系统配置
angular.module('myModule', []).
config(function(injectables) { // provider注入
// 这是一个配置块
//
// 仅可以注入provider，不能注入实例
}).
run(function(injectables) { // 实例注入
// 这是一个运行块
//
// 仅可以注入实例不能注入provider
});
配置块
module有一些快捷方法可以等同于module的config块，如下：
angular.module('myModule', []).
value('a', 123).
factory('a', function() { return 123; }).
directive('directiveName', ...).
filter('filterName', ...);
// 相当于
angular.module('myModule', []).
config(function($provide, $compileProvider, $filterProvider) {
$provide.value('a', 123);
$provide.factory('a', function() { return 123; });
$compileProvider.directive('directiveName', ...);
$filterProvider.register('filterName', ...);
});
当启动时，AngularJS先执行常量定义，然后按注册顺序执行所有配置块。
运行块
运行块非常接近主方法，运行块是app的启动代码。运行块执行于所有的service被配置和injector创建之后。运行块中的代码很难进行单元测试，因此运行块常常有单独的模块执行，以便单元测试可以忽略这些代码。
依赖
module可以罗列其他module作为依赖项，依赖一个module意味着被需要的module先加载，这个module后加载。也就是说被需要的模块的配置块先运行，需要其他module的module的配置块后运行。运行块也一样。每个module只加载一次，不管所少module需要它。
异步加载
module是$injector配置管理的一种方式，和加载脚本到vm无关。有专门的项目来加载脚本到vm中。module与加载无关，它们可以按任意顺序加载。脚本加载器可以利用这一点对module进行并行加载。
创建vs检索
angular.module('myModule', [])将会创建一个名为myModule的模块，如果myModule已存在，那么将会重写,就是说重新创建了个新的。angular.module('myModule')只会检索已存在的模块。
var myModule = angular.module('myModule', []);
// 增加directives和services
myModule.service('myService', ...);
myModule.directive('myDirective', ...);
// 重新创建了module，之前添加的directives和services没有了
var myModule = angular.module('myModule', []);
// myOtherModule还未定义，所以会报错
var myModule = angular.module('myOtherModule');