简介

ng提供模块管理，所有的service、ctrl等都是挂在模块上，没有依赖该模块那么这个模块的所有service、ctrl等都不能注入使用。

ng内置一个名为'ng'的模块，一些基础的服务如$http、$filter等都挂上面，默认所有的模块都依赖这个模块。

而实现那些依赖关系、加载先后顺序都是由loader这个模块完成。

源码分析

1.全部源码

function setupModuleLoader(window) {

  var $injectorMinErr = minErr('$injector');
  var ngMinErr = minErr('ng');

  function ensure(obj,name,factory) {
    return obj[name] || (obj[name] = factory());
  }

  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,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 configBlocks = [];

        var runBlocks = [];

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

        var moduleInstance = {
          _invokeQueue: invokeQueue,_configBlocks: configBlocks,_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',controller: invokeLater('$controllerProvider',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,queue) {
          if (!queue) queue = invokeQueue;
          return function() {
            queue[insertMethod || 'push']([provider,arguments]);
            return moduleInstance;
          };
        }
      });
    };
  });

}

2.分步解析

2.1 ensure使用

// 如果存在即返回，不存在使用factory创建，并保存
// 多次调用时保证不重复创建，返回同一个对象
function ensure(obj,factory) {
  return obj[name] || (obj[name] = factory());
}

// 创建angular实例，为后续angular.module、angular.element等api调用准备
var angular = ensure(window,Object);

// 为angular实例创建module属性
ensure(angular,function() {
  
  // ...

});

2.2module

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 configBlocks = [];

  var runBlocks = [];

  var config = invokeLater('$injector',configBlocks);

  // 返回的实体
  // 对外提供了如factory、service、value等api
  // 然后都调用invokeLater这个方法
  var moduleInstance = {
    _invokeQueue: invokeQueue,run: function(block) {
      runBlocks.push(block);
      return this;
    }
  };

  if (configFn) {
    config(configFn);
  }

  return  moduleInstance;
}

还有值得一提的是，runBlocks和configFn明确地将过程分为config过程和run过程

2.3invokeLater

// 延迟执行，现将执行的任务放入queue中，等待需要执行时再从queue中获取执行
// 调用invokeLater完成预注册的功能，等后续get特定module的时候再进行该module及依赖的module上的注册
function invokeLater(provider,queue) {
  // 除config外其他所有都放入invokeQueue，config放入configBlocks
  if (!queue) queue = invokeQueue;
  
  return function() {
    // 绝大多数是push，constant是unshift
    // 因为constant是可以在config阶段注入到provider中，所以需要优先处理，故全部unshift到队列头
    queue[insertMethod || 'push']([provider,arguments]);
    return moduleInstance;
  };
}

2.4 bootstrap

ng通过bootstrap进行启动

angular.bootstrap('#main',['mainModule']);

通过bootstrap中加载配置的启动模块并根据注册module的依赖关系进行加载依赖module

// 将ng及$provide放入modules，顺序是 ng -> [$provide,fn] -> mainModule
modules = modules || [];
modules.unshift(['$provide',function($provide) {
  $provide.value('$rootElement',element);
}]);
modules.unshift('ng');

// 主要的加载依赖的逻辑在createInjector，在inject章节中分析
var injector = createInjector(modules,config.strictDi);

// 注入器(injector)执行页面的compile
injector.invoke(['$rootScope','$rootElement','$compile','$injector',function(scope,element,compile,injector) {
    scope.$apply(function() {
      element.data('$injector',injector);
      compile(element)(scope);
    });
  }]
);

2.5 loadModules

通过调用createInjector完成模块加载及处理，那么主要的加载逻辑就在createInjector中，选出其中相关代码 (ps: 本来这部分内容准备在inject中写，想了想还是移到这边)

function loadModules(modulesToLoad){
  var runBlocks = [],moduleFn,invokeQueue;
  forEach(modulesToLoad,function(module) {
    // 判断是否已经加载过，防止重复加载
    if (loadedModules.get(module)) return;
    // 记录加载module
    loadedModules.put(module,true);

    function runInvokeQueue(queue) {
      var i,ii;
      for(i = 0,ii = queue.length; i < ii; i++) {
        // invokeArgs结构例如 [$provider,'factory',arguments]
        var invokeArgs = queue[i],provider = providerInjector.get(invokeArgs[0]);
        // 例如 $provide.factory.apply($provide,arguments);
        provider[invokeArgs[1]].apply(provider,invokeArgs[2]);
      }
    }

    try {
      if (isString(module)) {
        // 获取注册的module实例
        moduleFn = angularModule(module);
        // 递归调用loadModules,将返回的runBlocks合并起来
        runBlocks = runBlocks.concat(loadModules(moduleFn.requires)).concat(moduleFn._runBlocks);
        // 执行之前需要延迟执行的方法
        runInvokeQueue(moduleFn._invokeQueue);
        runInvokeQueue(moduleFn._configBlocks);
      } 
      // 如果是function或者array都作为runBlock处理
      else if (isFunction(module)) {
          runBlocks.push(providerInjector.invoke(module));
      } else if (isArray(module)) {
          runBlocks.push(providerInjector.invoke(module));
      } else {
        assertArgFn(module,'module');
      }
    } catch (e) {
      if (isArray(module)) {
        module = module[module.length - 1];
      }
      if (e.message && e.stack && e.stack.indexOf(e.message) == -1) {
        // Safari & FF's stack traces don't contain error.message content
        // unlike those of Chrome and IE
        // So if stack doesn't contain message,we create a new string that contains both.
        // Since error.stack is read-only in Safari,I'm overriding e and not e.stack here.
        /* jshint -W022 */
        e = e.message + '\n' + e.stack;
      }
      throw $injectorMinErr('modulerr',"Failed to instantiate module {0} due to:\n{1}",module,e.stack || e.message || e);
    }
  });
  return runBlocks;
}

加载流程

执行 setupModuleLoader() ，准备好angular.module
用户调用 angular.module(moduleName,[],configFn)，创建 module 并且声明依赖关系，返回module的实例，包含 requires 存放依赖，service\factory等方法
用户调用 module.factory 、module.provider 等创建服务，其实这时并没有真正创建，而是将创建的Fn和参数放入queue做了一个预注册连注册都不算，等待后续调用进行注册provider
用户调用angular.bootstrap('#main',['mainModule']); 或者 ng-init中声明启动的入口模块
bootstrap方法中调用 createInjector，createInjector中通过调用loadModules 进行模块初始化及加载依赖模块，深度优先策略
先执行各种 provider 的注册，再执行 configFn，返回出收集齐的 runBlocks
这些 runBlocks 将在createInjector 中执行，有个细节 runBlocks 收集时自己的 runBlocks 永远接在依赖模块的 runBlocks 后面，所以先执行依赖模块的，再执行自己的。

angularjs源码笔记(2)--loader modules

简介