网站建设风险管理计划,高校学校网站建设,ppt制作神器,wordpress oa前言#xff1a;谁说Test工作比较轻松#xff0c;最近在熟悉几个case#xff0c;差点没疯。最近又是断断续续的看我的AngularJS#xff0c;总觉得自己还是没有入门#xff0c;可能是自己欠前端的东西太多了#xff0c;看不了几行代码就有几个常用函数不熟悉的。看过了大漠… 前言谁说Test工作比较轻松最近在熟悉几个case差点没疯。最近又是断断续续的看我的AngularJS总觉得自己还是没有入门可能是自己欠前端的东西太多了看不了几行代码就有几个常用函数不熟悉的。看过了大漠的视频算是了解了AngularJS的一些优良特性。后来准备投身《AngularJS权威教程》跟着它走可是一来可能自己道行不够二来个人觉得这本书翻译的有些生硬以及一些瑕疵比如 19.2节在指令中适用自作用域 29.2节在指令中适用自作用域 当然以上都是一些瑕疵希望译著作者不要见怪哈^_^! 所以在囫囵吞枣的看到第十章我觉得先搁置至此去ngnice看看。可能我还是需要一些概念上的输入比如双向数据绑定、表达式、指令等等。 正文今天主要介绍AngularJS双向数据绑定 1.理论介绍 什么是双向数据绑定既然号称双向数据绑定重点肯定在“双向”上了显然有双向必有单向那两者有何区别先看下面两幅图 上图单向绑定 它们将模板和数据合并起来加入到视图中去如图表中所示。合并完成之后从图中的流向可以看出任何对数据模型或者相关内容的改变都不会自动反映到视图中去。而且用户对视图的任何改变也不会自动同步到数据模型中来。这意味着开发者需要编写代码来保持视图与模板、模板与视图的同步无疑增加了开发的工作量。 那么有没有可以自动实现这种双向机制的框架有请看 下图双向绑定 AngularJS的数据绑定是数据模型(model)与视图(view)组件的自动同步。Angular的实现方式允许你把应用中的模型看成单一数据源。而视图始终是数据模型的一种展现形式。当模型改变时视图就能反映这种改变反之亦然。 2. 代码演示 html: !doctype html
html ng-appMyModuleheadmeta charsetutf-8/headbodydiv ng-controllerHelloAngularp{{greeting.text}},Angular/p/div/bodyscript srcjs/angular-1.3.0.js/scriptscript srcHelloAngular_MVC.js/script
/htmljs: var myModule angular.module(MyModule, []);myModule .controller(HelloAngular, [$scope,$scope.greeting {text: Hello};
]);运行结果:Hello,Angular 解读这里的{{}}相当于ng-model指令其实就是一种绑定但是仅从这个例子不能说实现了双向数据绑定。这里是将AngularJS的数据模型Model的值绑定到了视图View上了如果html文件中没有引入 script srcHelloAngular_MVC.js/script则通过运行发现界面实现的是{{greeting.text}},Angular 也就是说AngularJS的scope中的模型值没有绑定到前台界面html中。反之引入了HelloAngular_MVC.js则实现在前端界面中映射到了数据模型数据。 上面介绍的不能算是双向数据绑定下面引出真正的双向绑定那么双向数据绑定有何应用场景什么样的情况需要数据模型与视图能够相互映射相互影响呢可能是你没有察觉现在很多的网站都能看到这种思想带来的极大便捷比如说表单在填写或提交表单时界面上会根据用户的操作做出及时的相应这就是一种双向数据绑定的最有力的应用场景。 html !doctype html
html ng-appMyModuleheadmeta charsetutf-8/headbodydiv ng-controllerHelloAngularinput ng-modelgreeting.text/p{{greeting.text}},Angular/p/div/bodyscript srcjs/angular-1.3.0.js/scriptscript srcHelloAngular_MVC.js/script
/htmljs还是上例中的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. 微信
