Angular Module聲明和擷取重載執行個體代碼_AngularJS

module是angular中重要的模組組織方式，它提供了將一組內聚的業務組件（controller、service、filter、directive…）封裝在一起的能力。這樣做可以將代碼按照業務領域問題分module的封裝，然後利用module的依賴注入其關聯的模組內容，使得我們能夠更好的”分離關注點“，達到更好的”高內聚低耦合“。”高內聚低耦合“是來自物件導向設計原則。內聚是指模組或者對象內部的完整性，一組緊密聯絡的邏輯應該被封裝在同一模組、對象等代碼單元中，而不是分散在各處；耦合則指模組、對象等代碼單元之間的依賴程度，如果一個模組的修改，會影響到另一個模組，則說明這兩模組之間是相互依賴緊耦合的。

同時module也是我們angular代碼的入口，首先需要聲明module，然後才能定義angular中的其他組件元素，如controller、service、filter、directive、config代碼塊、run代碼塊等。

關於module的定義為：angular.module(‘com.ngbook.demo', [])。關於module函數可以傳遞3個參數，它們分別為：

1. name：模組定義的名稱，它應該是一個唯一的必選參數，它會在後邊被其他模組注入或者是在ngAPP指令中聲明應用程式主模組；
2. requires：模組的依賴，它是聲明本模組需要依賴的其他模組的參數。特別注意：如果在這裡沒有聲明模組的依賴，則我們是無法在模組中使用相依模組的任何組件的；它是個選擇性參數。
3. configFn： 模組的啟動配置函數，在angular config階段會調用該函數，對模組中的組件進行執行個體化對象執行個體之前的特定配置，如我們常見的對$routeProvider配置應用程式的路由資訊。它等同於”module.config“函數，建議用”module.config“函數替換它。這也是個選擇性參數。
   

對於angular.module方法，我們常用的方式有有種，分別為angular.module(‘com.ngbook.demo', [可選依賴])和angular.module(‘com.ngbook.demo')。請注意它是完全不同的方式，一個是聲明建立module，而另外一個則是擷取已經聲明了的module。在應用程式中，對module的聲明應該有且只有一次；對於擷取module，則可以有多次。推薦將angular組件獨立分離在不同的檔案中，module檔案中聲明module，其他組件則引入module，需要注意的是在打包或者script方式引入的時候，我們需要首先載入module聲明檔案，然後才能載入其他組件模組。

在angular中文社區群中，有時會聽見某些同學問關於”ng:areq“的錯誤：

 [ng:areq] Argument 'DemoCtrl' is not a function, got undefined！

這往往是因為忘記定義controller或者是聲明了多次module，多次聲明module會導致前邊的module定義資訊被清空，所以程式就會找不到已定義的組件。這我們也能從angular源碼中瞭解到（來自loader.js）：

function setupModuleLoader(window) {      ...      function ensure(obj, name, factory) {        return obj[name] || (obj[name] = factory());      }      var angular = ensure(window, 'angular', Object);      return ensure(angular, 'module', function() {        var modules = {};        return function module(name, requires, configFn) {          var assertNotHasOwnProperty = function(name, context) {            if (name === 'hasOwnProperty') {              throw ngMinErr('badname', 'hasOwnProperty is not a valid {0} name', context);            }          };          assertNotHasOwnProperty(name, 'module');          if (requires && modules.hasOwnProperty(name)) {            modules[name] = null;          }          return ensure(modules, name, function() {            if (!requires) {              throw $injectorMinErr('nomod', "Module '{0}' is not available! You either misspelled " +                "the module name or forgot to load it. If registering a module ensure that you " +                "specify the dependencies as the second argument.", name);            }            var invokeQueue = [];            var runBlocks = [];            var config = invokeLater('$injector', 'invoke');            var moduleInstance = {              _invokeQueue: invokeQueue,              _runBlocks: runBlocks,              requires: requires,              name: name,              provider: invokeLater('$provide', 'provider'),              factory: invokeLater('$provide', 'factory'),              service: invokeLater('$provide', 'service'),              value: invokeLater('$provide', 'value'),              constant: invokeLater('$provide', 'constant', 'unshift'),              animation: invokeLater('$animateProvider', 'register'),              filter: invokeLater('$filterProvider', 'register'),              controller: invokeLater('$controllerProvider', 'register'),              directive: invokeLater('$compileProvider', 'directive'),              config: config,              run: function(block) {                runBlocks.push(block);                return this;              }            };            if (configFn) {              config(configFn);            }            return moduleInstance;            function invokeLater(provider, method, insertMethod) {              return function() {                invokeQueue[insertMethod || 'push']([provider, method, arguments]);                return moduleInstance;              };            }          });        };      });    }

在代碼中，我們能瞭解到angular在啟動時，會設定全域的angular對象，然後在angular對象上發布module這個API。關於module API代碼，能清晰的看見第一行謂語句，module名稱不能以hasOwnProperty命名，否則會拋出”badname“的錯誤資訊。緊接著，如果傳入了name參數，其表示是聲明module，則會刪除已有的module資訊，將其置為null。

從moduleInstance的定義，我們能夠看出，angular.module為我們公開的API有：invokeQueue、runBlocks、requires、name、provider、factory、servic、value、constant、animation、filter、controller、directive、config、run。其中invokeQueue和runBlocks是按名約定的私人屬性，請不要隨意使用，其他API都是我們常用的angular組件定義方法，從invokeLater代碼中能看到這類angular組件定義的返回依然是moduleInstance執行個體，這就形成了流暢API，推薦使用鏈式定義這些組件，而不是聲明一個全域的module變數。

最後，如果傳入了第三個參數configFn，則會將它配置到config資訊中，當angular進入config階段時，它們將會依次執行，進行對angular應用或者angular組件如service等的執行個體化前的配置。

以上就是對Angular Module聲明和擷取重載的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！