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 }} </ ...
随机推荐
- Duilib源码分析(五)UI布局—Layout与各子控件
接下来,继续分析duilib之UI布局Layout,目前提供的布局有:VerticalLayout.HorizontalLayout.TileLayout.TabLayout.ChildLayout分 ...
- [Spring] AOP, Aspect实例解析
最近要用到切面来统一处理日志记录,写了个小实例练了练手: 具体实现类: public interface PersonServer { public void save(String name); p ...
- Mac下的类似apt-get的包管理工具Homebrew（笔记）
对于一个习惯了在 Ubuntu 的终端上通过 apt-get 来安装工具软件的我来说,也希望在Mac上找到类似的工具,能很方便的一条命令就能安装所需的软件,而不用手工的去查找下载编译,或者是折腾安装所 ...
- 【Android进阶学习】shape和selector的结合使用（转）
原创作品,允许转载,转载时请务必以超链接形式标明文章 原始出处 .作者信息和本声明.否则将追究法律责任.http://liangruijun.blog.51cto.com/3061169/732310 ...
- maven权威指南学习笔记（一）——简介
maven是什么?有什么用? Maven是一个项目管理工具,它包含了 一个项目对象模型 (Project Object Model), 一组标准集合, 一个项目生命周期(Pro ...
- html传值 location.search取
$(function() { var url = decodeURI(location.search); if (url.indexOf("?") != -1) { var str ...
- [RESTful]HTTP状态码
HTTP状态码是一个依附于HTTP响应的3位数字,它是协议语义的一部分,能在最基本的层面上让客户端知道服务器在尝试处理请求的时候发生了什么事情.HTTP规范总共定义了41一个响应码,本文将对所有的状态 ...
- CharacterEncodingFilter-Spring字符编码过滤器
通过源码可以看到在web.xml配置CharacterEncodingFilter 时,可以配置两个参数:encoding和forceEncoding : encoding:编码格式: forceEn ...
- 树链剖分+线段树 CF 593D Happy Tree Party（快乐树聚会）
题目链接 题意: 有n个点的一棵树,两种操作: 1. a到b的路径上,给一个y,对于路径上每一条边,进行操作,问最后的y: 2. 修改某个条边p的值为c 思路: 链上操作的问题,想树链剖分和LCT,对 ...
- 2016-1-30 Servlet中Session管理(Sesssion追踪)
Session管理(Sesssion追踪)是Web应用程序开发中非常重要的一个主题.这是因为HTTP是无状态的,在默认情况下,Web服务器不知道一个HTTP请求是来自初次用户,还是来自之前已经访问过的 ...