angularJs启动分析

angular

启动流程图

1、整体结构

一个自执行函数，简化如下

(function(window, document, undefined) {
    // 定义变量和函数
    // 其他操作
    if (window.angular.bootstrap) {
        console.log('WARNING: Tried to load angular more than once.');
        return;
    }
    bindJQuery();
    publishExternalAPI(angular);
    jqLite(document).ready(function() {
        angularInit(document, bootstrap);
    });
})(window, document);

整体思路为：

1. 首先是一些全局变量和方法的定义，以及一些其它操作；
2. 通过window.angular.bootstrap判断是否已经加载angular，如果已经加载，则直接退出；
3. 执行bindJQuery()，如果已经加载了jQuery，则AngularJS会使用已经加载的jQuery，否则使用内部实现的JQLite，其相当于是一个简化版的jQuery；
4. 执行publishExternalAPI(angular)来为全局变量angular增加属性和方法，并建立起模块机制，注册核心模块；
5. 在文档加载完成后执行angularInit()。

2、bindJQuery

绑定jQuery，简化如下

var bindJQueryFired = false;
function bindJQuery() {
    if (bindJQueryFired) {
        return;
    }
    var jqName = jq();
    jQuery = window.jQuery;
    if (isDefined(jqName)) {
        jQuery = jqName === null ? undefined : window[jqName];
    }
    if (jQuery && jQuery.fn.on) {
        jqLite = jQuery;
        // ... ...
    } else {
        jqLite = JQLite;
    }
    angular.element = jqLite;
    bindJQueryFired = true;
}

1. bindJQueryFired相当于是一个标志符，初始值为false。在执行bindJQuery的时候，先判断bindJQueryFired的值，如果其为true，则说明已经执行过jQuery绑定，直接返回；否则执行绑定过程，并将bindJQueryFired的值设置为true;
2. jqName是调用jq()的返回值，jq()的主要作用是遍历文档，找出第一个包含属性ng-jq的节点，然后取其属性值；
3. 变量jQuery取值为window.jQuery，如果加载了jQuery函数库，则其值非空；
4. 在应用了ng-jq指令的情况下，如果jQName的值不为null，则设置变量jQuery的值为window[jqName]，否则设置为undefined
5. 如果jQuery变量有效，则使用jQuery变量指定的库；否则使用内置实现的JQLite。

总结起来，绑定的jQuery可以的来源有三个：ng-jq指定、引入的jQuery库、内置实现的JQLite，其使用流程为：

如果有ng-jq

1. 如果ng-jq的值不为空，则使用它指定的库
2. 如果ng-jq指定的值为空，则变量jQuery的值为undefined，此时强制使用JQLite，无论是否引入了jQuery库

如果没有ng-jq

如果引入了jQuery库，则使用它; 如果没有引入jQuery库，则使用JQLite

3. publishExternalAPI

代码简化如下

function publishExternalAPI(angular) {
    extend(angular, {
        // ... ...
    });
    angularModule = setupModuleLoader(window);
    try {
        angularModule('ngLocale');
    } catch (e) {
        angularModule('ngLocale', []).provider('$locale', $LocaleProvider);
    }
    angularModule('ng', ['ngLocale'], ['$provide',
        function ngModule($provide) {
            // ... ...
        }
    ]);
}

主要功能：
1. 扩展angular对象，挂载工具函数
2. 执行setupModuleLoader(window)，该方法主要是创建了模块加载器:angular.module方法，用于注册及获取模块；angular.module只有一个参数的时候为获取模块，否则为注册模块；
3. 如果没有注册ngLocal模块，则对其进行注册；
4. 注册ng模块，也就是AngularJS的核心模块。

4. angularInit

启动Angular应用，相关代码为：

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

// angularInit定义
var ngAttrPrefixes = ['ng-', 'data-ng-', 'ng:', 'x-ng-'];
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;
}
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-、data-ng、ng:和x-ng-。

1. 首先对element进行检测，看它是否有ng-app等属性，如果有则设定appElement和module；
2. 如果element元素没有ng-app等属性，则对其后代元素进行查找，找到第一个有ng-app等属性的元素，从而设定appElement和module;
3. 如果appElement不为空，即找到了应用的入口元素，则执行bootstrap。
4. 需要注意的是，如果有多个元素都有ng-app属性，则只会找到第一个并启动它，而后面的应用则不会自动启动。

启动总结：自动启动、手动启动
1、自动启动：

<body ng-app="plunker">
    <div ng-controller="MainCtrl">
      <p>Hello {{name}}!</p>
    </div>
</body>
<script>
    var app = angular.module('plunker', []);
    app.controller('MainCtrl', ['$scope', function($scope) {
        $scope.name = 'alex';
    }]);
</script>

上面的例子使用了ng-app指令:http://plnkr.co/edit/HJNL9gDbECjX0SsU4IIG?p=info

2、手动启动

<body>
    <div ng-controller="MainCtrl">
      <p>Hello {{name}}!</p>
    </div>
</body>
<script>
    var app = angular.module('plunker', []);
    app.controller('MainCtrl', ['$scope', function($scope) {
        $scope.name = 'alex';
    }]);
    angular.element(document).ready(function() {
        angular.bootstrap(document.body, ['plunker']);
    });
</script>

上面的例子没有使用ng-app指令，用angular.bootStrap启动：http://plnkr.co/edit/DFHhpwA0fKzERF2JgDJn?p=info

3、多启动：首先是应用是不能嵌套的，如果使用了多个ng-app，只有第一个是自动启动

<body>
    <div ng-controller="MainCtrl1" ng-app="app1">
      <p>Hello {{name}}!</p>
    </div>
    <div ng-controller="MainCtrl2" ng-app="app2" id="app2">
      <p>Hello {{name}}!</p>
    </div>
</body>
<script>
    var app1 = angular.module('app1', []);
    app1.controller('MainCtrl1', ['$scope', function($scope) {
        $scope.name = 'alex';
    }]);
    var app2 = angular.module('app2', []);
    app2.controller('MainCtrl2', ['$scope', function($scope) {
        $scope.name = 'yiranphp';
    }]);
    angular.element(document).ready(function() {
        angular.bootstrap(document.getElementById('app2'), ['app2']);
    });
</script>

上面的例子第一个ng-app自动启动，第二个手动启动：http://plnkr.co/edit/xnNqm7NSQKRegGkAshTH?p=preview

本篇文章到此结束，欢迎指正