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. RedHat Enterprise Linux 6.4 使用 Centos 6 的yum（转）

    概述 redhat的yum源需注册付费,费时费力,整理RedHat yum 安装CentOS的方法. 安装系统文件 系统:RedHat Enterprise Linux 6.4-x86_64 md5: ...

  2. KeyedPriorityQueue

    // <copyright file="KeyedPriorityQueue.cs" company="Microsoft">Copyright ( ...

  3. vue学习之旅

    大纲: 属性 事件 循环 指令 交互 过滤器 模板 计算属性 自定义过滤器和指令 组件(父子组件之间的通讯) 路由和多层路由以及占位槽slot等其他 vue-loader和模块加载(webpack)等 ...

  4. View动画和属性动画

    在应用中, 动画效果提升用户体验, 主要分为View动画和属性动画. View动画变换场景图片效果, 效果包括平移(translate), 缩放(scale), 旋转(rotate), 透明(alph ...

  5. 安装openssl 扩展的时候出现Cannot find config.m4. Make sure that you run '/usr/local/php/bin/phpize' in the top level source directory of the module的解决方法

    进入php源码包目录:cd /usr/local/php-5.6.25/ext/openssl 执行命令:  cp ./config0.m4 ./config.m4 即可

  6. python 面向对象初级篇

    Python 面向对象(初级篇) 概述 面向过程:根据业务逻辑从上到下写垒代码 函数式:将某功能代码封装到函数中,日后便无需重复编写,仅调用函数即可 面向对象:对函数进行分类和封装,让开发" ...

  7. 【APICloud】APICloud基础学习与快速入门

    前言:回顾这几天学习情况,总的来说APICloud官网它的学习资料和社区还是足够了,但是我必须吐槽一句,实在是过于混乱了,视频资料文档资料它一股脑地都堆在了那里,这几天基本处于在各个地方跳转,然后现在 ...

  8. 如何使用android百度地图离线地图

    1.首先把离线地图放在android工程下的assets里面. 注意:建议离线地图下载通过百度地图APIDEMO去下载,因为到官网上下载的离线地图文件格式不一样,APIDEMO的格式是.dat,而官网 ...

  9. Vue - 过滤器

    1.内部过滤器 1):字母操作: ---- 针对字符串 A:capitalize B:uppercase C:lowercase 2):json过ingfy滤器,可将表达式的值转化为Json字符串,本 ...

  10. Delphi 关键字详解[整理于 "橙子" 的帖子]

    absolute //它使得你能够创建一个新变量, 并且该变量的起始地址与另一个变量相同. var   Str: ];   StrLen: Byte absolute Str; //这个声明指定了变量 ...