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. 【leetcode】Path Sum

    题目简述: Given a binary tree and a sum, determine if the tree has a root-to-leaf path such that adding ...

  2. C#创建文件夹，往里追字符串。

    /// <summary>写文本日志</summary> /// <param name="StrMessage">日志消息</param ...

  3. (UWP开发)基于Windows10 Anniversary SDK创造出位于可视化层的DropShadow

    Windows.UI.Composition API是可以从任何通用Windows平台应用程序调用的声明性保留模式API,从而可以直接在应用程序中创建合成对象.动画和效果. Composition A ...

  4. linux zip命令使用

    1.压缩文件zip -r result.zip /data/*.* //将data这个目录下的所有文件进行压缩,并形成result.zip压缩文件2.分卷压缩文件zip -s 1g result.zi ...

  5. js控制刷新后回到页面原来位置

    1.document.location.reload(); 2.http://www.jb51.net/article/99749.htm

  6. 高效快捷实用移动开单手持扫描打印一体智能 POS PDA

    PDA数据采集器,是一款移动手持开单设备,它通过WIFI和GPRS连接并访问电脑,从进销存软件中读取数据,实现移动开单,打破电脑开单模式. 它自带扫描器,可直接扫描条码来查找产品,且功能强大.操作简单 ...

  7. MYSQL数据库------操作命令笔记

    一.数据库连接 * 连接数据库命令(前提需要安装mysq ): mysql -h hostIp -u userName -pPassWord 二.数据库操作 * 查看所有数据库: show datab ...

  8. WPF CodeBehind后台动态创建图片及添加事件

    问题:WPF中DataGrid需要动态生成列并绑定值,首列包含图片和文本,点击图片触发事件. 难点:1.图片资源在VisualTree中的绑定   2.图片的事件绑定 public class Mai ...

  9. 【Linux】Linux统计文件夹、文件数量的命令

    # 查看当前目录下的文件数量(不包含子目录中的文件) ls -l|grep "^-"| wc -l # 查看当前目录下的文件数量(包含子目录中的文件) 注意:R,代表子目录 ls ...

  10. Linux 常识

    一.Linux 各目录及每个目录的详细介绍: Linux目录和Windows目录有着很大的不同,Linux目录类似一个树,最顶层是其根目录,如下图: /bin 二进制可执行命令 /dev 设备特殊文件 ...