AnguarJS 第二天----数据绑定
2016-02-21 19:16
671 查看
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(); });
相关文章推荐
- 联网获取Json并且解析
- 浅谈JavaScript的全局变量跟局部变量
- js常用功能工具库--Underscore.js
- javascript之猜数小游戏
- JS中调用函数是否加括号
- javaScript中自定义滚动条一
- javaScript中的事件三
- javascript 继承
- Javascript里的类构造
- 45个JavaScript小技巧
- javascript之一切皆为对象2
- JS数组定义及详解
- JSP内置对象
- Angular JS中scope的作用域
- 详谈javascript异步编程
- Servlet JSP
- C#对象转json字符串和json字符串转对象
- 24点javascript自动计算
- Javascript中bind()方法的使用与实现
- .NET和JSON