module是angular中重要的模塊組織方式，它提供了將一組內(nèi)聚的業(yè)務(wù)組件（controller、service、filter、directive…）封裝在一起的能力。這樣做可以將代碼按照業(yè)務(wù)領(lǐng)域問(wèn)題分module的封裝，然后利用module的依賴注入其關(guān)聯(lián)的模塊內(nèi)容，使得我們能夠更好的”分離關(guān)注點(diǎn)“，達(dá)到更好的”高內(nèi)聚低耦合“?！备邇?nèi)聚低耦合“是來(lái)自面向?qū)ο笤O(shè)計(jì)原則。內(nèi)聚是指模塊或者對(duì)象內(nèi)部的完整性，一組緊密聯(lián)系的邏輯應(yīng)該被封裝在同一模塊、對(duì)象等代碼單元中，而不是分散在各處；耦合則指模塊、對(duì)象等代碼單元之間的依賴程度，如果一個(gè)模塊的修改，會(huì)影響到另一個(gè)模塊，則說(shuō)明這兩模塊之間是相互依賴緊耦合的。

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

關(guān)于module的定義為：angular.module(‘com.ngbook.demo', [])。關(guān)于module函數(shù)可以傳遞3個(gè)參數(shù)，它們分別為：

1. name：模塊定義的名稱，它應(yīng)該是一個(gè)唯一的必選參數(shù)，它會(huì)在后邊被其他模塊注入或者是在ngAPP指令中聲明應(yīng)用程序主模塊；
2. requires：模塊的依賴，它是聲明本模塊需要依賴的其他模塊的參數(shù)。特別注意：如果在這里沒(méi)有聲明模塊的依賴，則我們是無(wú)法在模塊中使用依賴模塊的任何組件的；它是個(gè)可選參數(shù)。
3. configFn： 模塊的啟動(dòng)配置函數(shù)，在angular config階段會(huì)調(diào)用該函數(shù)，對(duì)模塊中的組件進(jìn)行實(shí)例化對(duì)象實(shí)例之前的特定配置，如我們常見(jiàn)的對(duì)$routeProvider配置應(yīng)用程序的路由信息。它等同于”module.config“函數(shù)，建議用”module.config“函數(shù)替換它。這也是個(gè)可選參數(shù)。
   

對(duì)于angular.module方法，我們常用的方式有有種，分別為angular.module(‘com.ngbook.demo', [可選依賴])和angular.module(‘com.ngbook.demo')。請(qǐng)注意它是完全不同的方式，一個(gè)是聲明創(chuàng)建module，而另外一個(gè)則是獲取已經(jīng)聲明了的module。在應(yīng)用程序中，對(duì)module的聲明應(yīng)該有且只有一次；對(duì)于獲取module，則可以有多次。推薦將angular組件獨(dú)立分離在不同的文件中，module文件中聲明module，其他組件則引入module，需要注意的是在打包或者script方式引入的時(shí)候，我們需要首先加載module聲明文件，然后才能加載其他組件模塊。

在angular中文社區(qū)群中，有時(shí)會(huì)聽(tīng)見(jiàn)某些同學(xué)問(wèn)關(guān)于”ng:areq“的錯(cuò)誤：

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

這往往是因?yàn)橥浂xcontroller或者是聲明了多次module，多次聲明module會(huì)導(dǎo)致前邊的module定義信息被清空，所以程序就會(huì)找不到已定義的組件。這我們也能從angular源碼中了解到（來(lái)自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在啟動(dòng)時(shí)，會(huì)設(shè)置全局的angular對(duì)象，然后在angular對(duì)象上發(fā)布module這個(gè)API。關(guān)于module API代碼，能清晰的看見(jiàn)第一行謂語(yǔ)句，module名稱不能以hasOwnProperty命名，否則會(huì)拋出”badname“的錯(cuò)誤信息。緊接著，如果傳入了name參數(shù)，其表示是聲明module，則會(huì)刪除已有的module信息，將其置為null。

從moduleInstance的定義，我們能夠看出，angular.module為我們公開(kāi)的API有：invokeQueue、runBlocks、requires、name、provider、factory、servic、value、constant、animation、filter、controller、directive、config、run。其中invokeQueue和runBlocks是按名約定的私有屬性，請(qǐng)不要隨意使用，其他API都是我們常用的angular組件定義方法，從invokeLater代碼中能看到這類(lèi)angular組件定義的返回依然是moduleInstance實(shí)例，這就形成了流暢API，推薦使用鏈?zhǔn)蕉x這些組件，而不是聲明一個(gè)全局的module變量。

最后，如果傳入了第三個(gè)參數(shù)configFn，則會(huì)將它配置到config信息中，當(dāng)angular進(jìn)入config階段時(shí)，它們將會(huì)依次執(zhí)行，進(jìn)行對(duì)angular應(yīng)用或者angular組件如service等的實(shí)例化前的配置。

以上就是對(duì)Angular Module聲明和獲取重載的資料整理，后續(xù)繼續(xù)補(bǔ)充相關(guān)資料，謝謝大家對(duì)本站的支持！

最新評(píng)論