【angularJS】定义模块angular.module

模块定义了一个应用程序。控制器通常属于一个模块。

JavaScript 中应避免使用全局函数。因为他们很容易被其他脚本文件覆盖。

AngularJS 模块让所有函数的作用域在该模块下，避免了该问题。

简单的定义一个Angular模块（module）

var app = angular.module("myApp", []);

这种方法带有两个参数，一个是模板名，一个是依赖注入列表【该模块所依赖的模块】，数组为空，表示当前注册的模板不需要依赖关系。

如果依赖不为空，则要保证其依赖的模块已经加载。这里面就有个加载顺序的问题。

最简单的情况下，我把使用模块所在的JS文件全部按顺序列在HTML的script元素中，只要保证模块之间的依赖关系正确即可，如：

<script src="/scripts/myApp.js"></script>

<script src="/scripts/app.js"></script>

如果app.js中的模块依赖模块myApp，则需先将定义它的myApp.js加载进来。在项目实践中，这种方法显然是不实际的，你不能在一开始把所有的JS文件全部加载进来。

通常会使用一些延迟/异步加载机制，如使用RequireJS。

使用RequireJS定义的Angular模块可以是这样：

define(['angular'], function(angular) {

angular.module('myApp', [])

.controller('MyController', ['$scope', function ($scope) {

//define scope data

}]);

});

其中define函数加载了angular.js，并取得angular模块，然后定义了myApp模块。

如果myApp模块（或者MyController）依赖于其他模块（或组件），则需要告诉RequireJS在需要的时候加载：

define(['angular', './scripts/anotherApp', './scripts/service/utility' ], function(angular) { //上面加载了3个js文件

angular.module('myApp', ['newApp']) //定义的myAPP模块需要依赖newApp模块（此模块所在的js文件需要引进来）

.controller('MyController', ['$scope', 'utils', function ($scope, utils) { //'MyController'依赖的一些组件scope等

//define scope data

}]);

});

这里，myApp依赖定义于anotherApp.js的newApp模块，并且需要定义于utility.js的工厂服务utils。这里存在的一个陷阱是，依赖的两个JS文件不一定会按照代码中声明的顺序加载，即utility.js可能先于anotherApp.js加载。因此在使用requireJS加载依赖时，要注意这些依赖本身之间的相互关系，不能指望requires按某种顺序加载这些依赖。否则，会导致一些概率性出现的问题，不易调试。

另外一点，如果在首次定义模块A时使用了空数组作为依赖，然后在某次使用A模块的过程中，误将依赖数组又传递一次，那么A模块原来的定义就会被覆盖，并且原来A模块定义的controller，service等组件也将不存在，这样也会导致难以调试的问题。因此在定义和使用Angular模块时不能大意。