HelloWorld和数据绑定
目录导读：
前言：
好记性不如烂键盘，随笔就是随手笔记，希望以后有用。
本篇目录：
1. Hello World
3. 简单的数据绑定
4. 数据绑定的最佳实践
1. Hello World
写一个Hello World的应用是咱们接触任何一个语言的基本途径，AngularJS也是如此。
随着学习的深入，我们会逐渐深入到AngularJS的内部原理中，现在，废话不多说，开始咱们的Hello World。
这里我使用的JetBrains的WebStorm，打开WebStorm，选择“Create New Project”创建新项目：
然后我们选择“Empty Project”新建一个空项目，选择项目存储路径，点击确定按钮即可：
然后从AngularJS官网下载AngularJS库，并将其添加到项目中：
新建一个HTML页面，代码如下：
1 <!DOCTYPE html>
2 <html ng-app>
3 <head>
4 <meta charset="UTF-8">
5 <title>Hello World</title>
6 <script src="../script/angular.min.js"></script>
7 </head>
8 <body>
9 <input type="text" ng-model="name" placeholder="请输入您的姓名...">
10 <h1>Hello, {{name}} !</h1>
11 </body>
12 </html>
预览效果如下：
虽然这个例子没什么意思，不怎么高大上，但是它展示了AngularJS最基本也是最令人印象深刻的功能之一：数据绑定。
2. AngularJS中的数据绑定
在Rails等传统的Web框架中，控制器将多个模型中的数据和模板组合在一起形成视图，并将其提供给用户，这个组合过程会产生一个单向视图。
如果没有创建任何自定义的JavaScript组件，视图只会体现它渲染时模型暴露出的数据。
AngularJS则采用了完全不同的解决方案，它创建实时模板来代替视图，而不是将数据合并进模板之后更新DOM。
任何一个独立视图组件中的值都是动态替换的，这个功能可以说是AngularJS中最重要的功能之一，也是让咱们只用上述的12行代码，并且子啊没有任何JavaScript的情况下就可以写出HelloWorld的关键。
要实现这个功能，只要在HTML页面中引用angular.js，并在某个DOM元素上明确设置ng-app属性即可。
ng-app属性声明所有被其包含的内容都属于这个AngularJS应用，这也是咱们可以在Web应用中嵌套AngularJS应用的原因。
只有被具有ng-app属性的DOM元素包含的元素才会受AngularJS的影响。
视图中的插值会在计算一个或多个变量时被动态替换，替换结果是字符串中的插值被变量的值替代。
例如，如果有一个叫做name的变量，它的值是“Catalina”，那么视图中的“ Hello, {{name}} ! ”字符串会被换成“Hello, Catalina !”。
自动数据绑定使我们可以将视图理解为模型状态的映射。
当客户端的数据模型发生变化时，视图就能反映出这些变化，并且不需要写任何自定义的代码，它就可以工作。
在MVC（Model View Controller，模型-视图-控制器）的世界里，控制器可以不必担心会牵扯到渲染视图的工作。
这样我们就不必再担心如何分离视图和控制器的逻辑，并且也可以使测试变得既简单又哇塞。
MVC是一种软件架构设计模式，它将表现从用户交互中分离出来。
通常来讲，模型中包含应用的数据和与数据进行交互得方法，视图将数据呈献给用户，而控制器则是二者之间的桥梁。
这种表现分离能将应用中的对象很好地隔离开来，因此视图不需要知道如何保存对象，只要知道如何显示它即可。
这也意味着数据模型不需要同视图进行交互，只需要包含数据和操作视图的方法。
控制器用来存放将二者绑定在一起的业务逻辑。
AngularJS惠济路数据模型所包含的数据在任何特定时间点的值（在HelloWorld例子中就是name的值），而不是原始值。
当AngularJS认为某个值可能发生变化时，它会运行自己的事件循环来检查这个值是否变“脏”。
如果该值从上次事件循环运行之后发生了变化，则该值被认为是“脏”值。
这也是AngularJS可以跟踪和响应应用变化的方式。
这个过程被称作脏检查（dirty checking），脏检查是检查数据模型变化的有效手段。
当有潜在的变化存在时，AngularJS会在事件循环时执行脏检查来保证数据的一致性。
如果使用KnockoutJS这种通过在数据模型上绑定事件监听器来监听数据变化的框架，这个过程会变得更复杂且抵消。
处理事件合并、依赖跟踪和大量的事件触发（event firing）是非常复杂的，而且会在性能方面导致额外的问题。
借助AngularJS，不需要构建复杂和新的JavaScript功能，就可以在试图中实现类自动同步的机制。
为了表示内部和内置的库函数，AngularJS使用$预定义对象。
尽管这类似于全局的jQuery对象，但是他们是完全无关的，只要遇到，但是他们是完全无关的，只要遇到符号，你都可以只把它看做一个AngularJS对象。
3. 简单的数据绑定
审阅一下上面的HelloWorld代码，我们是用ng-model指令将内部数据模型对象（$scope）中的name属性绑定到了文本输入字段上。
这意味着无论在文本框中输入了什么，都会同步到对应的数据模型中。
数据模型对象（model object）是指$scope对象。
$scope对象是一个简单的JavaScript对象，其中的属性可以被视图访问，也可以同控制器进行交互。
如果不理解这个概念也没关系，后面的例子将会对这个概念进行详细介绍。
双向数据绑定（bi-directional）意味着如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，而如果数据模型改变了某个值，视图也会依据变化重新渲染。
在input元素上使用ng-model指令来实现数据绑定，如下所示：
1 <input type="text" ng-model="person.name" placeholder="请输入您的姓名...">
2 <h1>Hello, {{person.name}} !</h1>
这样绑定就设置好了，没错，就这么简单。瑾此而已。
咱们可以观察一下视图是如何更新数据模型的。当 <input> 中的值发生变化时， person.name 会被更新，而视图将反映出这个更新。
咱们仅通过视图就实现了一个双向数据绑定，为了从其他角度（后端到前端）解释双向数据绑定，后面会着重介绍控制器。
正如 ng-app 声明所有被它包含的元素都属于AngularJS应用一样，DOM元素上的 ng-controller 声明所有被它包含的元素都属于某个控制器。
为了解释这个概念，我们将上面的例子进行如下修改：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="UTF-8">
5 <title>Hello World</title>
6 <script src="../script/angular.min.js"></script>
7 </head>
8 <body>
9 <div ng-controller="myController">
10 <h1>现在时间：{{clock}}</h1>
11 </div>
12 </body>
13 </html>
在这个例子中，我们会创建一个每秒钟走一步的时钟，并更新 {{clock}} 变量上的数据：
1 <script>
2 var app = angular.module('myApp', []);
3 app.controller('myController', function($scope, $timeout) {
4 var updateClock = function () {
5 $scope.clock = new Date();
6 $timeout(function () {
7 updateClock();
8 }, 1000);
9 };
10 updateClock();
11 });
12 </script>
在这个例子中，当定时器触发时会调用updateClock()函数，将$scope.clock的值设置为当前时间。
完整代码如下：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="UTF-8">
5 <title>Hello World</title>
6 <script src="../script/angular.min.js"></script>
7 </head>
8 <body>
9 <div ng-controller="myController">
10 <h1>现在时间：{{clock}}</h1>
11 </div>
12
13 <script>
14 var app = angular.module('myApp', []);
15 app.controller('myController', function($scope, $timeout) {
16 var updateClock = function () {
17 $scope.clock = new Date();
18 $timeout(function () {
19 updateClock();
20 }, 1000);
21 };
22 updateClock();
23 });
24 </script>
25 </body>
26 </html>
尽管我们可以将所有的代码都写在一个文件里，但是由于需要将不同的组件分开开发，将代码写在一个文件中会使协同工作变得非常困难。
通常情况下，更好的选择是将JavaScript将在单独的文件中，而不是当前额index.html页面中。
上面的代码可以分开，修改成：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="UTF-8">
5 <title>Hello World</title>
6 <script src="../script/angular.min.js"></script>
7 </head>
8 <body>
9 <div ng-controller="myController">
10 <h1>现在时间：{{clock}}</h1>
11 </div>
12
13 <script src="index.js"></script>
14 </body>
15 </html>
1 var app = angular.module('myApp', []);
2 app.controller('myController', function($scope, $timeout) {
3 var updateClock = function () {
4 $scope.clock = new Date();
5 $timeout(function () {
6 updateClock();
7 }, 1000);
8 };
9 updateClock();
10 });
4. 数据绑定的最佳实践
由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中通过对象的属性而非对象本身来进行引用绑定，是AngularJS中的最佳实践。
如果把这个实践应用到上面的例子中，需要把视图中的代码改成如下：
1 <!DOCTYPE html>
2 <html ng-app="myApp">
3 <head>
4 <meta charset="UTF-8">
5 <title>Hello World</title>
6 <script src="../script/angular.min.js"></script>
7 </head>
8 <body>
9 <div ng-controller="myController">
10 <h1>现在时间：{{clock.now}}</h1>
11 </div>
12
13 <script src="index.js"></script>
14 </body>
15 </html>
在这个例子中，相比每秒钟都更新$scope.clock，更新clock.now的值才更完美~
有了这个优化之后，我们将反映数据变化的逻辑作如下修改：
1 var app = angular.module('myApp', []);
2 app.controller('myController', myController);
3
4 function myController($scope, $timeout) {
5 $scope.clock = {
6 now: new Date()
7 };
8
9 var updateClock = function () {
10 $scope.clock.now = new Date();
11 };
12
13 setInterval(function () {
14 $scope.$apply(updateClock);
15 }, 1000)
16
17 updateClock();
18 }
将所有的绑定都通过这样的形式放在视图中，这才完美~
【来自：张董'Blogs：http://www.cnblogs.com/LonelyShadow，转载请注明出处。】