AngularJS的数据绑定功能展示

在AJAX型的单页应用普及之前,类似Rails、PHP和JSP之类的平台都可以帮助我们创建用户界面(UI),它们会把HTML字符串和数据混合起来,然后再发送给用户并显示。

而jQuery之类的库则在客户端继承了这一模型,让我们遵守类似的风格,但是使用jQuery可以单独刷新DOM中的局部内容,而不是刷新整个页面。在jQuery中,我们会把HTML模板字符串和数据混合起来,然后把获得的结果插入DOM中我们所期望的位置,插入的方式是把结果设置给一个占位符元素的innerHtml属性。

以上机制都工作得相当不错,但是当你想要把最新的数据插入到UI中,或者根据用户输入来修改数据的时候,你就需要做很多极其繁琐的工作来保证数据的状态是正确的,并且UI和JavaScript属性要同时正确。

但是,如果我们不需要编写代码就能做到以上所有事情会怎么样?如果我们可以仅仅声明UI中的某个部分需要映射到某个JavaScript属性,然后让它们自己去同步会怎么样?这种编程风格叫做数据绑定。因为它可以和MVC很好地结合起来,所以我们把它引入到了Angular中。这样一来,当你编写视图和模型的时候,可以节省代码量。在UI中,把数据从一个值修改成另一个值的大部分工作会自动进行。

为了在实战中看到这一点,我们来修改第一个例子,让它变成动态的。目前的情况是,HelloController会给模型greeting.text赋一次值,之后再也不会修改它。为了让它变成动态的,我们来修改这个例子,增加一个文本输入框,它会把greeting.text的值修改成用户所输入的内容。下面是新的模板:

控制器HelloController保持原样不变。把这个例子加载到浏览器中,效果如图所示。

本文来自企鹅号 - 行家汇媒体

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

在Windows笔记本上调试运行在iOS设备上的前端应用

我在每天工作中需要在不同的移动设备上测试我们开发的前端应用是否正常工作,比如iOS设备和Android设备。我用的工作笔记本电脑又是Lenovo的,安装的是Wi...

18910
来自专栏CodingBlock

Android查缺补漏(View篇)--布局文件中的“@+id”和“@id”有什么区别?

Android布局文件中的“@+id”和“@id”有什么区别? +id表示为控件指定一个id(新增一个id),如: <cn.codingblock.view.c...

33180
来自专栏python学习之旅

Python网络爬虫笔记(三):下载博客园随笔到Word文档

(一)   说明 在上一篇的基础上修改了下,使用lxml提取博客园随笔正文内容,并保存到Word文档中。 操作Word文档会用到下面的模块: pip insta...

50160
来自专栏源码之家

DEDEcms 采集规则批量修改替换

2、从phpmyadmin中导出表dede_co_note,导出格式可选为CSV。

27210
来自专栏Debian社区

Tmux 快速教程:快捷键和配置

Tmux 简单来说就是终端里的『窗口管理器』,如果我使用终端登录到远程主机并运行前台程序,那么这个窗口等于就被占用了,想要看一下 CPU 的使用率,就得再连接一...

44620
来自专栏向治洪

微信小程序开发入门篇

本文档将带你一步步创建完成一个微信小程序,并可以在手机上体验该小程序的实际效果。 开发准备工作 获取微信小程序的 AppID 登录 https://mp.wei...

54460
来自专栏進无尽的文章

兼容-记录Xcode8.0恢复插件全过程

Xcode 的插件大大丰富了 Xcode 的功能,而且有了 Alcatraz ,插件的管理也非常容易,但是有个非常恼人的问题:一旦升级 Xcode ,插件就失效...

17420
来自专栏大前端开发

微信小程序新增拖动组件:movable-view

小程序在520节日前夜,让程序员们又躁动了一把,更新了一些很诱人的功能,如内容转发API,iBeacon API,振动API,屏幕亮度调节API等,也增强了地图...

18240
来自专栏DeveWork

WordPress纯代码高仿 无觅相关文章 图文模式功能

无觅的相关文章插件确实是一个不错的插件,Jeff的阳台到现在还在使用它(貌似产生了依赖性)。但到了devework.com,为了体现轻度、代码化的主题制作理念。...

213100
来自专栏coding

vue.js进行数据监听

13230

扫码关注云+社区

领取腾讯云代金券