AnguarJS 第二天----数据绑定
Terms
今天学习AngularJS双向数据绑定的特性，这里面需要提到两个概念：
数据模型：数据模型是指 $scope对象， $scope对象是简单的javascript对象，视图可以访问其中的属性，同时也可以控制器进行交互。
双向数据绑定（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 第二天----数据绑定的更多相关文章
- 第二章-数据绑定和第一个AnglarJS Web应用
Angularjs中的数据绑定 AngularJS创建实时模板来代替视图,而不是将数据合并进模板之后更新DOM.任何一个独立视图组件中的值都是动态替换的.这个功能可以说是AngularJS中最最重要的 ...
- vue.js基础知识篇(1):简介、数据绑定
目录第一章:vue.js是什么? 第二章:数据绑定第三章:指令第四章:计算属性第五章:表单控件绑定代码链接: http://pan.baidu.com/s/1qXCfzRI 密码: 5j79 第一章: ...
- WPF中的数据绑定（初级）
关于WPF中的数据绑定,初步探讨 数据绑定属于WPF中比较核心的范畴,以下是对WPF中数据绑定的一个初步探讨.个人感觉还是带有问题性质的叙述比较高效,也比较容易懂 第一,什么是数据绑定? 假定有这么一 ...
- 系统调优之numa架构
NUMA简介 在传统的对称多处理器(SMP, Symmetric Multiprocessing)系统中,整个计算机中的所有cpu共享一个单独的内存控制器.当所有的cpu同时访问内存时,这个内存控制器 ...
- .NET/ASP.NETMVC Model元数据、HtmlHelper、自定义模板、模板的装饰者模式（一）
.NET/ASP.NETMVC Model元数据.HtmlHelper.自定义模板.模板的装饰者模式(一) 阅读目录: 1.开篇介绍 2.Model与View的使用关系(数据上下文DataContex ...
- Angular随笔第一课
一.调用angular 加载angular.js库(可以从google的cdn中加载类库,https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/a ...
- SpringMVC 课纲
SpringMVC 课纲 第一章 SpringMVC 架构 一个简单的 web 项目,校验器 SpringMVC 组件及相互关系 第二章 数据绑定 form标签库 第三章 Converter 和 Fo ...
- WP8.1学习系列(第二十三章)——到控件的数据绑定
在本文中 先决条件 将控件绑定到单个项目 将控件绑定到对象的集合 通过使用数据模板显示控件中的项目 添加详细信息视图 转换数据以在控件中显示 相关主题 本主题介绍了如何在使用 C++.C# 或 Vis ...
- Vue入门教程 第二篇 （数据绑定与响应式）
数据绑定 Vue.js 的核心是一个允许采用简洁的模板语法来声明式地将数据渲染进 DOM 的系统: <div id="app"> {{ message }} </ ...
随机推荐
- Integer to English Words
https://leetcode.com/problems/integer-to-english-words/ 这题记得是<c 和指针>里的一道习题,三年前花了一晚上做过.现在花了大概40 ...
- laravel5笔记
数据库表创建E:\PHP\learnlaravel5>php artisan migrate 创建modelE:\PHP\learnlaravel5>php artisan make:mo ...
- JavaScript异步编程的主要解决方案—对不起，我和你不在同一个频率上
众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...
- CozyRSS开发记录18-番外之Atom1.0的支持
CozyRSS开发记录18-番外之Atom1.0的支持 1.对CozyRSS.Syndication批判一番 由于我工作的主要开发语言是c++,所以会看到我的c#代码写得非常朴素,很多语法糖都没有用上 ...
- Andriod学习笔记3：Mac 平台下搭建 CLion 集成开发环境
1. 安装Xcode 通过App store或者下载安装Xcode. 安装完成之后,最好启动一下Xcode,否则可能会报"Error:The C compiler "/usr/bi ...
- 2016-2017 ACM-ICPC Southwestern European Regional Programming Contest (SWERC 2016)
A. Within Arm's Reach 留坑. B. Bribing Eve 枚举经过$1$号点的所有直线,统计直线右侧的点数,旋转卡壳即可. 时间复杂度$O(n\log n)$. #includ ...
- bfrd collector性能排查
1.2.09上昨天timeout在18点23分-22点10分 2.检测2.17网卡流量,sar -f /var/log/sa/sa06 -n DEV,发现这段时间刚好是rxpck/s超过6400. ...
- 伪Textatea的构建（div+table），以及相应的滚动条问题与safari上的优化
在页面中创建一个不可编辑的文本块,并且文本块的篇幅较大,第一反应是创建一个textarea,并将它的disabled="disabled",并设置相应的scroll属性,就可以构建 ...
- 试用avalon2.0
一直从事后端开发,对于前端的html+css+js,不熟不熟的.前面写了一个比较复杂的操作界面,我只能说,误工费时.花了一周研究avalonjs2,大神的确就是大神,解决了我很多的问题, 请参考htt ...
- 基础2.通过Ajax获得servlet数据（最基础）
案列一:从服务器的得到输出的数据 Jsp界面 <script type="text/javascript" src="test.js"></s ...