摘要：同名模塊已經(jīng)初始化的模塊保存在一個叫的緩存對象中，是模塊名，是模塊對象。調(diào)用注入器的方法執(zhí)行模塊的所有方法。檢查該注入器中是否存在指定的服務(wù)。如果是數(shù)組，最后一個必須是的構(gòu)造函數(shù)，前面的就是構(gòu)造函數(shù)的參數(shù)名。

模塊是指寫Angular應(yīng)用的代碼片段，這樣可以使代碼分離開來，因此代碼會更好維護，可讀和測試。還可以在module里定義代碼依賴關(guān)系，可以調(diào)用一個模塊，再在代碼中定義這個模塊依賴于另外兩個。

angular模塊通過angular.module(name,requires, configFn)方法生成：
   1>參數(shù)name是模塊名稱；
   2>參數(shù)requires表示依賴模塊數(shù)組。
如果不設(shè)置requires參數(shù)，調(diào)用angular.module(name)方法表示獲取這個模塊；如果確定新模塊沒有依賴關(guān)系，必須設(shè)置requires為空數(shù)[arguments]；
如果不是字符串，則必須是方法（或數(shù)組格式的方法），那么，這個方法就代表了一個模塊。
   3>參數(shù)configFn是方法或數(shù)組，負責在模塊初始化時做一些配置，如果是數(shù)組，最后一個元素必須是方法。
方法configFn并不是在執(zhí)行angular.module()的時候立即執(zhí)行，而是當這個模塊被第一次使用時，由注入器調(diào)用執(zhí)行。同時，查看方法configFn中的this就會發(fā)現(xiàn)，這個this在瀏覽器中指向的是window，而不是module。而且，方法configFn只會執(zhí)行一次，因此同一個angular模塊不會重復配置。
實例：

angular.module("MetronicApp")
    .controller("AppController", 
    ["$scope", "$rootScope", "AppCommonService", "DictService", 
    function ($scope, $rootScope, AppCommonService, DictService) {
        // code
    });
}]);

AngularJS允許我們使用angular.module()方法來聲明模塊，這個方法能夠接受兩個參數(shù), 第一個是模塊的名稱，第二個是依賴列表,也就是可以被注入到模塊中的對象列表。
同名模塊

已經(jīng)初始化的angular模塊保存在一個叫modules的緩存對象中，key是模塊名，value是模塊對象。所以，定義一個同名的模塊，等于覆蓋之前的模塊。

angular模塊只保留服務(wù)的定義，現(xiàn)在再來理解服務(wù)是如何加入注入器的。

 模塊定義服務(wù)、服務(wù)提供商；
 注入器根據(jù)模塊依賴關(guān)系加載模塊，實例化所有服務(wù)提供商；
 應(yīng)用需要服務(wù)，注入器根據(jù)服務(wù)名尋找服務(wù)提供商，服務(wù)提供商實例化服務(wù)。

以上只是理論，現(xiàn)在從代碼層面來看Angular是如何實現(xiàn)的。

每個angular模塊內(nèi)置有三個數(shù)組，invokeQueue保存如何注入服務(wù)提供商和值的信息；configBlocks保存模塊的配置信息；runBlocks保存這個模塊的執(zhí)行信息。模塊被使用的時候，注入器根據(jù)invokeQueue中的信息，實例化服務(wù)提供商；根據(jù)configBlocks中的信息對服務(wù)提供商做一些額外的處理；根據(jù)runBlocks中提供的信息，調(diào)用前面的服務(wù)提供商提供的服務(wù)執(zhí)行模塊需要完成的工作。
angular模塊提供了很多方法來填充這三個數(shù)組，比如config()、run()等。三個數(shù)組的元素也是數(shù)組，具體元素格式參考后面的說明。
以下是源碼，可以清楚看到每個模塊所要依賴的服務(wù)和運行機制，稍后詳細介紹。

   var angular = ensure(window, "angular", Object);
  angular.$$minErr = angular.$$minErr || minErr;
  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);
        }

    /** @type {!Array.>} */
    var invokeQueue = [];

    /** @type {!Array.} */
    var configBlocks = [];

    /** @type {!Array.} */
    var runBlocks = [];

    var config = invokeLater("$injector", "invoke", "push", configBlocks);

    /** @type {angular.Module} */
    var moduleInstance = {
      // Private state
      _invokeQueue: invokeQueue,
      _configBlocks: configBlocks,
      _runBlocks: runBlocks,
      requires: requires,
      name: name,
      provider: invokeLaterAndSetModuleName("$provide", "provider"),
      factory: invokeLaterAndSetModuleName("$provide", "factory"),
      service: invokeLaterAndSetModuleName("$provide", "service"),
      value: invokeLater("$provide", "value"),
      constant: invokeLater("$provide", "constant", "unshift"),
      decorator: invokeLaterAndSetModuleName("$provide", "decorator"),
      animation: invokeLaterAndSetModuleName("$animateProvider", "register"),
      filter: invokeLaterAndSetModuleName("$filterProvider", "register"),
      controller: invokeLaterAndSetModuleName("$controllerProvider", "register"),
      directive: invokeLaterAndSetModuleName("$compileProvider", "directive"),
      config: config,
      run: function(block) {
        runBlocks.push(block);
        return this;
      }
    };
    if (configFn) {
      config(configFn);
    }
    return moduleInstance;
    function invokeLater(provider, method, insertMethod, queue) {
      if (!queue) queue = invokeQueue;
      return function() {
        queue[insertMethod || "push"]([provider, method, arguments]);
        return moduleInstance;
      };
    }
    function invokeLaterAndSetModuleName(provider, method) {
      return function(recipeName, factoryFunction) {
        if (factoryFunction && isFunction(factoryFunction)) factoryFunction.$$moduleName = name;
        invokeQueue.push([provider, method, arguments]);
        return moduleInstance;
      };
    }
  });
};

});

數(shù)組元素為[‘provider’, ‘method’, arguments]。
舉例– 添加一個Controller：

angular.module("ngAppDemo",[])        
.controller("ngAppDemoController",function($scope) {       
      $scope.a= 1;      
      $scope.b = 2;      
});  

這段代碼等于：

invokeQueue.push(["$controllerProvider","register",
    ["ngAppDemoController", function(){
    //code

}]]);  

注入器根據(jù)這個信息，就會調(diào)用$controllerProvider的register方法注冊一個ngAppDemoController。

元素格式為["$injector", "invoke", arguments]。

元素要求是方法，或者是數(shù)組，數(shù)組最后一個元素是方法。

屬性
requires
表示模塊的依賴數(shù)組，即angular.module方法的requires參數(shù)。
name
模塊的名字。
_invokeQueue、_configBlocks、_runBlocks
分別對應(yīng)invokeQueue、configBlocks、runBlocks。
方法

模塊的以下方法最后全部會返回模塊實例本身，形成執(zhí)行鏈。

animation()
調(diào)用這個方法表示這個模塊將在$animateProvider中注冊一個動畫服務(wù)。
原理：在invokeQueue尾部插入["$animateProvider", "register", arguments]。

config()
調(diào)用這個方法，表示給這個模塊追加一個配置方法。
原理：在configBlocks尾部插入["$injector","invoke", arguments]。

constant()
調(diào)用這個方法表示這個模塊將給默認的$provider注冊一個常量。
原理：在invokeQueue首部插入["$provide", "constant", arguments]。

controller()
調(diào)用這個方法表示模塊將在$controllerProvider中注冊一個控制器。
原理：在invokeQueue尾部插入["$controllerProvider", "register", arguments]。

directive()
調(diào)用這個方法表示這個模塊將在$compileProvider中注冊一個指令。
原理：在invokeQueue尾部插入["$compileProvider", "directive", arguments]。

factory()
調(diào)用這個方法表示這個模塊中將生成一個服務(wù)工廠（隱式創(chuàng)建一個了服務(wù)提供商）。
原理：在invokeQueue尾部插入["$provide", "factory", arguments]。

filter()
調(diào)用這個方法表示這個模塊將在$filterProvider中注冊一個過濾器。
原理：在invokeQueue尾部插入["$filterProvider", "register", arguments]。

provider()
調(diào)用這個方法表示這個模塊將添加一個服務(wù)提供商。
原理：在invokeQueue尾部插入["$provide", "provider", arguments]。

run(block)
調(diào)用這個方法表示這個模塊將執(zhí)行某個功能塊，block可以是方法，也可以是數(shù)組。
原理：在invokeQueue尾部插入block。

service()
調(diào)用這個方法表示這個模塊將注冊一個服務(wù)（隱式創(chuàng)建了一個服務(wù)提供商）。
原理：在invokeQueue尾部插入["$provide", "service", arguments]。

value()
調(diào)用這個方法表示這個模塊將注冊一個變量（隱式創(chuàng)建了一個服務(wù)提供商）。
原理：在invokeQueue尾部插入["$provide", "value", arguments]。

在Angular中，服務(wù)可能是對象、方法、或者一個常量值。服務(wù)由服務(wù)提供商創(chuàng)建，而服務(wù)提供商由注入器統(tǒng)一管理。當我們需要某個服務(wù)的時候，注入器負責根據(jù)服務(wù)名尋找相應(yīng)的服務(wù)提供商，然后由服務(wù)提供商的$get()生產(chǎn)工廠創(chuàng)建服務(wù)實例。因此，服務(wù)提供商必須有一個$get()方法，這個方法就是服務(wù)創(chuàng)建單例工廠。

背后原理：注入器中的Providers和Services各自通過一個Map對象保存在緩存（分別對應(yīng)providerCache和instanceCache）中，只不過Providers的key是serviceName + “Provider”，而Services的key是serviceName。
服務(wù)提供商-Provider

Provider即服務(wù)提供商，必須有一個$get()方法，$get()的返回值是Provider在注入器中實際的服務(wù)。
注入器

創(chuàng)建注入器的方法只在bootstrap()方法中被調(diào)用過，也就是說，每一個angular應(yīng)用對應(yīng)一個注入器。
注入過程

注入器由angular.injector(modulesToLoad, isStrictDi)方法創(chuàng)建，在angular中其實為createInjector方法。參數(shù)modulesToLoad是數(shù)組，元素格式為以下之一：

‘module’，模塊的名稱。
[‘service1’, ‘service2’, fn]。
fn，方法的返回值必須仍然是方法。

方法angular.injector()的執(zhí)行過程：

遍歷modulesToLoad，根據(jù)moduleName尋找或生成相應(yīng)的模塊。

調(diào)用模塊invokeQueue中的所有方法，這一步的目的是創(chuàng)建必需的服務(wù)。

調(diào)用模塊configBlocks中的所有方法，目的是用已有的服務(wù)配置這個模塊。

調(diào)用注入器的invoke()方法執(zhí)行模塊runBlocks的所有方法。

返回服務(wù)注入器實例。

不是所有模塊都是對象，如果模塊本身是方法或者是數(shù)組（最后一個元素必須是方法），則運行這個方法、或數(shù)組的最后一個方法，相當于直接進入了第四步。
注入器與bootstrap的關(guān)系

創(chuàng)建注入器的方法在angular.js中只在bootstrap()方法中被調(diào)用過，也就是說，每一個angular應(yīng)用對應(yīng)一個注入器。
注入器方法

在providerCache中和instanceCache中分別內(nèi)置有一個$injector對象，分別負責給模塊注入服務(wù)提供商和為方法注入服務(wù)。一般我們只談?wù)搃nstanceCache中的$injector對象，因為providerCache和它的$injector是私有的，只在Angular內(nèi)部代碼使用。

比如，執(zhí)行模塊調(diào)用隊列、配置隊列中的方法時注入的是服務(wù)提供商，而當調(diào)用運行隊列中的方法時，注入的是服務(wù)。
$injector.invoke(fn, self, locals, serviceName)

執(zhí)行方法fn。locals是可選參數(shù)，是對象，表示局部變量。self是fn中的this。

最后一個參數(shù)serviceName是可選參數(shù)，表示在哪個服務(wù)中調(diào)用了fn方法，用于錯誤信息顯示，沒有處理邏輯。
$injector.instantiate(Type, locals, serviceName)

l 如果參數(shù)Type為方法，根據(jù)Type的prototype創(chuàng)建一個實例（通過Object.create方法創(chuàng)建），如果Type是數(shù)組，使用最后一個元素的prototype。

l 參數(shù)Locals是當Type方法的參數(shù)出現(xiàn)在locals對象中的時候，取locals[arg]的值重新作為Type的參數(shù)。如果locals中沒有，則等價于調(diào)用get(arg,serviceName)獲取service作為新的參數(shù)。

實例化過程可以簡單概括為

Type.apply(Object.create(Type.prototype),locals[argName]|| get(argName, serviceName))。  

注意：實例化出來的不一定是對象，也可能是方法。

最后一個參數(shù)serviceName是可選參數(shù)，表示在哪個服務(wù)中實例化了Type，用于錯誤信息顯示，沒有處理邏輯。
$injector.get(name, caller)

從注入器中獲取一個服務(wù)實例。

參數(shù)name是服務(wù)的名稱。參數(shù)caller也是字符串，表示調(diào)用這個服務(wù)的是哪個方法，用于錯誤信息提示，沒有處理邏輯。
$injector.annotate(fn,strictDi )

返回數(shù)組，數(shù)組的元素是fn方法需要注入的依賴服務(wù)。

在嚴格模式下，方法的依賴注入必須使用顯示的注解加入，也就是說通過fn.$injector能夠獲取這個方法的依賴注入。

參數(shù)name是可選的，用于錯誤顯示，沒有處理邏輯。

方法annotate()也可以接受數(shù)組，數(shù)組的最后一個參數(shù)一定是fn，前面的元素則是依賴。
$injector.has(name)

檢查該注入器中是否存在指定的服務(wù)。
Provider方法

注入器的providerCache中內(nèi)置有一個$provider對象，這是注入器的默認服務(wù)提供商，$provider有六個固定的方法。這幾個方法的作用主要是為注入器添加其他服務(wù)提供商。

注意：

以下所有方法的name參數(shù)不需要以“Provider”結(jié)尾，因為provider()方法會默認把這個后綴加上。
以下任何一個方法不做同名判斷，因此，如果出現(xiàn)同名，后者將覆蓋前者。

$provider.provide(name, provider)

參數(shù)provider可以是方法或數(shù)組，也可以是對象。

l 如果是方法，則是provider的構(gòu)造函數(shù)。調(diào)用注入器的instantiate()方法，生成一個provider實例，并以name為key保存在注入器的providerCache中。

l 如果是數(shù)組，最后一個必須是provider的構(gòu)造函數(shù)，前面的就是構(gòu)造函數(shù)的參數(shù)名。之后的原理和provider是方法的情形相同。

l 如果是對象，說明這個provider已經(jīng)被實例化了，只需有$get()方法即可。
$provider.factory(name, factoryFn, enforce)

使用$provider.provide()一般需要定義一個Provider類，如果不想定義Provider類，而是直接定義服務(wù)工廠，就可以使用這個方法。

背后原理：首先生成一個匿名對象，這個對象的$get屬性就是factoryFn（enforce為false的情況下），然后把這個匿名對象作為$provider.provide()方法的第二個參數(shù)。所以，factoryFn其實依然是綁定在一個provider上的。
$provider.service(name, constructor)

調(diào)用injector.instantiate()方法，利用參數(shù)constructor生成service實例，參數(shù)name是這個service的名稱。

眾所周知，service由provider提供，那這個方法是怎么回事？原理：Angular首先根據(jù)constructor生成一個factoryFn，然后調(diào)用$provider.factory(name, factoryFn)。所以其實還是生成了一個provider。

舉例：

$provider.service("filter", constructor)

等于創(chuàng)建了一個filter服務(wù)實例，并且在providerCache中保存了一個名稱為“filterProvider”的服務(wù)提供商。
$provider.value(name, value)

這個方法實際調(diào)用injector.factory(name,valueFn(value), false)方法實現(xiàn)。所以其實等于創(chuàng)建一個只提供值的服務(wù)提供商。
$provider.constant(name, value)

這個方法直接在providerCache中添加一個屬性實現(xiàn)。
$provider.decorate(serviceName, decorFn)

修改舊的服務(wù)，改為執(zhí)行decorFn方法，并把servcieName原來的服務(wù)作為一個參數(shù)，參數(shù)名為$delegate。等價于一個靜態(tài)代理。

背后原理：首先根據(jù)seviceName找到Provider，然后修改provider的$get屬性。

ngLocale - 本地化模塊

angular.module("ngLocale",[]).provider("$locale", $LocaleProvider);

結(jié)果是invokeQueue.push(["$provide", "provider",["$locale", $LocaleProvider]]);

ng

angular.module("ng",["ngLocale"]).config(["$provide", function(){}]);

結(jié)果是configBlocks.push(["$injector", "invoke",["$provide", function(){}]])。
三個固定模塊

每個使用bootstrap(element, modules, config)生成的應(yīng)用，注入器中有三個固定的模塊：

第一個模塊是"ng"。
   第二個模塊是[‘$provider’,fn]，它的作用是把根元素element作為變量保存在$provider中。
   第三個模塊是[‘$compileProvider’,fn]，它的作用是根據(jù)config.debugInfoEnabled調(diào)用 $conpileProvider.debugInfoEnabled(true)。