AngularJS入门心得2——何为双向数据绑定

  前言:谁说Test工作比较轻松,最近在熟悉几个case,差点没疯。最近又是断断续续的看我的AngularJS,总觉得自己还是没有入门,可能是自己欠前端的东西太多了,看不了几行代码就有几个常用函数不熟悉的。看过了大漠的视频,算是了解了AngularJS的一些优良特性。后来准备投身《AngularJS权威教程》,跟着它走,可是一来可能自己道行不够,二来,个人觉得这本书翻译的有些生硬以及一些瑕疵,比如:

  (1)9.2节:在指令中适用自作用域

  (2)9.2节:在指令中适用自作用域

  当然,以上都是一些瑕疵,希望译著作者不要见怪哈^_^!

  所以,在囫囵吞枣的看到第十章,我觉得先搁置至此,去ngnice看看。可能我还是需要一些概念上的输入,比如双向数据绑定、表达式、指令等等。

 

  正文:今天主要介绍AngularJS双向数据绑定

  1.理论介绍

  什么是双向数据绑定?既然号称双向数据绑定,重点肯定在“双向”上了,显然,有双向必有单向,那两者有何区别,先看下面两幅图:

  上图:单向绑定

  它们将模板和数据合并起来加入到视图中去,如图表中所示。合并完成之后,从图中的流向可以看出,任何对数据模型或者相关内容的改变都不会自动反映到视图中去。而且用户对视图的任何改变也不会自动同步到数据模型中来。这意味着,开发者需要编写代码来保持视图与模板、模板与视图的同步,无疑增加了开发的工作量。

  那么有没有可以自动实现这种双向机制的框架,有,请看:

  下图:双向绑定

  AngularJS的数据绑定是数据模型(model)与视图(view)组件的自动同步。Angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时,视图就能反映这种改变,反之亦然。

 

  2. 代码演示

  html:

<!doctype html>
<html ng-app="MyModule"><head><meta charset="utf-8"></head><body><div ng-controller="HelloAngular"><p>{{greeting.text}},Angular</p></div></body><script src="js/angular-1.3.0.js"></script><script src="HelloAngular_MVC.js"></script>
</html>

  js:

var myModule = angular.module('MyModule', []);myModule .controller('HelloAngular', ['$scope',$scope.greeting = {text: 'Hello'};
]);

  运行结果:Hello,Angular

  解读:这里的"{{}}"相当于"ng-model"指令,其实就是一种绑定,但是仅从这个例子,不能说实现了双向数据绑定。这里是将AngularJS的数据模型(Model)的值绑定到了视图(View)上了,如果html文件中没有引入

 

<script src="HelloAngular_MVC.js"></script>

 

  则通过运行发现界面实现的是:{{greeting.text}},Angular

  也就是说AngularJS的scope中的模型值没有绑定到前台界面html中。反之,引入了HelloAngular_MVC.js,则实现在前端界面中映射到了数据模型数据。

 

  上面介绍的不能算是双向数据绑定,下面引出真正的双向绑定,那么双向数据绑定有何应用场景,什么样的情况需要数据模型与视图能够相互映射相互影响呢,可能是你没有察觉,现在很多的网站都能看到这种思想带来的极大便捷,比如说表单,在填写或提交表单时,界面上会根据用户的操作做出及时的相应,这就是一种双向数据绑定的最有力的应用场景。

  html:

<!doctype html>
<html ng-app="MyModule"><head><meta charset="utf-8"></head><body><div ng-controller="HelloAngular"><input ng-model="greeting.text"/><p>{{greeting.text}},Angular</p></div></body><script src="js/angular-1.3.0.js"></script><script src="HelloAngular_MVC.js"></script>
</html>

  js(还是上例中的js):

var myModule = angular.module('MyModule', []);myModule .controller('HelloAngular', ['$scope',$scope.greeting = {text: 'Hello'};
]);

  运行结果:

  注意:这个例子很好地诠释了什么是双向绑定。

  首先在html中声明了两个标签:一个输入框<input>和一个段落标记<p>。

  显然采用了两种绑定的方式:{{}}和ng-model,但是功能都是数据绑定,与js文件中控制器中的greeting.text进行了绑定。所以,通过js中greeting.text的赋值会使得前台Html中input和p同时显示“Hello”

  这一步完成的是AngularJS的scope中的数据模型绑定了的前台View中,那么前台的数据变化是否会影响到数据模型,通过改变input中的值,我们得到结果:

  在输入框中的任何输入都会及时的反应在下面的段落中,这也说明了在Html中改变数据也会及时的映射到后台数据模型,真正的实现了双向数据绑定。

  本想在本篇再介绍下AngularJS的表达式,限于时间和篇幅,留在下篇吧,如果觉得有用,记得点赞,同时本文也会推送到公众号:JackieZheng,欢迎关注哈^_^

  本文链接:《AngularJS入门心得2——何为双向数据绑定》

  如果您觉得阅读本文对您有帮助,请点一下“推荐”按钮,您的“推荐”将是我最大的写作动力!如果您想持续关注我的文章,请扫描二维码,关注JackieZheng的微信公众号,我会将我的文章推送给您,并和您一起分享我日常阅读过的优质文章。

  

友情赞助

如果你觉得博主的文章对你那么一点小帮助,恰巧你又有想打赏博主的小冲动,那么事不宜迟,赶紧扫一扫,小额地赞助下,攒个奶粉钱,也是让博主有动力继续努力,写出更好的文章^^。

    1. 支付宝                          2. 微信

                      

 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/544787.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Java ClassLoader getParent()方法与示例

ClassLoader类的getParent()方法 (ClassLoader Class getParent() method) getParent() method is available in java.lang package. getParent()方法在java.lang包中可用。 getParent() method is used to return the parent class loader for delegations. getParent()方法用…

Java中那些内存泄漏的场景!

虽然Java程序员不用像C/C程序员那样时刻关注内存的使用情况&#xff0c;JVM会帮我们处理好这些&#xff0c;但并不是说有了GC就可以高枕无忧&#xff0c;内存泄露相关的问题一般在测试的时候很难发现&#xff0c;一旦上线流量起来可能马上就是一个诡异的线上故障。内存泄露定义…

@html.ActionLink的几种参数格式

http://blog.csdn.net/jingmeifeng/article/details/7792151 一 Html.ActionLink("linkText","actionName") 该重载的第一个参数是该链接要显示的文字&#xff0c;第二个参数是对应的控制器的方法&#xff0c;默认控制器为当前页面的控制器&#xff0c;如…

Java ClassLoader findClass()方法与示例

ClassLoader类findClass()方法 (ClassLoader Class findClass() method) findClass() method is available in java.lang package. findClass()方法在java.lang包中可用。 findClass() method is used to find the class with the given binary class name. findClass()方法用于…

ThreadLocal内存溢出代码演示和原因分析!

作者 | 王磊来源 | Java中文社群&#xff08;ID&#xff1a;javacn666&#xff09;转载请联系授权&#xff08;微信ID&#xff1a;GG_Stone&#xff09;前言ThreadLocal 翻译成中文是线程本地变量的意思&#xff0c;也就是说它是线程中的私有变量&#xff0c;每个线程只能操作自…

C,C++宏中#与##的讲解

文中__FILE__与示例1可以参见《使用ANSI C and Microsoft C中常用的预定义宏》宏中的#的功能是将其后面的宏参数进行字符串化操作&#xff08;Stringizing operator&#xff09;&#xff0c;简单说就是在它引用的宏变量的左右各加上一个双引号。 如定义好#define STRING(x) #x之…

int?id与id??1 的意思

http://blog.csdn.net/jingmeifeng/article/details/24710143 int? id 表示id是可以为null的整型 跟Nullable<int> id 是一样的 id ?? 1等于 idnull?1:id;

彻夜怒肝!Spring Boot+Sentinel+Nacos高并发已撸完,快要裂开了!

很多人说程序员是最容易实现财富自由的职业&#xff0c;也确实&#xff0c;比如字节 28 岁的程序员郭宇不正是从普通开发一步步做起的吗&#xff1f;回归行业现状&#xff0c;当开发能力可以满足公司业务需求时&#xff0c;拿到超预期的 Offer 并不算难。最近我也一直在思考这个…

java中get接口示例_Java LocalDateTime类| 带示例的get()方法

java中get接口示例LocalDateTime类的get()方法 (LocalDateTime Class get() method) get() method is available in java.time package. get()方法在java.time包中可用。 get() method is used to get the value for the given field from this date-time object. get()方法用于…

湖南多校对抗5.24

据说A,B,C题都比较水这里就不放代码了 D:Facility Locations 然而D题是一个脑经急转弯的题&#xff1a;有m行&#xff0c;n列&#xff0c;每个位置有可能为0&#xff0c;也可能不为0&#xff0c;问最多选K行是不是可以使得每一列都至少有一个0&#xff0c;其中代价c有个约束条件…

PPT演讲计时器

下载 GitHub 源码地址 如果访问不到的话&#xff0c;可以从百度盘下载&#xff1a; 链接&#xff1a;https://pan.baidu.com/s/1bK4sug-eK85fmPgi9DzhcA 提取码&#xff1a;0vp3 文件&#xff1a;VB.Equal.Timer-VB计时器软件-绿色无残留 写在前面 转眼也工作了两年了&…

2万字!66道并发面试题及答案

我花了点时间整理了一些多线程&#xff0c;并发相关的面试题&#xff0c;虽然不是很多&#xff0c;但是偶尔看看还是很有用的哦&#xff01;话不多说&#xff0c;直接开整&#xff01;01 什么是线程&#xff1f;线程是操作系统能够进⾏运算调度的最⼩单位&#xff0c;它被包含在…

stl向量_如何在C ++ STL中将数组元素复制到向量?

stl向量Given an array and we have to copy its elements to a vector in C STL. 给定一个数组&#xff0c;我们必须将其元素复制到C STL中的向量。 将数组元素复制到向量 (Copying array elements to a vector) In C STL, we can copy array elements to a vector by using…

YoloV8的目标检测推理

YoloV8的目标检测推理 原始的YoloV8封装的层次太高&#xff0c;想要为我们所用可能需要阅读很多API&#xff0c;下面给出比较简单的使用方式 导入所需的库 os&#xff1a;用于操作文件系统。cv2 (OpenCV)&#xff1a;用于图像处理。numpy&#xff1a;提供数学运算&#xff0…

【翻译】从Store生成Checkbox Group

原文&#xff1a;Ext JS: Generating a Checkbox Group from a StoreExt JS的checkbox group可以用来将复选框组合成一个单一的逻辑字段。由于复选框时不时需要动态的从Store中生成&#xff0c;因而&#xff0c;如果将store绑定到扩展类&#xff0c;就最好不过了。以下是第一次…

25种代码坏味道总结+优化示例

前言什么样的代码是好代码呢&#xff1f;好的代码应该命名规范、可读性强、扩展性强、健壮性......而不好的代码又有哪些典型特征呢&#xff1f;这25种代码坏味道大家要注意啦1. Duplicated Code &#xff08;重复代码&#xff09;重复代码就是不同地点&#xff0c;有着相同的程…

滚动照片抽奖软件

CODE GitHub 源码 1、女友说很丑的一个软件 说个最近的事情&#xff0c;女友公司过年了要搞活动&#xff0c;需要个抽奖的环节&#xff0c;当时就问我能不能给做一个&#xff0c;正好我也没啥事儿&#xff0c;就在周末的时候用C#做了一个&#xff0c;虽然派上用场了&#xf…

Java即时类| 带示例的compareTo()方法

即时类compareTo()方法 (Instant Class compareTo() method) compareTo() method is available in java.time package. compareTo()方法在java.time包中可用。 compareTo() method is used to compare this Instant object to the given object. compareTo()方法用于将此Instan…

11个小技巧,玩转Spring!

前言最近有些读者私信我说希望后面多分享spring方面的文章&#xff0c;这样能够在实际工作中派上用场。正好我对spring源码有过一定的研究&#xff0c;并结合我这几年实际的工作经验&#xff0c;把spring中我认为不错的知识点总结一下&#xff0c;希望对您有所帮助。一 如何获取…

MFC中的几种播放声音的方法

一&#xff0e;播放声音文件的简单方法  在VC 中的多媒体动态连接库中提供了一组与音频设备有关的函数。利用这些函数可以方便地播放声音。最简单的播放声音方法就是直接调用VC中提供的声音播放函 数BOOL sndPlaySound ( LPCSTR lpszSound,UINT fuSound ); 或BOOL PlaySound(…