你的位置:首页 > Java教程

[Java教程]Angular 笔记系列(二)数据绑定


数据绑定这块儿没啥说的,简单两个例子带过了。

Hello World:

<!DOCTYPE html>   <html ng-app>   <head>

<title>Simple app</title>

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
   </head>
   <body>    <input ng-model="name" type="text" placeholder="Your name">    <h1>Hello {{ name }}</h1>
   </body>   </html>

这就是有趣的双向数据绑定,AngularJS 会记录数据模型所包含的数据在任何特定时间点的值,而不是原始值。当他认为某个值可能发生变化时,
就会运行自己的事件循环来检查这个值是否变脏,如果该值从上次事件循环之后发生了变化,则该值被认为是脏值。这也是 Angular 可以跟踪和响应应用变化的方式。

数据模型对象:这里是指$scope。它的属性可以被视图访问,也可以同控制器交互。


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

一个简单的计时器:
<!doctype html>


<html ng-app>
<head> 

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>

</head>

<body>



     <div ng-controller="MyController">
      <h1>Hello {{ clock.now }}!</h1>     </div>

<script type="text/javascript" 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();   };




关于脏值检查相关请参考:
http://www.cnblogs.com/Slim-Shady/p/5217221.html