Angular的启动分为手动和自动两种。

自动启动

　　定义模块的例子中，采用的就是自动的方式：通过内置的指令ngApp 来指定启动时加载的模块。<html ng-app="myApp">

根据官方文档，Angular的自动初始化发生在两个时机：

1、响应DOMContentLoaded事件（页面文档完全加载并解析完毕后会触发该事件，不会等待图片、样式文件）

2、document.readyState的值为'complete'。（兼容IE8，页面完全加载，相当于load事件触发）

这时，Angular会调用angularInit方法进行初始化，首先查找ngApp directive，该directive指定了应用程序的根结点，通常位于初始页面的<html>标记上。当然，ngApp如果位于某个子结点（如div元素），则可以将Angular应用程序限制在DOM树的一部分上。如果Angular找到了ngApp，则会调用bootstrap方法开始启动过程，主要工作如下：

  1. 加载ngApp指定的模块
  2. 创建应用程序的依赖注入对象（injector）。此时$compile，$rootScope会被注入，用于后续的compile过程。有关依赖注入过程有后文。
  3. 以ngApp为根结点，compile整个DOM树。有关compile过程，在后续文章中详谈。

手动启动

　　有些情况下，开发者需要在初始化阶段做些额外的配置或控制，比如include一些模块或者需要在compile过程之前完成一些工作。这就需要手动启动。手动启动通过angular.bootstrap方法。一个例子如下：

<script>

angular.module('myApp', [])

.controller('MyController', ['$scope', function ($scope) {

}]);

angular.element(document).ready(function() {

angular.bootstrap(document, ['myApp']);

});

</script>

该方法的第一个参数指定了Angular应用所在的根DOM元素；

第二个参数定义了需要依赖加载的模块（相当于ngApp），该模块必须事先定义完成（包括其controller，directive等组件），bootstrap方法不会定义该模块。

（该方法还有第三个参数，参见这里）。一个Anuglar应用一旦启动，就不能再添加controller, service等组件。

值得注意的是：

  • angular.bootstrap只会绑定第一次加载的对象。
  • 后面重复的绑定或者其他对象的绑定，都会在控制台输出错误提示。

【angularJS】启动（bootstrap）机制的更多相关文章

  1. AngularJS 启动执行过程

    一.浏览器下载HTML/CSS/JavaScript等 当你转到一个页面地址后,浏览器先回下载这个HTML,同时,会开启一些辅助线程下载所关联的script标签和link标签里引用的文件. 二.浏览器 ...

  2. Angularjs启动入口， splash画面，与加快启动的技巧

    Angularjs启动入口, splash画面,与加快启动的技巧 Angularjs启动入口 * 自动响应DOMContentLoaded event * 从ngApp指定的入口启动: 在angula ...

  3. Angularjs与bootstrap.datetimepicker结合实现日期选择器

    http://www.lovelucy.info/angularjs-best-practices.html http://damoqiongqiu.iteye.com/blog/1917971 ht ...

  4. Linux开机启动(bootstrap)上

    Linux开机启动(bootstrap)   作者:Vamei 出处:http://www.cnblogs.com/vamei 欢迎转载,也请保留这段声明.谢谢! 计算机开机是一个神秘的过程.我们只是 ...

  5. AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能

    AngularJs + angular-ui-router + bootstrap 实现blog基础导航功能 核心代码如下 1.index.html <!DOCTYPE html> < ...

  6. AngularJS 脏检查机制

    脏检查是AngularJS的核心机制之一,它是实现双向绑定.MVVM模式的重要基础. 一.digest循环 AngularJS将双向绑定转换为一个堆watch表达式,然后递归检查这些watch表达式的 ...

  7. 手写AngularJS脏检查机制

    什么是脏检查 View -> Model 浏览器提供有User Event触发事件的API,例如,click,change等 Model -> View 浏览器没有数据监测API. Ang ...

  8. AngularJS中bootstrap启动

    对于一般的使用者来说,AngularJS的ng-app都是手动绑定到某个dom元素.但是在一些应用中,这样就显得很不方便了 绑定初始化 通过绑定来进行angular的初始化,会把js代码侵入到html ...

  9. 新建一个angularjs+requirejs+bootstrap+typescript+gulp+vscode+git的项目

    环境 windows 10 准备工具 Visual Studio Code Node.js Git 需求 必须支持IE8 步骤开始: 执行命令行工具 mkdir Demo && cd ...

  10. angularjs封装bootstrap官网的时间插件datetimepicker

    背景:angular与jquery类库的协作 第三方类库中,不得不提的是大名鼎鼎的jquery,现在基本上已经是国内web开发的必修工具了.它灵活的dom操作,让很多web开发人员欲罢不能.再加上已经 ...

随机推荐

  1. canvas drawimage绘制图像出错（默认canvas300*150）解决办法

    今天在开发中,再一次踩了以前踩过的坑,写完程序在这里写一下,分享给大家也避免再次遇坑. //默认的canvas <canvas id ="canvas"></ca ...

  2. linux定时任务php

    1. 在需要定时执行的PHP文件的第一行加 #! /usr/local/php/bin/php          服务器php.exe的位置 2. 上传要定时执行的php文件到一个位置,可以通过/pa ...

  3. (转)全面认识一下.NET 4的缓存功能

    很多关于.NET 4.0新特性的介绍,缓存功能的增强肯定是不会被忽略的一个重要亮点.在很多文档中都会介绍到在.NET 4.0中,缓存功能的增强主要是在扩展性方面做了改进,改变了原来只能利用内存进行缓存 ...

  4. python中enumerate（）函数用法

    python中enumerate()函数用法 先出一个题目:1.有一 list= [1, 2, 3, 4, 5, 6]  请打印输出:0, 1 1, 2 2, 3 3, 4 4, 5 5, 6 打印输 ...

  5. WPF：自定义ListBox的选择样式

    首先介绍一种简单地方法:就是通过自定义SystemColors类的参数来自定义WPF ListBox选择颜色的, SystemColors的HighlightBrushKey和HighlightTex ...

  6. c# 计算中文字节数与JAVA不符的解决方法

    c# 中方法 string str = "中华人民共和国"; int strLen = System.Text.Encoding.Default.GetByteCount(str) ...

  7. Windows下查看占用端口程序

    配置shadowsocks,发现本地1080端口被占用,当然更改没有占用的端口即可.当然还得查找下什么程序占用的.无奈,看了下115浏览器占用此端口,浏览器不能管啊,你懂得!!! Windows查找下 ...

  8. iptables详解（14）：iptables小结之常用套路

    不知不觉,已经总结了13篇iptables文章,这些文章中有一些需要注意的地方. 此处,我们对前文中的一些注意点进行总结,我们可以理解为对"常用套路"的总结. 记住这些套路,能让我 ...

  9. addEventListener 和 onclick 简单比较

    首先说一下addEventListener 语法: element.addEventListener(event, function, useCapture) 这里的event是事件名,functio ...

  10. Jxl的API概述（转）

    一.Jxl的API Jxl的API主要有三个包,jxl,jxl.format,jxl.write.如果单独的分析API,可能对于更明确的了解此API没有太多的帮助,我们还是从Excel文件的层次来剥离 ...