码迷,mamicode.com
首页 > 其他好文 > 详细

angular启动过程分析

时间:2015-07-15 18:32:26      阅读:143      评论:0      收藏:0      [点我收藏+]

标签:

启动过程

步骤一

  • 用自执行函数在代码完成加载后立即执行
    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 的三种启动方式
  1. 自动启动

         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

angular启动过程分析

标签:

原文地址:http://www.cnblogs.com/startmyways/p/angular.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!