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. 外层页面与iframe相互调用的方法

    iframe调用外层页面的方法: parent.func(); 外层页面调用里面的iframe中的内容方法:  $("iframe").contents().find(" ...

  2. nodejs pm2配置使用

    nodejs pm2配置使用教程参考链接:http://www.111cn.net/sys/linux/100927.htm 安装步骤: yum -y install npmnpm install - ...

  3. day19 Models补充+缓存+信号+序列化+分析抽屉页面

    参考链接: http://www.cnblogs.com/wupeiqi/articles/5237704.html http://www.cnblogs.com/wupeiqi/articles/5 ...

  4. 【Wannafly挑战赛9-A】找一找

    链接:https://www.nowcoder.net/acm/contest/71/A 题目描述 给定n个正整数,请找出其中有多少个数x满足:在这n个数中存在数y=kx,其中k为大于1的整数 输入描 ...

  5. SSM整合RocketMQ

    前言 RocketMQ是一个由阿里巴巴开源的消息中间件,脱胎于阿里内部使用的MetaQ,本文主要是写个小例子演示一下消息从生产到消费的过程. RocketMQ下载和安装 下载地址 http://roc ...

  6. SQL语句往Oracle数据库中插入日期型数据（to_date的用法）

    Oracle 在操作数据库上相比于其他的 T-sql 有微小的差别,但是在插入时间类型的数据是必须要注意他的 to_date 方法,具体的情况如下: --SQL语句往Oracle数据库中插入日期型数据 ...

  7. bzip2压缩 解压缩

    压缩/解压缩压缩/解压缩之后的文件名称 必须是bz2 首先是  -z   压缩文件-d 解压缩!

  8. SpringXML方式配置bean的生存范围Scope

    在一个bean的配置里面可以指定一个属性Scope,也就是bean的范围,bean的生命周期. Scope可取的值5种:singleton(默认).prototype.request.session. ...

  9. 生产者与消费者的Java实现

    首先创建maven工程,需要引入的包: <dependencies> <dependency> <groupId>org.apache.kafka</grou ...

  10. apache+php 字符编码问题解决

    如果你在网上搜索 “apache配置”,搜到的页面大多都会建议你在httpd.conf中加上这么一句:AddDefaultCharset GB2312.对于新手而且是只用GB2312编码的开发人来说, ...