Terms

今天学习AngularJS双向数据绑定的特性，这里面需要提到两个概念：

  1. 数据模型：数据模型是指 $scope对象， $scope对象是简单的javascript对象，视图可以访问其中的属性，同时也可以控制器进行交互。

  2. 双向数据绑定（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 第二天----数据绑定的更多相关文章

  1. 第二章-数据绑定和第一个AnglarJS Web应用

    Angularjs中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的.这个功能可以说是AngularJS中最最重要的 ...

  2. vue.js基础知识篇(1):简介、数据绑定

    目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...

  3. WPF中的数据绑定（初级）

    关于WPF中的数据绑定,初步探讨 数据绑定属于WPF中比较核心的范畴,以下是对WPF中数据绑定的一个初步探讨.个人感觉还是带有问题性质的叙述比较高效,也比较容易懂 第一,什么是数据绑定? 假定有这么一 ...

  4. 系统调优之numa架构

    NUMA简介 在传统的对称多处理器(SMP, Symmetric Multiprocessing)系统中,整个计算机中的所有cpu共享一个单独的内存控制器.当所有的cpu同时访问内存时,这个内存控制器 ...

  5. .NET/ASP.NETMVC Model元数据、HtmlHelper、自定义模板、模板的装饰者模式（一）

    .NET/ASP.NETMVC Model元数据.HtmlHelper.自定义模板.模板的装饰者模式(一) 阅读目录: 1.开篇介绍 2.Model与View的使用关系(数据上下文DataContex ...

  6. Angular随笔第一课

    一.调用angular 加载angular.js库(可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/a ...

  7. SpringMVC 课纲

    SpringMVC 课纲 第一章 SpringMVC 架构 一个简单的 web 项目,校验器 SpringMVC 组件及相互关系 第二章 数据绑定 form标签库 第三章 Converter 和 Fo ...

  8. WP8.1学习系列(第二十三章)——到控件的数据绑定

    在本文中 先决条件 将控件绑定到单个项目 将控件绑定到对象的集合 通过使用数据模板显示控件中的项目 添加详细信息视图 转换数据以在控件中显示 相关主题 本主题介绍了如何在使用 C++.C# 或 Vis ...

  9. Vue入门教程 第二篇 （数据绑定与响应式）

    数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ message }} </ ...

随机推荐

  1. DBNEWNAME工具介绍

    下面修改数据库的SID和db_name [root@oracle ~]# su - ora11g db11@oracle /home/ora11g$ db11@oracle  /home/ora11g ...

  2. C# 利用 DbUp 通过多个SQL Script文件完成对数据库的更新

    详细流程请参考(本人测试过,很好用): http://dbup.github.io/ 配置截图: 程序如下: static int Main(string[] args) { var connecti ...

  3. 用opencsv文件读写CSV文件

    首先明白csv文件长啥样儿: 用excel打开就变成表格了,看不到细节 推荐用其它简单粗暴一点儿的编辑器,比如Notepad++, csv文件内容如下: csv文件默认用逗号分隔各列. 有了基础的了解 ...

  4. UVA 11168 Airport（凸包+直线方程）

    题意:给你n[1,10000]个点,求出一条直线,让所有的点都在都在直线的一侧并且到直线的距离总和最小,输出最小平均值(最小值除以点数) 题解:根据题意可以知道任意角度画一条直线(所有点都在一边),然 ...

  5. [NHibernate]查看NHibernate生成的SQL语句

    最近接触到一个用Spring.Net结合NHIbernate的项目,第一次使用,有很多配置,数据操作一旦出问题,很难找到原因,那么如何查看NHibernate发送给数据库的SQL语句呢? 当然我们可以 ...

  6. 对html与body的一些研究与理解

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=259 一.写在前面的最 ...

  7. Android Handler消息传递机制

    在Android系统中,类Handler主要有如下两个作用. 在新启动的线程中发送消息. 在主线程中获取.处理消息. 类Handler在实现上述作用时,首先在新启动的线程中发送消息,然后在主线程中获取 ...

  8. [深度学习大讲堂]从NNVM看2016年深度学习框架发展趋势

    本文为微信公众号[深度学习大讲堂]特约稿,转载请注明出处 虚拟框架杀入 从发现问题到解决问题 半年前的这时候,暑假,我在SIAT MMLAB实习. 看着同事一会儿跑Torch,一会儿跑MXNet,一会 ...

  9. [基础技能] 安全技术——哈希算法密码破解之彩虹表(Rainbow Table)学习

    1.基础知识 刚刚学习过数字签名的相关知识,以及数字签名的伪造技术,而伪造数字签名归根结底就是密码破解的一个过程,然而直接破解的速度是非常缓慢的,所以有人想出一种办法,直接建立出一个数据文件,里面事先 ...

  10. lua的C库

    在云风的ejoy2d里是没有dll和so之类的东西的, 所有的C扩展都是类似这样写的: int ejoy2d_shader(lua_State *L) {      luaL_Reg l[] = { ...