简介

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, 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 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', '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, queue) {if (!queue) queue = invokeQueue;return function() {queue[insertMethod || 'push']([provider, method, arguments]);return moduleInstance;};}});};});}

2. 分步解析

2.1 ensure使用

// 如果存在即返回，不存在使用factory创建，并保存
// 多次调用时保证不重复创建，返回同一个对象
function ensure(obj, name, factory) {return obj[name] || (obj[name] = factory());
}// 创建angular实例，为后续angular.module、angular.element等api调用准备
var angular = ensure(window, 'angular', Object);// 为angular实例创建module属性
ensure(angular, 'module', function() {// ...});

2.2 module

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);// 返回的实体// 对外提供了如factory、service、value等api// 然后都调用invokeLater这个方法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', '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;
}

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

2.3 invokeLater

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

加载流程

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