点击查看AngularJS系列目录
转载请注明出处：http://www.cnblogs.com/leosx/

Bootstrap(初始化)

这章介绍了Angular的初始化过程，以及如何在必要的时候，手动进行初始化Angular。

Angular <script> 标签
什么都不说，先来个例子。这个例子展示了Angular推荐的如何继承Angular和自动初始化Angular。

<!doctype html>

<html xmlns:ng="http://angularjs.org" ng-app>

  <body>

    ...

    <script src="angular.js">

  </body>

</html>

1. 我们应该讲Script标签放在页面底部。这样可以改善应用程序的加载时间。你可以从http://code.angularjs.org去获得最新的版本。

2. ng-app指示了你的Angular应用程序的根。如果你希望你的整个页面都是Angular应用程序，那么你可以把它放到<html>标签上。

3.如果你选择比较旧式的指令语法，例如：为了兼容IE低版本，你在html标签中使用命名空间(这个是个历史原因，我们是不推荐你使用命名空间的)。

自动初始化

如果引用了angular.js脚本，而且document.readyState为“complete”状态，那么AngularJS会在DOMContentLoaded事件中自动初始化。此时，Angular会先去查找 ng-app指令作为你的应用程序的根。如果Angular发现了 ng-app指令，那么它将：

1. 加载与这个指令相关的模块。

2. 创建应用程序注入器。

3. 编译器将ng-app指令作为一个根去编译为对应的DOM树。在这里，你就可以告诉Angular应用程序，把哪部分DOM编译为Angular应用程序的一部分。

<!doctype html>

<html ng-app="optionalModuleName">

  <body>

    I can add: {{ 1+2 }}.

    <script src="angular.js"></script>

  </body>

</html>

手动初始化(可以解决IE低版本浏览器问题)

如果你想要去控制Angular应用程序的初始化过程，那么你可以使用手动引导启动的方法。当然，你也可以使用一个手动启动器方法去代替掉原来的启动方法，手动初始化调用angular.bootstrap()方法。直接来一个例子吧！

<!doctype html>

<html>

<body>

  <div ng-controller="MyController">

    Hello {{greetMe}}!

  </div>

  <script src="http://code.angularjs.org/snapshot/angular.js"></script>

  <script>

    angular.module('myApp', [])

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

        $scope.greetMe = 'World';

      }]);

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

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

    });

  </script>

</body>

</html>

请注意，我们把我们的应用程序名称(上例中就是模块myApp的名称“myApp”)通过injector注入器注入到了angular.bootstrap方法中的第二个参数中去。需要注意的是，angular.bootstrap 它不动态去创建模块，所以当你把它当做参数传递的时候，你必须自己去创建你的模块。下面来看看另一个手动初始化Angular的例子：

你应该在你定义了和加载了你的module之后再去调用 angular.bootstrap() 方法。你不可以在angular.bootstrap() 调用之后再去增加controller, service, directives等等…

注意：当你手动启动你的应用程序的时候，你是不可以再去使用 ng-app 指令的。。

你的代码应该遵循这样的顺序：

1. 当你的所有文件，代码都加载完毕之后，去找到你的根元素(要作为Angular应用程序的那个元素)，通常，我们都是将文档(document)作为的我们的根。

2. 调用 angular.bootstrap，去编译为一个可以进行双向绑定的可执行的Angular应用程序。

延迟启动

这个特性允许类似Batarang的工具，和测试工具去钩住Angular的启动流程，然后偷偷的在模块的依赖注入器中，替换掉多个需要注入的参数的注入对象，也可增加一些需要注入的服务，还可以重新整理依赖关系。

如果将 window.name的值加上一个”NG_DEFER_BOOTSTRAP”前缀，当angular.bootstrap被调用的时候，启动过程会暂停，知道angular.resumeBootstrap() 方法被调用。

angular.resumeBootstrap() 方法接受一个可选的数组，用来指示哪些模块应该被添加到原始应用程序的启动器中。

AngularJS -- Bootstrap(启动器)的更多相关文章

AngularJS -- Bootstrap(启动器)(转载)
AngularJS -- Bootstrap(启动器) 点击查看AngularJS系列目录转载请注明出处:http://www.cnblogs.com/leosx/ Bootstrap(初始化) ...
AngularJS Bootstrap
AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...
Play1+angularjs+bootstrap ++ (idea + livereload)
我的web开发最强组合:Play1+angularjs+bootstrap ++ (idea + livereload) 时间 2012-12-26 20:57:26 Freewind.me原文 ...
AngularJS进阶(六)AngularJS+BootStrap实现弹出对话框
AngularJS+BootStrap实现弹出对话框参考资料: http://angular-ui.github.io/bootstrap/#/modal https://www.zybuluo.c ...
【17】AngularJS Bootstrap
AngularJS Bootstrap AngularJS 的首选样式表是 Twitter Bootstrap, Twitter Bootstrap 是目前最受欢迎的前端框架. Bootstrap 你 ...
1.Tomcat组件梳理—Bootstrap启动器
Tomcat组件梳理-Bootstrap启动器一开始是直接从Server开始做梳理的,但是发现有很多东西是从Catalina传输过来的,Catalina又是从Bootstrap启动的,所以还是回过头 ...
Salesforce + AngularJS + Bootstrap
也可以分成三步: 1. 添加css和js引用: <apex:stylesheet value="https://maxcdn.bootstrapcdn.com/bootstrap/3. ...
前端MVC学习总结（四）——NodeJS+MongoDB+AngularJS+Bootstrap书店示例
这章的目的是为了把前面所学习的内容整合一下,这个示例完成一个简单图书管理模块,因为中间需要使用到Bootstrap这里先介绍Bootstrap. 示例名称:天狗书店功能:完成前后端分离的图书管理功能 ...
AngularJs+bootstrap搭载前台框架——准备工作
1.关于什么是AngularJs以及什么是bootstrap我就不多说了,简单说下,AngularJs是一个比较强大前台MVC框架,bootstrap是Twitter推出的一个用于前端开发的开源工具包 ...

随机推荐

hdu 3966 Aragorn's Story（树链剖分+树状数组/线段树）
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3966 题意: 给出一棵树,并给定各个点权的值,然后有3种操作: I C1 C2 K: 把C1与C2的路 ...
mongodb菜鸟整理
一,mongodb的安装与连接从官网下载后,解压或者安装到某个目录下 1 首先需要自己创建一个db文件夹 ,用于存放数据库的数据然后还需要创建一个log文件夹,里面需要自己创建一个mongodb ...
DB Error || Warning
数据库在进行增删改查时有时候会发生错误,当在程序中一个操作总是不起作用的时候,我们可以尝试如下方法: 1.输出sql语句,有的sql语句可能是通过一些字符拼接完成的,这时候可能会发生'', +之类的混 ...
Serializable序列化的作用
这里转载一篇讲解java序列化(Serializable)和反序列化方面的感觉很好的文章.1.序列化是干什么的?简单说就是为了保存在内存中的各种对象的状态(也就是实例变量,不是方法),并且可以把保存的 ...
[转载]Word直接发布新浪博客（以Word 2013为例）
原文地址:Word直接发布新浪博客(以Word 2013为例)作者:paulke2011 注意:这篇博客直接由Word 2013发出!这虽然也算是一个教程,但更多的是一个试验品. 老早就知道Word有 ...
团队作业10——项目复审与事后分析（Beta阶段）
一.Beta阶段项目复审 http://www.cnblogs.com/womenshuodedoudui/p/7001208.html 二.事后诸葛分析 http://www.cnblogs.com ...
201521123091 《Java程序设计》第14周学习总结
Java 第十四周总结第十四周的作业. 目录 1.本章学习总结 2.Java Q&A 3.码云上代码提交记录及PTA实验总结 4.课后阅读 1.本章学习总结以你喜欢的方式(思维导图或其他) ...
1st_homework_SE--四则运算题目生成器
0x00 Code 查询源代码及README请点此 0x01 需求分析实现一个自动生成小学四则运算题目的命令行程序. 0x02 功能设计主要功能为: 接受用户输入以便知道要出多少道题目python ...
团队作业6--展示博客（Alpha版本）
1.团队成员简介和个人博客地址团队源码仓库地址:https://git.coding.net/tuoxie/dianziwendangchachong.git吕志哲 201421123021 个人博 ...
控制结构(10) 指令序列(opcode)
// 上一篇:管道(pipeline) 发现问题在一个正式项目的开发周期中,除了源代码版本控制外,还存在着项目的配置/编译/打包/发布等各种高频但非"核心"的脚本代码.职业程序员 ...

AngularJS -- Bootstrap(启动器)