AngularJS 讲解,一数据绑定

AngularJS 完全使用javascript 编写的客户端技术。通过原生的Model-View-Controller（MVC，模型视图控制器）功能增强了HTML。这个选择可以快捷和愉悦地构建出令人印象深刻并且极富表现力的客户端应用。

AngularJS的源码托管在GitHub上，可以免费获取。

数据模型对象（model object）是指$scope对象。

数据绑定:

例子:时钟的实现

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>tabs control</title>
 6     <script type="text/javascript" src="angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="MyController">
10         <h1>clock:{{clock}}</h1>
11     </div>
12     <script type="text/javascript" src="clock.js"></script>
13 </body>
14 </html>

clock.js

 1 (function () {
 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 })();

数据绑定的最佳实践:

由于JavaScript自身的特点，以及它在传递值和引用时的不同处理方式，通常认为，在视图中
通过对象的属性而非对象本身来进行引用绑定，是Angular中的最佳实践。

修改为：

 1 <!DOCTYPE html>
 2 <html ng-app="myApp">
 3 <head>
 4     <meta charset="utf-8" />
 5     <title>tabs control</title>
 6     <script type="text/javascript" src="angular.min.js"></script>
 7 </head>
 8 <body>
 9     <div ng-controller="MyController">
10         <h1>clock:{{clock.now}}</h1>
11     </div>
12     <script type="text/javascript" src="clock.js"></script>
13 </body>
14 </html>

clock.js

 1 (function () {
 2     var app = angular.module("myApp", []);
 3     app.controller('MyController', function ($scope) {
 4         $scope.clock = {
 5             now: new Date()
 6         }
 7         var updateClock = function () {
 8             $scope.clock.now = new Date();
 9         }
10         setInterval(function () {
11             $scope.$apply(updateClock);
12         }, 1000);
13         updateClock();
14     })
15 })();

这里提到$scope.$apply(),相信大家不知道这个，怎么用和为什么这么用，我刚接触的时候也不明白为什么，然后去查了一下资料，下面大概讲解一个这个$scope.$apply()的用法

1.$scope提供$apply方法传播Model的变化

对于检查绑定的数据到底有没有发生变化，实际上是由$