AngularJS权威教程 第2章 数据绑定和第一个 AngularJS Web应用
AngularJS权威教程 第2章 数据绑定和第一个 AngularJS Web应用
Hello World
学习任何一门开发语言，都是从Hello World开始的，这种无法言语的操蛋心情，大家都懂，但是一个简易的应用能够最直接的
展现他的功能，这个无法否决。吐槽一下，代码如下。。。
<!doctype html>
<html ng-app>
<head>
<title>Simple App</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.3.9/angular.min.js"></script>
</head>
<body>
<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{ name }}</h1>
</body>
</html>
教程中给出的引入js的链接https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js已被强，上面的是在网上找的还能用的链接，需要angular脚本的可以给我留言附上邮箱发给你。
用浏览器(最好是FireFox或者是Chrome，不知道是我的IE版本问题还是不支持，我用IE打开是有问题的)直接打开页面，文本框中输入World，效果如图
1.1.核心功能的体现——数据绑定
有前端书写经验的都清楚，在传统Web框架中，浏览器是解释执行的，即在页面加载过程中，只渲染出模型暴露出的数据，形成
一个静态页面。如果想实现如上的功能，某个DOM对象值得改变立刻体现在页面中必须写js脚本，虽然不复杂，但是如果页面上这
种诉求很多的话也会很头疼吧。
AngularJS则采用了完全不同的解决方案。它创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。任何一个独立
视图组件中的值都是动态替换的。这个功能可以说是AngularJS中最重要的功能之一，也是让我们只用10行代码，并且在没有任何
JavaScirpt的情况下就可以写出Hello World的关键。
要实现这个功能，只要在HTML页面中引用angular.js，并在某个DOM元素上明确设置ng-app属性即可。ng-app属性声明所有
被其包含的内容都属于这个AngularJS应用，这也是我们可以在Web应用中嵌套AngularJS应用的原因。只有被具有ng-app属性的
DOM元素包含的元素才会受AngularJS影响。
自动数据绑定使我们可以将视图理解为模型状态的映射。当客户端的数据模型发生变化时，视图就能反映出这些变化，并且不需
要写任何自定义的代码，它就可以工作。
当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。如果该值从上次事件循环运行
之后发生了变化，则该值被认为是“脏”值。这也是Angular可以跟踪和响应应用变化的方式。
这个事件循环会调用$digest()循环，这个过程被称作脏检查（dirty checking）。脏检查是检查数据模型变化的有效手段。当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查来保证数据的一致性。
借助AngularJS，不需要构建复杂和新的JavaScript功能，就可以在视图中实现类自动同步的机制。
【注】为了表示内部和内置的库函数，Angular使用$预定义对象。尽管这类似于全局的jQuery对象$，但它们是完全无关的。只
要遇到$符号，你都可以只把它看作一个Angular对象。
1.2.简单的数据绑定
审阅一下上面写的代码，我们使用ng-model指令将内部数据模型对象（$scope）中的name属性绑定到了文本输入字段上。
这意味着无论在文本输入字段中输入了什么，都会同步到数据模型中。
数据模型对象（model object）是指$scope对象。$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可
以同控制器进行交互。
双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了
某个值，视图也会依据变化重新渲染。
在输入字段上使用ng-model指令来实现数据绑定，如下所示：
<span style="font-family:Microsoft YaHei;font-size:14px;"> <input ng-model="person.name" type="text" placeholder="Your name">
<h1>Hello {{ person.name}}</h1></span>
以上表示在数据模型对象$scope中绑定一个对象person，输入框的值为person.name，输入框的值变化时即$scope.person的值发生变化，展示在页面上
1.3.时钟案例
html：
<!doctype html>
<html ng-app>
<head>
<title>Clock Example</title>
<script src="http://apps.bdimg.com/libs/angular.js/1.2.6/angular.min.js"></script>
</head>
<body>
<div ng-controller="MyController">
<h5>Hello {{ clock.now }}</h5>
</div>
<script src="js/app.js"></script>
</body>
</html>
app.js
function MyController($scope) {
$scope.clock = {
now: new Date()
};
var updateClock = function() {
$scope.clock.now = new Date();
};
setInterval(function() {
$scope.$apply(updateClock);
}, 1000);
updateClock();
}
效果如图：
实践经验：
由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中通过对象的属性而非对象本身来进行引
用绑定，是Angular中的最佳实践。