angular 源码分析 1 - angularInit()

angularjs 是个神奇的框架，由于我的好奇，想了解她的内部工作原理，只能一步一步的走进她，靠近她，和她深入的交流。

angularjs 的入口是什么样子的呢？一起掀起她的盖头吧。

在这里我只讲方法，具体的行号不做记录，自己找吧（Ctrl+F）;

入口是这样的：

jqLite(document).ready(function() {
  angularInit(document, bootstrap);
});

原理简单，就是获取document ready 结束时，调用angularInit(document, bootstrap);  我们今天的重头戏是angularInit()方法, 暂时不讲bootstrap。

   var ngAttrPrefixes = ['ng-', 'data-ng-', 'ng:', 'x-ng-'];
     function angularInit(element, bootstrap) {
         var appElement,
             module,
             config = {};

         // The element `element` has priority over any other element
         forEach(ngAttrPrefixes, function(prefix) {
             var name = prefix + 'app';

             if (!appElement && element.hasAttribute && element.hasAttribute(name)) {
                 appElement = element;
                 module = element.getAttribute(name);
             }
         });
         forEach(ngAttrPrefixes, function(prefix) {
             var name = prefix + 'app';
             var candidate;

             if (!appElement && (candidate = element.querySelector('[' + name.replace(':', '\\:') + ']'))) {
                 appElement = candidate;
                 module = candidate.getAttribute(name);
             }
         });
         if (appElement) {
             config.strictDi = getNgAttribute(appElement, "strict-di") !== null;
             bootstrap(appElement, module ? [module] : [], config);
         }
     }

这个方法就是angularjs 获取ng-app （['ng-', 'data-ng-', 'ng:', 'x-ng-'] app有这几种写法）的方法， 8~24行都是为了寻找整个页面中的app属性，此时只会获取第一个带有app的属性元素，这也是为什么一个程序中只能有一个app的原因，如果找到了带有app的属性，就执行26~27行代码，如果没有找到，对不起，angularjs 没有了卵用，这就为什么必须刚开始写ng-app="XXXX"。

那么26行是什么意思呢？

  function getNgAttribute(element, ngAttr) {
         var attr, i, ii = ngAttrPrefixes.length;
         for (i = 0; i < ii; ++i) {
             attr = ngAttrPrefixes[i] + ngAttr;
             if (isString(attr = element.getAttribute(attr))) {
                 return attr;
             }
         }
         return null;
     }

就是判断 是严格模式吗，即在app的元素上 写ng-strict-di属性了吗，当找到了就返回获取的属性值，没有找到就返回null;

你可能有疑惑什么是严格模式，自己看看吧，https://docs.angularjs.org/api/ng/directive/ngApp  搜搜“ ngStrictDi ”，自己可以试试。

执行完getNgAttribute() 返回的值进行判断后 赋给了config.strictDi（true/false）。

好了，先讲这些吧，下次讲讲bootstrap()方法