启动过程

步骤一

  • 用自执行函数在代码完成加载后立即执行

    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启动过程分析的更多相关文章

  1. ASP.Net Core MVC6 RC2 启动过程分析[偏源码分析]

    入口程序 如果做过Web之外开发的人,应该记得这个是标准的Console或者Winform的入口.为什么会这样呢? .NET Web Development and Tools Blog ASP.NE ...

  2. 开机SystemServer到ActivityManagerService启动过程分析

    开机SystemServer到ActivityManagerService启动过程 一 从Systemserver到AMS zygote-> systemserver:java入层口: /** ...

  3. Neutron分析（2）——neutron-server启动过程分析

    neutron-server启动过程分析 1. /etc/init.d/neutron-server DAEMON=/usr/bin/neutron-server DAEMON_ARGS=" ...

  4. linux视频学习7（ssh, linux启动过程分析，加解压缩，java网络编程）

    回顾数据库mysql的备份和恢复: show databases; user spdb1; show tables; 在mysql/bin目录下 执行备份: ./mysqldump -u root - ...

  5. Activity启动过程分析

    Android的四大组件中除了BroadCastReceiver以外,其他三种组件都必须在AndroidManifest中注册,对于BroadCastReceiver来说,它既可以在AndroidMa ...

  6. Spark Streaming应用启动过程分析

    本文为SparkStreaming源码剖析的第三篇,主要分析SparkStreaming启动过程. 在调用StreamingContext.start方法后,进入JobScheduler.start方 ...

  7. ActivityManagerService启动过程分析

    之前讲Android的View的绘制原理和流程的时候,讲到过在Android调用setContentView之后,Android调用了一个prepreTravle的方法,这里面就提到了Activity ...

  8. Disconf源码分析之启动过程分析下（2）

    接上文,下面是第二次扫描的XML配置. <bean id="disconfMgrBean2" class="com.baidu.disconf.client.Dis ...

  9. Service启动过程分析

    Service是一种计算型组件,用于在后台执行一系列的计算任务.由于工作在后台,因此用户是无法直接感知到它的存在.Service组件和Activity组件略有不同,Activity组件只有一种运行模式 ...

随机推荐

  1. 对WM_NCHITTEST消息的了解+代码实例进行演示（消息产生消息，共24个枚举值）

    这个消息比较实用也很关键,它代表非显示区域命中测试.这个消息优先于所有其他的显示区域和非显示区域鼠标消息.其中lParam参数含有鼠标位置的x和y屏幕坐标,wParam 这里没有用. Windows应 ...

  2. BZOJ 1037 [ZJOI2008]生日聚会Party

    1037: [ZJOI2008]生日聚会Party Time Limit: 10 Sec  Memory Limit: 162 MBSubmit: 1583  Solved: 936[Submit][ ...

  3. 第一个Windows程序

    今天,我们的任务就是和大家一起开发第一个Windows程序,这个程序的功能非常简单,就是弹出一个对话框,但是简单的程序可以帮助大家建立信心. 例1 第一个Windows程序 /* ********** ...

  4. HDU 2444 The Accomodation of Students（判断是否可图 + 二分图）

    题目大意:有一群人他们有一些关系,比如A认识B, B认识C, 但是这并不意味值A和C认识.现在给你所有互相认识的学生,你的任务是把所有的学生分成两个一组, 住在一个双人房里.相互认识的同学可以住在一个 ...

  5. T-SQL中return 返回语句学习

    return命令用于结束当前程序的执行,返回到上一个调用它的程序或其他程序,其语法格式如下: return   整数值或变量 return语句要指定返回值,如果没有指定返回值,SQL Server系统 ...

  6. Hat’s Words hdu-1247

    就是查找这个单词能不能有两个单词组成,简单的字典树题目 ////////////////////////////////////////////////////////////// #include& ...

  7. android学习之4种点击事件的响应方式

    如题,下面就一一列出对点击事件响应的4种方式: 第一种:内部类的形式: package com.example.dail; import android.net.Uri; import android ...

  8. .NET页面301跳转处理

    //301跳转Response.Status = "301 Moved Permanently";Response.AddHeader("Location", ...

  9. jQuery实现密保互斥问题

    密保互斥问题: 密保通常都会有n个问题,让用户选择其中2.3个,而且都不会让用户选择重复的问题.这就要求密保互斥. 效果如下: 下面我用了jquery实现密保互斥,用于解决密保,投票等类似互斥问题,可 ...

  10. Android学习笔记（十一）——从意图返回结果

    从意图返回结果 startActivity()方法调用还有一个活动,但并没有返回结果给当前活动.此时如想从一个活动中回传数据,就要使用startActivityForResult()方法. 点此获取完 ...