<table class="html5">
<tr class="li1"><td class="ln"><pre class="de1">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
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133 方法是，将一个些通用的低级开发操作包装起来提供给开发者。AngularJS会自动处理好这些低级操作。它们包括： 1.DOM操作 2.设置事件的监听 3.输入验证，因为AngularJS会处理大部分这些操作，所以开发者就能更多的专注在应用的业务逻辑上，更少地编写那些重复性的、易错的、低级的代码。 在AngularJS简化开发的同时，它也为客户端带来了一些精巧的技术，它们包括： 1.数据、业务逻辑、视图的分离 2.数据和视图的自动绑定 3.通用服务 4.依赖注入（主要用于聚合服务） 5.可扩展的HTML编译器(完全由JavaScript编写) 6.易于测试 7.客户端对这些技术的需求其实已经存在很久了。 同时，你还可以用AngularJS来开发单页或者多页的应用，不过其主要还是用来开发单页的。 AngularJS支持浏览器的历史操作，向前，向后按钮，单页应用中的收藏操作。 接下来，我们来详细讲解angularJS的模块。 大部分应用都有一个主方法用来实例化、组织、启动应用。AngularJS应用没有主方法，而是使用模块来声明应用应该如何启动。这种方式有以下几个优点： 1.启动过程是声明式的，所以更容易懂。 2.在单元测试是不需要加载全部模块的，因此这种方式有助于写单元测试。 3.可以在特定情况的测试中增加额外的模块，这些模块能更改配置，能帮助进行端对端的测试。 4.第三方代码可以打包成可重用的模块。 5.模块可以以任何先后或者并行的顺序加载（因为模块的执行本身是延迟的）。 举个例子： ng-app> > ><> > var myAppModule = angular.module('myApp',[]); // configure the module. // in this example we will create a greeting filter myAppModule.filter('greet',function() { return function(name) { return 'Hello,' + name + '!'; }; }); > > > > {{ 'World' | greet }} > > > 上面的例子，我们是通过在 ng-app>中进行指定，来实现使用myApp这个模块启动应用的。 以上这个例子写法很简单，但是不适合用同样的写法来写大型应用。我们推荐是将你的应用拆分成以下几个模块： 1.一个服务模块，用来做服务的声明。 2.一个指令模块，用来做指令的声明。 3.一个过滤器模块，用来做过滤器声明。 4.一个依赖以上模块的应用级模块，它包含初始化代码。 举个例子： ng-app> > ><> ><> > > ng-controller> {{ greeting }}! > > > [/code] script.js: [code] angular.module('xmpl.service',[]). //服务模块 value('greeter',{ //自定义greeter对象 salutation: 'Hello', localize: function(localization) { this.salutation = localization.salutation; }, greet: function(name) { return this.salutation + ' ' + name + '!'; } }). value('user',{ //自定义user对象 load: function(name) { this.name = name; } }); angular.module('xmpl.directive',[]); //指令模块 angular.module('xmpl.filter',[]); //过滤器模块 angular.module('xmpl',['xmpl.service','xmpl.directive','xmpl.filter']). //模块xmpl依赖于数组中的模块 run(function(greeter,user) { // 初始化代码，应用启动时，会自动执行 greeter.localize({ salutation: 'Bonjour' }); user.load('World'); }) // A Controller for your app var XmplController = function($scope,greeter,user) { $scope.greeting = greeter.greet(user.name); } 这样拆分的原因是，在你的测试中常常需要忽略掉初始化代码，因为这些代码比较难测试。通过把它拆分出来就能在测试中方便地忽视掉它。通过只加载和当前测试相关的模块，也能使测试更专一。以上只是一个建议，你可以放心根据你的具体情况来调整。 一个模块就是一系列配置和代码块的集合，它们是在启动阶段就附加到应用上的。一个最简单的模块由两类代码块集合组成的： 配置代码块 - 在注入提供者注入和配置阶段执行。只有注入提供者和常量可以被注入到配置块中。这是为了防止服务在被配置好之前就被提前初始化。 运行代码块 - 在注入器被创建后执行，被用来启动应用的。只有实例和常量能被注入到运行块中。这是为了防止在运行后还出现对系统的配置。 代码实现： angular.module('myModule',[]). config(function(injectables) { // provider-injector 配置代码块 // This is an example of config block. // You can have as many of these as you want. // You can only inject Providers (not instances) // into the config blocks. }). run(function(injectables) { // instance-injector 运行代码块 // This is an example of a run block. // You can have as many of these as you want. // You can only inject instances (not Providers) // into the run blocks }); 模块还有一些配置的简便方法，使用它们的效果等同于使用代码块。举个例子： angular.module('myModule',[]). value('a',123). factory('a',function() { return 123; }). directive('directiveName',...). filter('filterName',...); // is same as 等同于以下 angular.module('myModule',[]). config(function($provide,$compileProvider,$filterProvider) { $provide.value('a',123) $provide.factory('a',function() { return 123; }) $compileProvider.directive('directiveName',...). $filterProvider.register('filterName',...); }); 配置块会按照$provide,$filterProvider，注册的顺序，依次被应用。唯一的例外是对常量的定义，它们应该始终放在配置块的开始处。 运行块是AngularJS中最像主方法的东西。一个运行块就是一段用来启动应用的代码。它在所有服务都被配置和所有的注入器都被创建后执行。运行块通常包含了一些难以测试的代码，所以它们应该写在单独的模块里，这样在单元测试时就可以忽略它们了。 模块可以把其他模块列为它的依赖。“依赖某个模块”意味着需要把这个被依赖的模块在本块模块之前被加载。换句话说被依赖模块的配置块会在本模块配置块前被执行。运行块也是一样。任何一个模块都只能被加载一次，即使它被多个模块依赖。 模块是一种用来管理$injector配置的方法，和脚本的加载没有关系。现在网上已有很多控制模块加载的库，它们可以和AngularJS配合使用。因为在加载期间模块不做任何事情，所以它们可以以任意顺序或者并行方式加载 原文链接：https://www.f2er.com/note/422398.html
