http://my.oschina.net/fuckBAT/blog/375579

Angular的编译机制允许开发人员给浏览器添加新的Html语法，允许我们添加一些html节点，attribute，甚至创建一些自定义的节点，attribute。Angular把这些行为的扩展成为指令directives.Angular带来了有用的directive，并允许我们创建特定领域的directive。

一、Angular初始化的过程

如何在你有需要的时候对Angular进行手工初始化。

二、Angular <script> 标签

<!doctype html>

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

<body>

...

<script src="angular.js">

</body>

</html>

· 将sciprt标签放置于页面底部。这样做能避免因为加载angular.js而阻挡HTML的加载，从而降低应用的加载时间。我们可以在http://code.angularjs.org中获取到最新版本的angularJs。出于安全考虑，切勿在产品中直接引用这个地址来加载脚本。但如果仅仅是研究学习使用的话，直接连接也无妨。

· 选择：angular-[version].js 是方便阅读的一个版本，适合日常开发、调试使用。

· 选择：angular-[version].min.js 是压缩、混淆后的版本，适合最终产品使用。

· 放置”ng-app”到应用的根节点中，如果你想让angular自动启动你的应用，通常可以放置于<html>标签中。

三、自动初始化

Angular会在DOMContentLoaded事件中自动初始化，Angular会找出由你通过ng-app这个directive指定的应用根节点。如果找到，Angular会做以下事情：

加载与module相关的directive。

创建应用相关的injector（依赖管理器）。

以ng-app指定根节点，开始对DOM进行相关“编译”工作。换言之，可以将页面的其中一部分（非<html>）作为根节点，从而限制angular的作用范围

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Bootstrap-auto</title>

<style type="text/css">

.ng-cloak {

display: none;

}

</style>

</head>

<body>

这里是ng-app外面的~~{{1+2}}

<div ng-app>这里是ng-app里面~~~{{1+3*2}}</div>

<script src="../angular-1.0.1.js" type="text/javascript"></script>

</body>

</html>

注：里面的”ng-cloak”，这个是用于在angular.js编译完成之前（对！没错！是编译完成之前，不是angularjs加载完成之前。所以，如果想很好地避免这个情况，最好的办法是优化应用的加载流程，或者结合css对未编译的模版进行处理。而由于那万恶的ie6、7不支持属性选择器，所以最好使用class=”ng-cloak”的方式。编译完成后，这个class或属性会被删除。）隐藏模版，避免在页面显示原模版。

四、手工初始化

如果我们想进一步控制初始化进程(例如你需要通过script loader加载angular.js或者在angular编译页面前做一些操作)，那么我们可以用一个手工调用的启动方法去代替。

以下例子等同于使用ng-app这个directive：

<!DOCTYPE HTML>

<html>

<head>

<meta charset="UTF-8">

<title>Bootstrap-manual</title>

<style type="text/css">

.ng-cloak {

display: none;

}

</style>

</head>

<body>

这里是ng-app外面的~~{{1+2}}

<div id="rootOfApp">这里是ng-app里面~~~{{1+3*2}}</div>

<script src="../angular-1.0.1.js" type="text/javascript"></script>

<script type="text/javascript">

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

angular.bootstrap(angular.element(document.getElementById("rootOfApp")));

});

</script>

</body>

</html>

就是说，我们的代码可以按照以下步骤编写：

1. 在页面和其他代码加载完成后，找到应用模版的根节点；

2. 调用angular.bootstrap，让angular去将模版编译为一个可执行的，双向绑定的应用！这里的angular.bootstrap(element,[ modules])是一个编译命令，[modules]貌似不用写，这个问题随后会更新

Angularjs学习笔记11_手工初始化的更多相关文章

  1. AngularJS学习笔记2——AngularJS的初始化

    本文主要介绍AngularJS的自动初始化以及在必要的适合如何手动初始化. Angular <script> Tag 下面通过一小段代码来介绍推荐的自动初始化过程: <!doctyp ...

  2. AngularJs学习笔记--bootstrap

    AngularJs学习笔记系列第一篇,希望我可以坚持写下去.本文内容主要来自 http://docs.angularjs.org/guide/ 文档的内容,但也加入些许自己的理解与尝试结果. 一.总括 ...

  3. AngularJs学习笔记--directive

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/directive Directive是教HTML玩一些新把戏的途径.在DOM编译期间,directiv ...

  4. AngularJs学习笔记--Using $location

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/dev_guide.services.$location 一.What does it do? $loc ...

  5. AngularJs学习笔记--Modules

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/module 一.什么是Module? 很多应用都有一个用于初始化.加载(wires是这个意思吗?)和启 ...

  6. AngularJs学习笔记--Dependency Injection（DI，依赖注入）

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/di 一.Dependency Injection(依赖注入) 依赖注入(DI)是一个软件设计模式,处理 ...

  7. AngularJs学习笔记--Understanding the Controller Component

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model 在angular中,controller是一个javasc ...

  8. AngularJs学习笔记--Understanding Angular Templates

    原版地址:http://docs.angularjs.org/guide/dev_guide.mvc.understanding_model angular template是一个声明规范,与mode ...

  9. AngularJs学习笔记--Forms

    原版地址:http://code.angularjs.org/1.0.2/docs/guide/forms 控件(input.select.textarea)是用户输入数据的一种方式.Form(表单) ...

随机推荐

  1. (转)解析json xml

    JSON数据 {"videos":[{"id":1,"image":"resources/images/minion_01.png ...

  2. [P2397] yyy loves Maths VI (mode)

    Link: P2397 传送门 Solution: (1)在这里记录一个小小的黑科技:摩尔投票法 (线性时间复杂度,$O(1)$的空间复杂度求众数) 从数组的第一个元素开始,假定它代表的群体的人数是最 ...

  3. Ubuntu 16.04下使用UNetbootin制作的ISO镜像为U盘启动出现：Missing Operating System (mbr.bin)

    通过以下方式进行排查: 1.确定U盘是否真的有启动系统 2.分区是否已经标记为激活状态,尤其使用了Fdisk进行分区时,如果分区>=2时默认是不设置激活分区. 比如下面是通过Fdisk进行设置分 ...

  4. gitk图形界面中文乱码情况

    当打开gitk图形界面时,文件中的中文部分乱码了,这大部分是因为编码格式的问题,为了跟上时代的脚步,本人建议都是用utf-8编码. 为了方便,我将全局配置为utf-8编码: git config -- ...

  5. Swift，闭包

    闭包(相当于匿名函数)的几种情况 利用sorted()排序方法来进行示例 1.sorted()正常引用的情况 var str=["d","a","c& ...

  6. C#属性和字段区别、get与set用法

    属性和字段的区别 在C#中,我们可以非常自由的.毫无限制的访问公有字段,但在一些场合中,我们可能希望限制只能给字段赋于某个范围的值.或是要求字段只能读或只能写,或是在改变字段时能改变对象的其他一些状态 ...

  7. Swing：LookAndFeel 教程第一篇——手把手教你写出自己的 LookAndFeel

    本文是 LookAndFeel 系列教程的第一篇. 是我在对 Swing 学习摸索中的一些微薄经验. 我相信,细致看全然系列之后.你就能写出自己的 LookAndFeel. 你会发现 Swing 原来 ...

  8. s3c6410 Linux 驱动开发环境搭建

    s3c6410 Linux 驱动开发环境搭建 -- 既然你是做Linux开发的,你还用虚拟机? 非常多人都在win下做开发,于是SD_writer.exe之类的烧写工具"大行其道" ...

  9. LVS负载均衡之NAT模式部署

    1.LVS的NAT模式介绍 参考自官网:http://www.linuxvirtualserver.org/zh/lvs3.html 由于IPv4中IP地址空间的日益紧张和安全方面的原因,很多网络使用 ...

  10. 转：【AI每日播报】从TensorFlow到Theano：横向对比七大深度学习框架

    http://geek.csdn.net/news/detail/139235 说到近期的深度学习框架,TensorFlow火的不得了,虽说有专家在朋友圈大声呼吁,不能让TensorFlow形成垄断地 ...