数据绑定这块儿没啥说的,简单两个例子带过了。

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 笔记系列(二)数据绑定的更多相关文章

  1. Angular 笔记系列(一)项目组织与命名规范

    其实使用 Angular.js 做项目已经很久了,也遇到过许多问题.其中很多问题的出现都是因为没有按照规范或者最佳实践来做,大部分原因是学的不够细,很多 tips 没 get 到,用到项目中就会出现各 ...

  2. Python基础笔记系列二:分支和循环

    本系列教程供个人学习笔记使用,如果您要浏览可能需要其它编程语言基础(如C语言),why?因为我写得烂啊,只有我自己看得懂!! 分支:即是if-else和if-elif-else语句 循环:即是whil ...

  3. JavaWeb前端基础复习笔记系列 二

    课程:孔浩前端视频教程(JavaScript系列:1~5讲) <html> <head> <title></title> <!--html只负责显 ...

  4. 《ASP.NET Core In Action》读书笔记系列二 ASP.NET Core 能用于什么样的应用,什么时候选择ASP.NET Core

    ASP.NET Core 能用于什么样的应用 ASP.NET Core 可以用作传统的web服务.RESTful服务.远程过程调用(RPC)服务.微服务,这归功于它的跨平台支持和轻量级设计.如下图所示 ...

  5. 框架SpringMVC笔记系列 二 传值

    主题:SpringMVC(第一节中再回顾复习一次) 学习资料参考网址: 1.http://www.icoolxue.com 2.http://haohaoxuexi.iteye.com/blog/13 ...

  6. Java基础复习笔记系列 二

    1.Java中Static的相关用法总结?(静态方法:静态变量:静态代码块) public static void main(String args[])执行的关键,在于有static.有了stati ...

  7. JNI 学习笔记系列(二)

    c中没有Boolean类型的值,一般是使用1表示true,0表示false,c中也没有String类型的数据,c中的字符串要通过char数组来表示.c中没有byte类型,一般用char表示byte类型 ...

  8. Windows-universal-samples学习笔记系列二:Controls, layout, and text

    Controls, layout, and text AutoSuggestBox migration Clipboard Commanding Context menu Context menu ( ...

  9. LeetCode 笔记系列二 Container With Most Water

    题目:Given n non-negative integers a1, a2, ..., an, where each represents a point at coordinate (i, ai ...

随机推荐

  1. hashSet的底层是数组,其查询效率非常高

    如果偷懒,没有设定equals(),就会造成返回hashCode虽然结果相同,但在程序执行的过程中会多次地调用equals(),从而影响程序执行的效率. 我们要保证相同对象的返回的hashCode一定 ...

  2. [转]ODBC编程指南

    DM4 ODBC编程指南本章结合DM4数据库的特点,比较全面系统的介绍ODBC的基本概念以及DM4 ODBC DRIVER的使用方法,以便用户更好地使用DM4 ODBC编写应用程序.ODBC提供给你访 ...

  3. MFC 单选按钮Radio使用注意

    使用MFC Radio时遇到问题:数据交换时出现断言崩溃框 定位于: 解决方法: 1.按CTRL+D,保证同一组内的radio的tab序号是连续的: 2.同一组内,设置 radio1的属性:  gro ...

  4. ionic listview对象的编辑、排序和删除

    1)ionic的listview对象即<ion-list></ion-list> 2)添加并显示编辑按钮(添加其他自定义按钮也一样) can-swipe属性设置为true(默认 ...

  5. Android无线测试之—UiAutomator UiScrollable API介绍八

    设置滚动方向 一.设置滚动方向相关API 返回值 API 描述 UiScrollable setAsHorizontalList 设置滚动方向为水平滚动 UiScrollable setAsVerti ...

  6. eclipse 的代码着色插件 --Eclipse Color Theme

    Eclipse Color ThemeEclipse自带的背景颜色是白色的,很伤眼睛,故而安装一个颜色和主题插件,来改变代码区域的背景颜色以及关键字的颜色. 网址:http://eclipsecolo ...

  7. [Domino]执行命令load design的时候出现Warning: Cannot locate design template

    发现问题 在做Pseudo Test的时候被QA测出了一个问题.在Domino concole打命令“load design”,被Workbench翻译过后的数据库提示了一个警告:Warning: C ...

  8. 170330、Spring中你不知道的注入方式

    前言 在Spring配置文件中使用XML文件进行配置,实际上是让Spring执行了相应的代码,例如: 使用<bean>元素,实际上是让Spring执行无参或有参构造器 使用<prop ...

  9. CSS样式表、JS脚本加载顺序与SpringMVC在URL路径中传参数与SpringMVC 拦截器

    CSS样式表和JS脚本加载顺序 Css样式表文件要在<head>中先加载,这样网页显示时可以第一次就渲染出正确的布局和样式,网页就不会闪烁,或跳变 JS脚本尽可能放在<body> ...

  10. JavaMath方法、服务器与Tomcat安装与配置步骤

    一.Math Math.PI 记录的圆周率  Math.E 记录e的常量  Math中还有一些类似的常量,都是一些工程数学常用量. Math.abs 求绝对值  Math.sin 正弦函数 Math. ...