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. How to use *args and **kwargs in Python

    Or, How to use variable length argument lists in Python. The special syntax, *args and **kwargs in f ...

  2. Js 日期转换函数(UTC时间转换及日期想加减)

    IOS上Js日期转换中new Date("yyyy-mm-dd")不能正常工作,必须使用new Date("yyyy/MM/dd"); 日期相加减: Date. ...

  3. abstract与interface的区别

    abstract的用法: //通过abstract 关键字修饰的类叫抽象类. abstract class Animal { String name; String color; abstract p ...

  4. 上传图片预览JS脚本 Input file图片预览的实现示例

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  5. Spring MVC初次相见

    1.什么是SpringMvc Spring MVC属于SpringFrameWork的后续产品,已经融合在Spring Web Flow里面.Spring 框架提供了构建 Web 应用程序的全功能 M ...

  6. font-family字体总结

    宋体 SimSun黑体 SimHei微软雅黑 Microsoft YaHei微软正黑体 Microsoft JhengHei新宋体 NSimSun新细明体 PMingLiU细明体 MingLiU标楷体 ...

  7. mysql索引总结----mysql 索引类型以及创建

    文章归属:http://feiyan.info/16.html,我想自己去写了,但是发现此君总结的非常详细.直接搬过来了 关于MySQL索引的好处,如果正确合理设计并且使用索引的MySQL是一辆兰博基 ...

  8. clang: error: linker command failed with exit code 1 (use -v to see invocati

    安装了 pod 的项目,如果仍旧打开 xcodeproject 文件, 运行时会弹出此 bug

  9. 利用ajax的方式来提交数据到后台数据库及交互功能

    怎么样用ajax来提交数据到后台数据库,并完成交互呢????? 一.当我们在验证表单的时候,为了阻止把错误的也发送到服务器,我们通常这样设置:     $(function(){       var ...

  10. Spring Mvc的入门

    SpringMVC也叫Spring Web mvc,属于表现层的框架.Spring MVC是Spring框架的一部分,是在Spring3.0后发布的. Spring Web MVC是什么: Sprin ...