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();
});
AnguarJS 第二天----数据绑定的更多相关文章
- 第二章-数据绑定和第一个AnglarJS Web应用
Angularjs中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的.这个功能可以说是AngularJS中最最重要的 ...
- vue.js基础知识篇(1):简介、数据绑定
目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...
- WPF中的数据绑定（初级）
关于WPF中的数据绑定,初步探讨 数据绑定属于WPF中比较核心的范畴,以下是对WPF中数据绑定的一个初步探讨.个人感觉还是带有问题性质的叙述比较高效,也比较容易懂 第一,什么是数据绑定? 假定有这么一 ...
- 系统调优之numa架构
NUMA简介 在传统的对称多处理器(SMP, Symmetric Multiprocessing)系统中,整个计算机中的所有cpu共享一个单独的内存控制器.当所有的cpu同时访问内存时,这个内存控制器 ...
- .NET/ASP.NETMVC Model元数据、HtmlHelper、自定义模板、模板的装饰者模式（一）
.NET/ASP.NETMVC Model元数据.HtmlHelper.自定义模板.模板的装饰者模式(一) 阅读目录: 1.开篇介绍 2.Model与View的使用关系(数据上下文DataContex ...
- Angular随笔第一课
一.调用angular 加载angular.js库(可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/a ...
- SpringMVC 课纲
SpringMVC 课纲 第一章 SpringMVC 架构 一个简单的 web 项目,校验器 SpringMVC 组件及相互关系 第二章 数据绑定 form标签库 第三章 Converter 和 Fo ...
- WP8.1学习系列(第二十三章)——到控件的数据绑定
在本文中 先决条件 将控件绑定到单个项目 将控件绑定到对象的集合 通过使用数据模板显示控件中的项目 添加详细信息视图 转换数据以在控件中显示 相关主题 本主题介绍了如何在使用 C++.C# 或 Vis ...
- Vue入门教程 第二篇 （数据绑定与响应式）
数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ message }} </ ...
随机推荐
- 2003服务器搭建vpn
先说下为什么会有本文,公司的git突然被防火墙屏蔽了,有些同事无奈用4g网去提交,我比较穷,1g的小水管hold不住,于是我想着用vpn.国内封杀的比较严重,免费的更是少,找朋友要了一个3小时试用的, ...
- 学习微信小程序之css9内边距
padding内边距 <!DOCTYPE html> <html lang="en"> <head> <meta charset=&quo ...
- POJ 3347 Kadj Squares （计算几何+线段相交）
题意:从左至右给你n个正方形的边长,接着这些正方形都按照旋转45度以一角为底放置坐标轴上,最左边的正方形左端点抵住y轴,后面的正方形依次紧贴前面所有正方形放置,问从上方向下看去,有哪些正方形是可以被看 ...
- jsonp使用，spring4.x对jsonp的支持
1.Java中接口 @RequestMapping("/token/{token}") @ResponseBody public Object getUserByToken(@Pa ...
- windows下mysql客户端输入中文显示??解决方法
>>>>>>>>>>>>>>>>>>>> 1.检查并修改mysql的my.ini ...
- 如何解决插入Oracle数据中文为乱码问题
1.首先,Oracle查询编码:select * from v$nls_parameters;//看看是否GBK 2.如果是用Servlet或者别的,插入数据之前输出一下,看看是否乱码.比如: doP ...
- 根据url下载图片
如题:在我要动手写的时候才发现不搜索根本就是写不出来,究其原因还是因为基础不扎实,由于用的少已经没有能力写出了 首先需要获取url数据流,然后写进文件里即可,仅仅两步可惜我写不出来啊跟着搜来的内容写一 ...
- CSharp数据库代码生成工具
项目中遇到很多数据库表字段特别多的项目,手动一个一个去敲也不知道敲到什么时候,突发奇想做一个工具一劳永逸.花了一晚上做了这个东西,代码写的比较乱,用这个工具后减少了很多时间. Git地址:https: ...
- network issue troubleshooting
Today we troubleshooting a lot of network issue by using commands like: ping <ip>/<computer ...
- linux工具
sudo yum install yum-utils