`
kowen
  • 浏览: 113299 次
  • 性别: Icon_minigender_1
  • 来自: 东营
社区版块
存档分类
最新评论

理解Angular中的数据绑定

阅读更多

理解Angular中的数据绑定

【原文】:https://docs.angularjs.org/guide/databinding
【翻译者】:kowen@live.cn
 
https://docs.angularjs.org/guide/databinding 写道
Data-binding in Angular apps is the automatic synchronization of data between the model and view components. The way that Angular implements data-binding lets you treat the model as the single-source-of-truth in your application. The view is a projection of the model at all times. When the model changes, the view reflects the change, and vice versa.

 Angular 中的数据绑定是指数据在模型和视图之间的自动同步。Angular中数据绑定的实现方式让模型成了数据的唯一可靠源(靠这句话真难翻译,直译过来大部分人肯定读不明白,意思就是你只用管模型的数据,因为视图中的数据是和模型自动同步的;以前好多mvc框架中的模型和视图之间的同步是用代码实现的,搞不好就会出现模型和视图不一致的情况)。视图和模型中的数据是实时保持一致的,只要模型中数据一改变,视图中马上会显示出改变的数据,反过来也是一样。

 

-----------------------------------------------------------------------------------------------------------------------------------

 

Data Binding in Classical Template Systems

传统模板的数据绑定



 

写道
Most templating systems bind data in only one direction: they merge template and model components together into a view. After the merge occurs, changes to the model or related sections of the view are NOT automatically reflected in the view. Worse, any changes that the user makes to the view are not reflected in the model. This means that the developer has to write code that constantly syncs the view with the model and the model with the view.

  大多数模板系统的数据绑定都是单向的:直接把模板和数据组件合并后显示出视图。合并后,模板或者相关组件的数据变化不会自动在视图中反应出来。更要命的是,用户对视图中数据的修改不会反映到模型中。这意味者开发人员必须手工写出数据在模型和视图来回同步的两套代码。

 

-------------------------------------------------------------------------------------

Data Binding in Angular Templates

Angular中的数据绑定



 

写道
Angular templates work differently. First the template (which is the uncompiled HTML along with any additional markup or directives) is compiled on the browser. The compilation step produces a live view. Any changes to the view are immediately reflected in the model, and any changes in the model are propagated to the view. The model is the single-source-of-truth for the application state, greatly simplifying the programming model for the developer. You can think of the view as simply an instant projection of your model.

 Angular模板工作原理和传统模板非常不同。首先,模板是在浏览器端编译的(模板是指未编译的、包含非标准html标签和angular指令的html文档)。编译这步提供了一个活的视图,任何模型中的变化都会传播到视图中。模型是应用数据唯一的可信来源(靠又来了),这大大方便了程序员的开发。说白了,视图和模型的关系就是夫唱妇随、妇唱夫随、狼狈为奸。 

 

写道
Because the view is just a projection of the model, the controller is completely separated from the view and unaware of it. This makes testing a snap because it is easy to test your controller in isolation without the view and the related DOM/browser dependency. 

 因为视图和模型这对狗男女的关系,控制器就不需要去管视图这个婊子了,只管好这个男人就行了,反正这个男人咋干女的就咋干。这样以来,写好控制器代码后,测试工作就变得轻而易举,因为测试可以甩掉视图这个婊子和她的变态父母dom、brower了。

 

 

 

  • 大小: 31.6 KB
  • 大小: 49.1 KB
分享到:
评论

相关推荐

    理解Angular数据双向绑定

    AngularJS诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。这篇文章主要带着大家理解Angular数据双向绑定,感兴趣的小伙伴们可以参考一下

    AngularJS 双向数据绑定详解简单实例

    angular的双向数据绑定,个人理解是,通过model建立数据模型,那么视图上的数据就会对应存储在angular程序里,视图上的数据变化会同步到model,model的数据改变也会同步到视图。 下面的demo演示: <!DOCTYPE ...

    对Angular中单向数据流的深入理解

    主要给大家介绍了关于对Angular中单向数据流的深入理解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。

    vue.js数据绑定的方法(单向、双向和一次性绑定)

    感觉 vue 的很多方面的内容,都参考了 angular 的东西,数据绑定方面,更是赤裸裸的“抄袭”。对照来看,更有助于我们学习和理解框架本身透露出来的思想,而非框架本身。 一、单向绑定 (一)Mustache 语法,双大...

    浅谈AngularJs 双向绑定原理(数据绑定机制)

    首先我们要理解数据绑定。我们看到的网站页面中,是由数据和设计两部分组合而成。将设计转换成浏览器能理解的语言,便是html和css主要做的工作。而将数据显示在页面上,并且有一定的交互效果(比如点击等用户操作及...

    深入理解Angularjs向指令传递数据双向绑定机制

    主要深入的给大家介绍了Angularjs向指令传递数据,双向绑定机制的相关资料,需要的朋友可以参考下

    Angular之指令Directive用法详解

    不同于jQuery,Angular设计核心思想是通过数据与模板的绑定,摆脱繁琐的DOM操作,而将注意力集中在业务逻辑上。 几种常见指令ng-app 指令用来指定ng的作用域是在那个标签以内部分(<html ng-app=”myApp”>标签...

    再谈Angular4 脏值检测(性能优化)

    Angular 4的脏值检测是个老话题了,而理解这个模型是做Angular性能优化的基础。因此,今天我们再来聊聊Angular 4脏值检测的原理,并看看性能优化的小提示。 进入点 – Zone.js Angular 4是一个MVVM框架。数据模型...

    当下较新的30道VUE面试题!.rar

    Vue 借鉴了 angular 的模板和数据绑定技术,又借鉴了 react 的组件化和虚拟 DOM 技术。 对 Vue 比较熟一些是吧~(这里只说 Vue 假设你就只熟练 Vue ) 那首先谈谈你对Vue的理解吧? 答案 官网介绍: ...

    Angular 4.0学习教程之架构详解

    前言 前段时间谷歌发布了广受欢迎的Angular JavaScript框架的4.0版本,该版本致力于缩小生成代码的体积,以及保持框架的简化发布计划。 很久没写这种比较偏概念类的东西了,不过我觉得没有形成一... 数据绑定 (data bin

    Angular.js中$apply()和$digest()的深入理解

    数据绑定意味着当View中有任何数据发生了变化,那么这个变化也会自动地反馈到scope的数据上,也即意味着scope模型会自动地更新。类似地,当scope模型发生变化时,view中的数据也会更新到最新的值。那么AngularJS是...

    VUE资源VUE学习必用VUE常见面试题进阶面试题

    双向数据绑定:保留了angular的特点,在数据操作方面更为简单; 组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不需要...

    Vuejs开发环境搭建及热更新【推荐】

    Vue.js是数据驱动的,它通过一些特殊的语法,将DOM和数据绑定起来,无需手动操作DOM。一旦创建了绑定,DOM将和数据保持同步,每当变更了数据,DOM也会相应地更新。 一、安装NPM 1.1最新稳定版本: npm install vue ...

    Vue面试题经典必看必备

    双向数据绑定:保留了angular的特点,在数据操作⽅⾯更为简单; 组件化:保留了react的优点,实现了html的封装和重⽤,在构建单页⾯应⽤⽅⾯有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不需要进...

    vue2023面试题及答案

    双向数据绑定:保留了 angular 的特点,在数据操作方面更为简单; 组件化:保留了 react 的优点,实现了 html 的封装和重用,在构建单 页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不...

    前端vue框架2023面试题

    双向数据绑定:保留了angular的特点,在数据操作方面更为简单; 组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不需要...

    前端语言vue常见面试题

    双向数据绑定:保留了angular的特点,在数据操作方面更为简单; 组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不需要...

    精选整理常见100个vue面试题

    双向数据绑定:保留了angular的特点,在数据操作方面更为简单; 组件化:保留了react的优点,实现了html的封装和重用,在构建单页面应用方面有着独特的优势; 视图,数据,结构分离:使数据的更改更为简单,不需要...

    understanding-rx:理解RxJS基础的指南

    范围像Angular这样的数据绑定框架已经充分利用了检查应用程序数据的更改并通知应用程序部分相关数据已更改的功能。 框架经常使用脏检查来实现这种数据绑定,在脏检查中扫描范围是否发生变化 。洛达什Rx以与其他函数...

Global site tag (gtag.js) - Google Analytics