【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模塊時不能大意。