angular启动过程分析

启动过程

步骤一

用自执行函数在代码完成加载后立即执行
```
function(window, document, undefined)
```

在window上暴露一个唯一的全局对象angular，Line250

 /** @name angular */
    angular           = window.angular || (window.angular = {}),

获得其它工具模块 Line 2129

function publishExternalAPI(angular){
  extend(angular, {
    '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
  });

我们来看看angular全局对象都有什么东西

接着，我们使用全局对象中的isFunction 来遍历一下angular全局对象上的属性，函数
我们再来看看injector里都有什么

步骤二

检查是不是多次导入Angular：window.angular.bootstrap(通过检查指定的元素上是否已经存在injector进行判断)

if (window.angular.bootstrap) {
    //AngularJS is already loaded, so we can return here...
    console.log('WARNING: Tried to load angular more than once.');
    return;
  }

Angular 的三种启动方式

自动启动

Angular会自动的找到ng-app，将它作为启动点，自动启动

<!DOCTYPE html>
<html ng-app="myModule">

<head>
    <title>New Page</title>
    <meta charset="utf-8" />
    <script type="text/javascript" src="../../vendor/bower_components/angular/angular.min.js"></script>
    <script type="text/javascript" src="./02.boot1.js"></script>
</head>

<body>
    <div ng-controller="MyCtrl">
        <span>{{Name}}</span>
    </div>
</body>
</html>

var myModule = angular.module("myModule", []);
myModule.controller('MyCtrl', ['$scope',
    function($scope) {
        $scope.Name = "Puppet";
    }
]);

方式2：手动启动

在没有ng-app的情况下，只需要在js注册一段代码即可

<body>
    <div ng-controller="MyCtrl">
        <span>{{Name}}</span>
    </div>
</body>

var myModule = angular.module("myModule", []);
myModule.controller('MyCtrl', ['$scope',
    function($scope) {
        $scope.Name = "Puppet";
    }
]);

/**
 * 这里要用ready函数等待文档初始化完成
 */
angular.element(document).ready(function() {
    angular.bootstrap(document, ['myModule']);
});

方式3：多个ng-app

ng中，angular的ng-app是无法嵌套使用的，在不嵌套的情况下有多个ng-app，他默认只会启动第一个ng-app，第二个第三个需要手动启动(注意，不要手动启动第一个，虽然可以运行，但会抛异常)

<body>
    <div id="app1" ng-app="myModule1">
        <div ng-controller="MyCtrl">
            <span>{{Name}}</span>
        </div>
    </div>
    <div id="app2" ng-app="myModule2">
        <div ng-controller="MyCtrl">
            <span>{{Name}}</span>
        </div>
    </div>
</body>

/**
 * 第一个APP
 * @type {[type]}
 */
var myModule1 = angular.module("myModule1", []);
myModule1.controller('MyCtrl', ['$scope',
    function($scope) {
        $scope.Name = "Puppet";
    }
]);
// angular.element(document).ready(function() {
//     angular.bootstrap(app1, ['MyModule1']);
// });

/**
 * 第二个APP
 * @type {[type]}
 */
var myModule2 = angular.module("myModule2", []);
myModule2.controller('MyCtrl', ['$scope',
    function($scope) {
        $scope.Name = "Vincent";
    }
]);
angular.element(document).ready(function() {
    angular.bootstrap(app2, ['myModule2']);
});

步骤三：

尝试绑定jQuery，如果发现导入了jQuery ，则使用导入的jQuery，否则，使用Angular自己封装的JQLite

bindJQuery();


转自：http://segmentfault.com/a/1190000002788586

posted on 2015-07-15 16:41 startmyways 阅读(420) 评论(0) 编辑收藏举报