【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模块时不能大意。