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
Angular 笔记系列(二)数据绑定的更多相关文章
- Angular 笔记系列(一)项目组织与命名规范
其实使用 Angular.js 做项目已经很久了,也遇到过许多问题.其中很多问题的出现都是因为没有按照规范或者最佳实践来做,大部分原因是学的不够细,很多 tips 没 get 到,用到项目中就会出现各 ...
- Python基础笔记系列二:分支和循环
本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 分支:即是if-else和if-elif-else语句 循环:即是whil ...
- JavaWeb前端基础复习笔记系列 二
课程:孔浩前端视频教程(JavaScript系列:1~5讲) <html> <head> <title></title> <!--html只负责显 ...
- 《ASP.NET Core In Action》读书笔记系列二 ASP.NET Core 能用于什么样的应用,什么时候选择ASP.NET Core
ASP.NET Core 能用于什么样的应用 ASP.NET Core 可以用作传统的web服务.RESTful服务.远程过程调用(RPC)服务.微服务,这归功于它的跨平台支持和轻量级设计.如下图所示 ...
- 框架SpringMVC笔记系列 二 传值
主题:SpringMVC(第一节中再回顾复习一次) 学习资料参考网址: 1.http://www.icoolxue.com 2.http://haohaoxuexi.iteye.com/blog/13 ...
- Java基础复习笔记系列 二
1.Java中Static的相关用法总结?(静态方法:静态变量:静态代码块) public static void main(String args[])执行的关键,在于有static.有了stati ...
- JNI 学习笔记系列(二)
c中没有Boolean类型的值,一般是使用1表示true,0表示false,c中也没有String类型的数据,c中的字符串要通过char数组来表示.c中没有byte类型,一般用char表示byte类型 ...
- Windows-universal-samples学习笔记系列二:Controls, layout, and text
Controls, layout, and text AutoSuggestBox migration Clipboard Commanding Context menu Context menu ( ...
- LeetCode 笔记系列二 Container With Most Water
题目:Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai ...
随机推荐
- 察看下列JSP内容
察看下列JSP内容 <html><body> <% for (int i=0;i<3;i++){ %> out.print(i*2); <% } %&g ...
- ThinkPHP项目笔记之RBAC(权限)上篇
当理清这5个表的关系,接下来,就是功能介绍了.
- [转] 关于EJB分析
转自:http://blog.csdn.net/jojo52013145/article/details/5783677 1. 我们不禁要问.什么是"服务集群"?什么是" ...
- Tomcat高并发配置优化
用的JMeter在自己电脑上测试的.Ubuntu10.04(x64)内存2G,cpu E5400 主频2.7.jdk1.6.0_27(x64) , tomcat6.0.33(x64) , oracle ...
- python3----requests
import requests def get_html_text(url): try: r = requests.get(url, timeout=30) r.raise_for_status() ...
- django admin后台css样式丢失
尼玛 坑爹啊 怎么光秃秃的,跟人家的不一样啊 打开firebug 发现报错,找不到css 通过google找到原因,是因为admin所需的js ,css等静态文件虽然都在django的安装目录内,但是 ...
- 编程之美 set 19 连连看游戏设计
题目 1. 怎么用简单的计算机模型来描述这个问题 ? 2. 怎么判断两个图像是否能相消 3. 怎么求出相同图形之间的最短距离(转弯数最少)? 4. 怎么确定目前处于死锁状态? 如何设计算法来解除死锁? ...
- iOS开发之--最简单的导航按钮更换方法/导航颜色的改变
有很多时候,我们需要用到导航,那么更换导航的时候,是在那用那修改,还是自定义一个导航,或者是声明一个代理方法,经过查资料和对导航属性的一些了解,用一种方法最为简单,就是在入口类里面添加一个方法,调用偏 ...
- 170420、maven内置常量
Maven工程插件配置中通常会用到一些Maven变量,因此需要找个地方对这些变量进行统一定义,下面介绍如何定义自定义变量. 在根节点project下增加properties节点,所有自定义变量均可以定 ...
- hdu2254 奥运 矩阵的应用
hdu2254 奥运 题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=2254 题意:题目让我们求得是的可以得到的金牌数量,而和金牌数量=在t1到t2天( ...