angular源码分析：angular的整个加载流程

在前面，我们讲了angular的目录结构、JQLite以及依赖注入的实现，在这一期中我们将重点分析angular的整个框架的加载流程。

一、从源代码的编译顺序开始

下面是我们在目录结构哪一期理出的angular的编辑顺序图的缩略版：

├─── angular.prefix   //util.wrap函数加入的前缀代码
│
├─── minErr.js       //错误处理
├─── Angular.js      //主要定义angular的工具函数
├─── loader.js       //定义了setupModuleLoader函数
├─── stringify.js    //定义了对象序列化serializeObject，和对象调试输出字符串serializeObject
├─── AngularPublic.js //定义了angular导出的函数和变量
├─── jqLite.js        //定义jqLite,一个mini的jQuery
├─── apis.js          //定义了关于对象hash值的几个函数
├─── auto
│     │
│     └─── injector.js //依赖注入和模块加载，主要在这里实现，我在[第二期]讲过部分
│
├─── ng                //定义angular的各种服务的目录，该目录下一个文件按名字对应一个服务
│    │
│    ├─── *.js        //各种服务的定义
│    ├─── filter.js     //定义过滤器，注册具体的过滤器
│    ├─── filter         //过滤器目录，
│    │     │
│    │     └─── *.js   //过滤器的具体实现
│    └─── directive      //指令目录，该目录下一个文件对应一个angular指令
│          │
│          └─── *.js     //指令的具体实现
├─── angular.bind.js           //简单几行代码，判断是否已经加载了jQuery，如果是，直接使用jQuery，而不使用jqLite
├─── publishExternalApis.js        // `publishExternalAPI(angular);`导出变量和接口
│
└── angular.suffix   //util.wrap函数加入的后缀代码

二、找到代码的入口点

  //try to bind to jquery now so that one can write angular.element().read()
  //but we will rebind on bootstrap again.
  bindJQuery();  //绑定jquery：如果系统已经加载了jQuery，绑定使用，如果没有则是用angular自身的jqLite

  publishExternalAPI(angular); //导出angular的对外公开的函数和属性

  jqLite(document).ready(function() { //等待dom加载完后启动angular
    angularInit(document, bootstrap);
  });

三、dom加载前的准备工作

1.bindJQuery

这里将bindJQuery的代码贴出来，看看

function bindJQuery() {
  // bind to jQuery if present;
  jQuery = window.jQuery;
  // reset to jQuery or default to us.
  if (jQuery) { //如果使用jQuery，对其做了些扩展处理
    jqLite = jQuery;
    extend(jQuery.fn, {
      scope: JQLitePrototype.scope,
      isolateScope: JQLitePrototype.isolateScope,
      controller: JQLitePrototype.controller,
      injector: JQLitePrototype.injector,
      inheritedData: JQLitePrototype.inheritedData
    });

     //下面是对jquery改变dom时，增加一些清理工作，包括remove（删除元素），empty（置空），html（重写元素内容时）
    // Method signature:
    //     jqLitePatchJQueryRemove(name, dispatchThis, filterElems, getterIfNoArguments)
    jqLitePatchJQueryRemove('remove', true, true, false);
    jqLitePatchJQueryRemove('empty', false, false, false);
    jqLitePatchJQueryRemove('html', false, false, true);
  } else {
    jqLite = JQLite;
  }
  angular.element = jqLite;
}

2.publishExternalAPI

下面把publishExternalAPI的代码也贴出来

function publishExternalAPI(angular){
  extend(angular, {  //导出工具函数，就是直接将要导出的函数和属性加到angular对象上。细心的同学会发现下面少了angular.module的module。
    'bootstrap': bootstrap,
    'copy': copy,
    'extend': extend,
    'equals': equals,
    'element': jqLite,
    'forEach': forEach,
    'injector': createInjector,
    'noop':noop,
    'bind':bind,
    'toJson': toJson,
    'fromJson': fromJson,
    'identity':identity,
    'isUndefined': isUndefined,
    'isDefined': isDefined,
    'isString': isString,
    'isFunction': isFunction,
    'isObject': isObject,
    'isNumber': isNumber,
    'isElement': isElement,
    'isArray': isArray,
    'version': version,
    'isDate': isDate,
    'lowercase': lowercase,
    'uppercase': uppercase,
    'callbacks': {counter: 0},
    '$$minErr': minErr,
    '$$csp': csp
  });

  angularModule = setupModuleLoader(window); //这里需要重点分析
  try {
    angularModule('ngLocale');
  } catch (e) {
    angularModule('ngLocale', [])
    .provider('$locale', $LocaleProvider);
  }

  angularModule('ng', ['ngLocale'], ['$provide', //定义“ng”模块，$provide作为后面函数的依赖注入对象，可见$provide是在之前的模块中定义的
    function ngModule($provide) {

      // $$sanitizeUriProvider needs to be before $compileProvider as it is used by it.
      $provide.provider({ //注册$$sanitizeUri服务
        $$sanitizeUri: $$SanitizeUriProvider
      });

      $provide
      .provider('$compile', $CompileProvider) //定义$compile服务
      .directive({ //注册各种指令
            a: htmlAnchorDirective,
            input: inputDirective,
            textarea: inputDirective,
            form: formDirective,
            script: scriptDirective,
            select: selectDirective,
            style: styleDirective,
            option: optionDirective,
            ngBind: ngBindDirective,
            ngBindHtml: ngBindHtmlDirective,
            ngBindTemplate: ngBindTemplateDirective,
            ngClass: ngClassDirective,
            ngClassEven: ngClassEvenDirective,
            ngClassOdd: ngClassOddDirective,
            ngCloak: ngCloakDirective,
            ngController: ngControllerDirective,
            ngForm: ngFormDirective,
            ngHide: ngHideDirective,
            ngIf: ngIfDirective,
            ngInclude: ngIncludeDirective,
            ngInit: ngInitDirective,
            ngNonBindable: ngNonBindableDirective,
            ngPluralize: ngPluralizeDirective,
            ngRepeat: ngRepeatDirective,
            ngShow: ngShowDirective,
            ngStyle: ngStyleDirective,
            ngSwitch: ngSwitchDirective,
            ngSwitchWhen: ngSwitchWhenDirective,
            ngSwitchDefault: ngSwitchDefaultDirective,
            ngOptions: ngOptionsDirective,
            ngTransclude: ngTranscludeDirective,
            ngModel: ngModelDirective,
            ngList: ngListDirective,
            ngChange: ngChangeDirective,
            required: requiredDirective,
            ngRequired: requiredDirective,
            ngValue: ngValueDirective
        })
        .directive({ //注册ngInclude 指令
          ngInclude: ngIncludeFillContentDirective
        })
        .directive(ngAttributeAliasDirectives) //？
        .directive(ngEventDirectives);//?

      $provide.provider({ //注册剩余的各种服务
        $anchorScroll: $AnchorScrollProvider,
        $animate: $AnimateProvider,
        $browser: $BrowserProvider,
        $cacheFactory: $CacheFactoryProvider,
        $controller: $ControllerProvider,
        $document: $DocumentProvider,
        $exceptionHandler: $ExceptionHandlerProvider,
        $filter: $FilterProvider,
        $interpolate: $InterpolateProvider,
        $interval: $IntervalProvider,
        $http: $HttpProvider,
        $httpBackend: $HttpBackendProvider,
        $location: $LocationProvider,
        $log: $LogProvider,
        $parse: $ParseProvider,
        $rootScope: $RootScopeProvider,
        $q: $QProvider,
        $sce: $SceProvider,
        $sceDelegate: $SceDelegateProvider,
        $sniffer: $SnifferProvider,
        $templateCache: $TemplateCacheProvider,
        $timeout: $TimeoutProvider,
        $window: $WindowProvider
      });
    }
  ]);
}

细心的同学会发现:在导出的工具函数数组中少了angular.module的module，先不管，往下看。

我在这里重点分析setupModuleLoader函数以及angularModule对象到底是啥

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) {...};
  });
}

ensure(obj, name, factory)函数的含义：如果obj对象上存在name属性，直接返回；如果不存在，通过factory进行构造。

那么，angularModule = setupModuleLoader(window)执行后,会在angular上增加一个module属性，并且返回给angularModule。这里就把前面缺少的angular.module给加上了。

下面是module(name, requires, configFn)的具体代码实现(为节约篇幅，省去注释)：

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 = {
      // Private state
      _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;
      };
    }
  });
}

分析invokeLater函数：这个函数的功能是返回一个函数，这个函数能向invokeQueue数组中插入一个三元组（provider, method, arguments）

那么，就是说provider、factory等函数的功能都是向_invokeQueue压入数据

`module().run(xx_function)将把xx_function压入_runBlocks队列数组中。

问题来了：这些将在哪里得到“执行”呢？

结合上一期留的坑：

runInvokeQueue(moduleFn._invokeQueue); //moduleFn._invokeQueue是什么鬼，先留坑在此

runInvokeQueue(moduleFn._configBlocks); //moduleFn._configBlocks是什么鬼，也留坑在此

就很容易想到了：他们将在createInjector中得到执行。那么，createInjector本身又在哪里执行呢？

##四、dom加载后的工作：`angularInit(document, bootstrap)`

###1.angularInit的源码：
```js
function angularInit(element, bootstrap) {
  var elements = [element],
      appElement,
      module,
      names = ['ng:app', 'ng-app', 'x-ng-app', 'data-ng-app'],
      NG_APP_CLASS_REGEXP = /\sng[:\-]app(:\s*([\w\d_]+);?)?\s/;

  function append(element) {
    element && elements.push(element);
  }

  forEach(names, function(name) {
    names[name] = true;
    append(document.getElementById(name));
    name = name.replace(':', '\\:');
    if (element.querySelectorAll) {
      forEach(element.querySelectorAll('.' + name), append);
      forEach(element.querySelectorAll('.' + name + '\\:'), append);
      forEach(element.querySelectorAll('[' + name + ']'), append);
    }
  });

  forEach(elements, function(element) {
    if (!appElement) {
      var className = ' ' + element.className + ' ';
      var match = NG_APP_CLASS_REGEXP.exec(className);
      if (match) {
        appElement = element;
        module = (match[2] || '').replace(/\s+/g, ',');
      } else {
        forEach(element.attributes, function(attr) {
          if (!appElement && names[attr.name]) {
            appElement = element;
            module = attr.value;
          }
        });
      }
    }
  });
  if (appElement) {
    bootstrap(appElement, module ? [module] : []);
  }
}

上面的代码写了很多，但是只干了两件事：1.在dom中寻找启动节点，读出启动节点定义的启动模块的名字；2.如果找到了启动节点，用启动节点和其定义的启动模块的名字为参数调用bootstrap。

2.启动器bootstrap

function bootstrap(element, modules) {
  var doBootstrap = function() {
    element = jqLite(element);

    if (element.injector()) {
      var tag = (element[0] === document) ? 'document' : startingTag(element);
      throw ngMinErr('btstrpd', "App Already Bootstrapped with this Element '{0}'", tag);
    }

    modules = modules || [];
    modules.unshift(['$provide', function($provide) { //将['$provide',function(){...}]压入模块数组
      $provide.value('$rootElement', element);
    }]);
    modules.unshift('ng'); //将ng压入模块数组
    var injector = createInjector(modules); //创建注入器
    injector.invoke(['$rootScope', '$rootElement', '$compile', '$injector', '$animate',//注入根作用域、根元素、编译器、注入器、动画
       function(scope, element, compile, injector, animate) {
        scope.$apply(function() { //在根作用域上启动事件循环
          element.data('$injector', injector); //在根元素上保存注入器
          compile(element)(scope); //编译根元素
        });
      }]
    );
    return injector;
  };

  var NG_DEFER_BOOTSTRAP = /^NG_DEFER_BOOTSTRAP!/;

  if (window && !NG_DEFER_BOOTSTRAP.test(window.name)) {
    return doBootstrap();
  }

  window.name = window.name.replace(NG_DEFER_BOOTSTRAP, '');
  angular.resumeBootstrap = function(extraModules) {
    forEach(extraModules, function(module) {
      modules.push(module);
    });
    doBootstrap();
  };
}

好了，现在是时候看看上一期的内容了

上一期：angular源码分析：injector.js文件分析——angular中的依赖注入式如何实现的（续）

下一期：angular源码分析：图解angular的启动流程

ps:下一期中，我将画一些图来总结前面所讲的内容，希望对大家有帮助