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 }} </ ...
随机推荐
- .NET 程序集Assembly使用
概述 一直以来,我们都在用C#编写程序,编写程序的时候,我们用到继承.多态.接口以及泛型,我们也都明白子类可以继承抽象类,并能够重写父类的抽象方法,可是大家是否想过,如下几个问题: 1.凡树必有根和叶 ...
- Windows下用tree命令生成目录树
有时候我们想为某个目录制作一个文档结构图,在Windows上,我们知道是使用tree命令. 但是,默认情况下tree只显示子目录名,而不显示子目录里的文件名,需要加上/F参数才能显示完整的文件名. ...
- 关于 Dictionary<string,string>,和List<T>在View的使用
在MVC中Dictionary<string,string>如何应用到View页面中呢,例: <input type="text" name=key value= ...
- mysql导出excel文件的几种方法
方法一 用mysql的命令和shell select * into outfile './bestlovesky.xls' from bestlovesky where 1 order by id d ...
- JavaScript高级程序设计-(4) 引用类型
1.object var person={};//与new Object()相同 一般创建对象 var person=new Object(); person.Name="admin&quo ...
- Ubuntu14.04 64位机上安装cuda8.0 cudnn5.0操作步骤 - 网络资源是无限的
查看Ubuntu14.04 64位上显卡信息,执行: lspci | grep -i vga lspci -v -s 01:00.0 nvidia-smi 第一条此命令可以显示一些显卡的相关信息:如果 ...
- Codeforces CF#628 Education 8 E. Zbazi in Zeydabad
E. Zbazi in Zeydabad time limit per test 5 seconds memory limit per test 512 megabytes input standar ...
- js转盘抽奖
这个是很简易的转盘,只用了html,css,js 通过css产生一个转盘上的指针,用js动态改变css中的transparent改变指针的角度.再添加一个背景图片类似于奖项的转盘 <!DOCTY ...
- 利用Photoshop修改图片以达到投稿要求
摘自:http://www.dxy.cn/bbs/thread/8602152#8602152 利用Photoshop修改图片以达到投稿要求 软件版本为Photoshop CS V8.0.1(中文版) ...
- js遍历json
function test1(){ var json = [{name:'wang',age:22,sex:1},{name:'tang',age:25,sex:1},{name:'yuan',age ...