angular学习(十四)——Module


你可以把Module当作是个容器,里面包含了controllers, services, filters, directives。

为什么使用Module

大多数程序都有一个主方法,其他部分的模块都由这个主方法组织在一起。

AngularJS却没有所谓的main方法,而由module明确的声明app应该如何bootstrap。这样做有几个优点:

  • 声明式的程序更容易理解
  • 你可以打包代码后形成重用module
  • module可以按任意顺序加载,甚至是并行。因为module是延迟执行的。

Module版的helloword

<div ng-app="myApp">来说明app需要从哪个module启动,angular.module('myApp', [])后面的数组可以添加需要依赖的其他module。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<!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,它依赖于上述模块并且有一些初始化的代码
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!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运行阶段进行系统配置
1
2
3
4
5
6
7
8
9
10
11
angular.module('myModule', []).
config(function(injectables) { // provider注入
// 这是一个配置块
//
// 仅可以注入provider,不能注入实例
}).
run(function(injectables) { // 实例注入
// 这是一个运行块
//
// 仅可以注入实例不能注入provider
});

配置块

module有一些快捷方法可以等同于module的config块,如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
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')只会检索已存在的模块。

1
2
3
4
5
6
7
8
9
10
11
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');
文章目录
  1. 1. 为什么使用Module
  2. 2. Module版的helloword
  3. 3. 推荐设置
  4. 4. Module的加载和依赖
  5. 5. 配置块
  6. 6. 运行块
  7. 7. 依赖
  8. 8. 异步加载
  9. 9. 创建vs检索
|