AnguarJS 第二天----数据绑定

Terms

今天学习AngularJS双向数据绑定的特性，这里面需要提到两个概念：

数据模型：数据模型是指 $scope对象， $scope对象是简单的javascript对象，视图可以访问其中的属性，同时也可以控制器进行交互。
双向数据绑定（view和model的绑定）：如果视图改变了某个值，数据模型会通过脏检查观察到这个变化，如果数据模型改变了某个值，视图也会依据变化重新渲染

示例code

在输入字段上可以通过ng-model进行数据绑定，代码如下所示：

<input ng-model="name" type="text" placeholder="Your name">
<h1>Hello {{name}}</h1>

这样就建立起 $scope对象中的name字段和view的binding，当input发生变化，这种变化会表现在视图上。下面的例子从后端到前端的角度来展现angularJS的双向绑定特性，代码如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>HelloWorld APP</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<!--关联angularJS MyAPP模块和MyController控制器-->
<div ng-app="MyApp" ng-controller="MyController">
    <!--使用{{}}将clock包起来，以显示￥scope中的clock值-->
    <h5>{{clock}}</h5>
</div>
<script>
    <!--定义MyApp AngularJS模块-->
    var app = angular.module('MyApp', []);
    <!--定义MyController控制器-->
    app.controller('MyController', function ($scope, $timeout) {
        <!--定义updateClock函数，每隔1s更新clock的值到当前最新时间-->
        var updateClock = function () {
            $scope.clock = new Date();
            $timeout(function () {
                updateClock();
            }, 1000)
        };
        updateClock();
    });
</script>
</body>
</html>

在浏览器中我们可以看到数据模型中实时更新的数据能够在前端实时显示。上文的代码尽管我们可以将所有代码写在同一个文件中，但更好的做法是是将JavaScript放在单独的文件中，而不是index.html中。修改上述代码，变成如下所示：

<!DOCTYPE html>
<html>
<head>
    <title>HelloWorld APP</title>
    <script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="MyApp" ng-controller="MyController">
    <h5>{{clock}}</h5>
</div>
<script type="text/javascript" src="js/app.js"></script>
</body>
</html>

app.js如下

var app = angular.module('MyApp', []);
app.controller('MyController', function ($scope, $timeout) {
    var updateClock = function () {
        $scope.clock = new Date();
        $timeout(function () {
            updateClock();
        }, 1000)
    };
    updateClock();
});