AngularJS开发指南2：AngularJS初始化过程
自动初始化
请将ng-app指令放到你应用的标签节点中, 如果你想要AngularJS自动执行整个<html>程序就把它放在 <html> 标签中。比如：<html ng-app>
AngularJS会在DOMContentLoaded事件触发时执行，并通过ng-app指令寻找你应用的根作用域。如果 ng-app指令找到了，那么AngularJS将会：
（1）载入指令相关的模块。这里指的是optionalModuleName模块。
（2）创建应用的“注入器(injector)”。
（3）拥有ng-app 指令的标签为根节点来编译其中的DOM。
<!doctype html>
<html ng-app="optionalModuleName">
<body>
I can add: {{ 1+2 }}.
<script src="angular.js"></script>
</body>
</html>
手动初始化
如果你需要主动控制一下初始化的过程，你可以使用手动执行引导程序的方法。
<!doctype html>
<html xmlns:ng="http://angularjs.org">
<body>
Hello {{'World'}}!
<script src="http://code.angularjs.org/angular.js"></script>
<script>
angular.element(document).ready(function() {
angular.bootstrap(document);
});
</script>
</body>
</html>
等页面和所有的脚本加载完之后，找到HTML模板的根节点——通常就是文档的根节点。
调用 angular.bootstrap方法，将模板编译成可执行的、数据双向绑定的应用程序。
HTML编译器
HTML在编写静态页面时，有很多声明式的结构来控制格式。比如你要把某个内容居中，你只需要添加一个 align="center" 的属性给需要内容居中的元素就行了。这就是声明式语言的强大之处。
但是声明式语言也有力所不能及的地方，原因之一在于你不能用它来让浏览器识别新的语法。比如说，你不要内容居中，而是居左到1/3,这时它就做不到了。所以我们需要一个办法让浏览器能学会新的HTML语法。
AngularJS的HTML编译器能让浏览器识别新的HTML语法。它能让你将行为关联到HTML元素或者属性上，甚至能让你创造具有自定义行为的新元素。AngularJS称这种行为扩展为“指令”。
编译器是AngularJS提供的一项服务，它通过遍历DOM来查找和它相关的属性。整个编译的过程分为两个阶段。
编译： 遍历DOM并且收集所有的相关指令，生成一个链接函数。
链接： 给指令绑定一个作用域，生成一个动态的视图。作用域模型的任何改变都会反映到视图上，并且视图上的任何用户操作也都会反映到作用域模型。这使得作用域模型成为你的业务逻辑里唯一要关心的东西。
有一些指令，比如ng-repeat会为数据集合里的每一项都克隆一次对应的DOM元素。将整个编译过程分为编译和链接两个阶段的作法改善了整体的性能，因为克隆出来的模板总共只需要被编译一次，然后链接到各自的模型实例上就行了。
指令指示的是“当关联的HTML结构进入编译阶段时应该执行的操作”。指令可以写在元素的名称里，属性里，css类名里，注释里。下面有几个功能相同的使用ng-bind指令的例子。
<span ng-bind="exp"></span>
<span class="ng-bind: exp;"></span>
<ng-bind></ng-bind>
<!-- directive: ng-bind exp -->
指令本质上只是一个当编译器编译到相关DOM时需要执行的函数。
下面是一条能让元素变得可拖拽的指令。注意<span>元素里的那个draggable属性。
<!doctype html>
<html ng-app="drag">
<head>
<script src="http://code.angularjs.org/angular-1.1.0.min.js"></script>
<script>
angular.module('drag', []).directive('draggable', function($document) {
var startX=0, startY=0, x = 0, y = 0;
return function(scope, element, attr) {
element.css({
position: 'relative',
border: '1px solid red',
backgroundColor: 'lightgrey',
cursor: 'pointer'
});
element.bind('mousedown', function(event) {
startX = event.screenX - x;
startY = event.screenY - y;
$document.bind('mousemove', mousemove);
$document.bind('mouseup', mouseup);
}); function mousemove(event) {
y = event.screenY - startY;
x = event.screenX - startX;
element.css({
top: y + 'px',
left: x + 'px'
});
} function mouseup() {
$document.unbind('mousemove', mousemove);
$document.unbind('mouseup', mouseup);
}
}
});
</script>
</head>
<body>
<span draggable>Drag ME</span>
</body>
</html>
通过加入draggable属性可以让任何HTML元素都实现这个新的行为。我们这种改进的优美之处在于我们给了浏览器新能力。我们用了一种只要开发者熟悉HTML规则，就会很自然的扩展浏览器理解新行为新语法的能力。
angular视图
网上有很多的模板系统，比如handlerbars。他们大多数都是“将静态的字符模板和数据绑定，生成新字符，然后通过innerHTML插入到页面元素中”。这意味着数据上的任何改变，都会导致数据要重新和模板结合生成新字符，再插入到DOM里。
AngularJS则不同，AngularJS编译器使用的是带指令的DOM，而不是字符串模板。它返回的是一个链接函数，这个函数和作用域模型结合就会生成一个动态视图。这个视图和模型的绑定过程是“透明的”。开发者不需要做任何关于更新视图的工作。并且应用程序也没有用到innerHTML。更特别的是，Angular的指令不仅仅能使用字符串形式的绑定，还可以使用一些指示行为的结构体，比如：ng-repeat。
加油！
AngularJS开发指南2：AngularJS初始化过程的更多相关文章
- AngularJS开发指南16：AngularJS构建大型Web应用详解
AngularJS是由Google创建的一种JS框架,使用它可以扩展应用程序中的HTML功能,从而在web应用程序中使用HTML声明动态内容.在该团队工作的软件工程师Brian Ford近日撰写了一篇 ...
- AngularJS开发指南1：AngularJS简介
什么是 AngularJS? AngularJS 是一个为动态WEB应用设计的结构框架.它能让你使用HTML作为模板语言,通过扩展HTML的语法,让你能更清楚.简洁地构建你的应用组件.它的创新点在于, ...
- AngularJS开发指南8：AngularJS模块的详解
在讲angularjs的模块之前,我们先介绍一下angular的一些知识点: AngularJS是纯客户端技术,完全用Javascript编写的.它使用的是网页开发的常规技术(HTML,CSS,Jav ...
- AngularJS开发指南4：指令的详解
指令是我们用来扩展浏览器能力的技术之一.在DOM编译期间,和HTML元素关联着的指令会被检测到,并且被执行.这使得指令可以为DOM指定行为,或者改变它. AngularJS有一套完整的.可扩展的.用来 ...
- AngularJS开发指南12：AngularJS的模板，CSS，数据绑定详解
模板 AngularJS模板是一种声明式的规则.它包含了模型和控制器的信息,最后会被渲染成用户在浏览器中看到的视图.它是静态的DOM,包含HTML,CSS和AngularJS指定的元素和属性.Angu ...
- AngularJS开发指南14：AngularJS的服务详解
服务是一种由服务器端带到客户端的特性,它由来已久.AngularJS应用中的服务是一些用依赖注入捆绑在一起的可替换的对象.服务是最常和依赖注入一起用的,它也是AngularJS中的关键特性. 接下来, ...
- AngularJS开发指南13：AngularJS的过滤器详解
AngularJS过滤器是用来格式化输出数据的.除了格式化数据,过滤器还能修改DOM.这使得过滤器通常用来做些如“适时的给输出加入CSS样式”等工作. 比如,你可能有些数据在输出之前需要根据进行本地化 ...
- AngularJS开发指南11：AngularJS的model，controller，view详解
model model这个词在AngularJS中,既可以表示一个(比如,一个叫做phones的model,它的值是一个包含多个phone的数组)对象,也可以表示应用中的整个数据模型,这取决于我们所讨 ...
- AngularJS开发指南15：AngularJS的创建服务，将服务注入到控制器，管理服务依赖详解
创建服务 虽然AngularJS提供了很多有用的服务,但是如果你要创建一个很棒的应用,你可能还是要写自己的服务.你可以通过在模块中注册一个服务工厂函数,或者通过Module#factory api或者 ...
随机推荐
- Js脚本选取iframe中的元素
遇到个小问题,需要用到原生Js处理页面中的元素,以往一个document.getElementById就完活的选取元素,这次却不好使了.. 仔细看代码发现要选取元素外面多了一个iframe标签 < ...
- 学习嵌入式Linux-选择iTOP-4412开发板
部分视频观看地址: [视频教程]iTOP-4412开发板之学习方法--致初学者 http://v.youku.com/v_show/id_XNzQ5MDA4NzM2.html [视频教程]三星Exyn ...
- Shell basic1
A shell script is a text file that typically begins with a shebang, as follows: #!/bin/bash /bin/bas ...
- perl学习笔记
一.正则表达式 匹配一个文件中的某个单词,并打印出来 #!/usr/bin/perl use strict; use warnings; ; open(FILE, "< temp.pl ...
- OpenCV的安装与系统环境变量
OpenCV的安装与系统环境变量 安装OpenCV本来是很简单的一件事,但配置却很麻烦.而且在配置过程中尤为重要的步骤就是系统环境变量的配置.我使用的是CodeBlick13.12与OpenCV1.0 ...
- POJ 1364 King --差分约束第一题
题意:求给定的一组不等式是否有解,不等式要么是:SUM(Xi) (a<=i<=b) > k (1) 要么是 SUM(Xi) (a<=i<=b) < k (2) 分析 ...
- GitHub Top 100的Android开源库
摘要: 本项目主要对目前 GitHub 上排名前 100 的 Android 开源库进行简单的介绍, 至于排名完全是根据GitHub搜索Java语言选择「Best M... 本项目主要对目前 GitH ...
- MySQL数据库学习笔记（十二）----开源工具DbUtils的使用（数据库的增删改查）
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/4 ...
- Android 多线程----AsyncTask异步任务详解
[声明] 欢迎转载,但请保留文章原始出处→_→ 生命壹号:http://www.cnblogs.com/smyhvae/ 文章来源:http://www.cnblogs.com/smyhvae/p/3 ...
- 搭建WP8开发环境
开发环境 VS2012旗舰版 遇到的问题 安装WP SDK8.0出错提示: 根据当前系统时钟或签名文件中的时间戳验证时要求的证书不在有效期内 解决办法 方法一:把操作系统的时间日期调整到系统的安装日期 ...