美文网首页我爱编程
2018-03-02初学angular,双向绑定

2018-03-02初学angular,双向绑定

作者: OK_8242 | 来源:发表于2018-03-02 16:11 被阅读0次

大家好,我是IT修真院成都分院第10期学员李劲宏,一枚正直纯洁善良的web程序员,今天给大家分享一下angularJS.初学angular,写的不好,请见谅。

angular是什么?

AngularJS[1] 诞生于2009年,由Misko Hevery 等人创建,后为Google所收购。是一款优秀的前端JS框架, 已经被用于Google的多款产品当中。AngularJS有着诸多特性,最为核心的是:MVC、模块化、双向数据绑定、语义化标签、依赖注入等等。

AngularJS是为了克服HTML在构建应用上的不足而设计的。HTML是一门很好的伪静态文本展示设计的声明式语言, 但要构建WEB应用的话它就显得乏力了。AngularJS通过MVC模式(MVC)功能增强基于浏览器的应用,使开发和测试变得更加容易。

通常,我们是通过js来解决静态网页技术在构建动态应用上的不足;但是原生js代码量会很大;

类库 - 类库是一些函数的集合,它能帮助你写WEB应用。起主导作用的是你的代码,由你来决定何时使用类库。类库有:jQuery等

框架 - 框架是一种特殊的、已经实现了的WEB应用,你只需要对它填充具体的业务逻辑。这里框架是起主导作用的,由它来根据具体的应用逻辑来调用你的代码。目前比较流行的有angular,vue,React,

2.知识剖析

angular的核心思想

Angular是创建在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而命令式编程非常适合来表示业务逻辑。[3]框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,Angular使得对DOM的操作不再重要并提升了可测试性。

angular的亮点和过人之处!

1.代码组织结构清晰

AngularJS模块划分明确,不同的代码有其明确的存放处,可读性强,便于维护和扩展(后面会有代码组织结构图)。

3.常见问题

怎么体现在代码?

angular的核心思想

Angular是创建在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而命令式编程非常适合来表示业务逻辑。[3]框架采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,Angular使得对DOM的操作不再重要并提升了可测试性。

angular的亮点和过人之处!

1.代码组织结构清晰

AngularJS模块划分明确,不同的代码有其明确的存放处,可读性强,便于维护和扩展(后面会有代码组织结构图)。

2.功能模块易测试

AngularJS的代码方便测试。虽然代码易测试不能成为一个框架闪光的决定性因素,但是反向思考,如果写出来的代码可测试性差将会使工作效率事倍功半。

3.常见问题

怎么体现在代码?

双向绑定

双向绑定的出现,无可争议的大大简化了你的代码量,与其说是技术的革新,不如说是一场思想上的颠覆与突破。回想jQuery还需要通过在DOM中找到需要的元素并在其上添加事件监听,通过触发事件(如点击等)才能解析获取DOM元素中的值。而在AngularJS中只需要将DOM中的元素与js的某个属性绑定,js属性值变化会同步到DOM元素上,同样的,DOM元素值得变化也会映射到js的属性上。夸张点说,一个是刀耕火种,一个是蒸汽驱动。

问题分享:

1ng-bind和{{}}的区别?

回答:

{{text}}

一样的效果

但使用花括号语法时,在AngularJS使用数据替换模板中的花括号时,第一个加载的页面,通常是应用中的index.html,其未被渲染的模板可能会被用户看到

对于index.html页面中的数据绑定操作,建议采用ng-bind。那么在数据加载完成之前用户就不会看到任何内容。

作者:额尔齐斯冷

链接:https://www.jianshu.com/p/56dcc0989482

來源:简书

著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。

2 双向绑定数据机制潜在的缺点?

常见的误解就是认为:ng是定时轮询去检查mode是否变更,其实,ng只有在指定事件触发后,才进入$digestcycle。

3nagularjs的优缺点?

优点:数据双向绑定是项目结构更加清晰,view ,controller,mode。等的细化便于多人协作开发。

缺点:对于新手(特别是对于MVC或者JS不熟的教难上手),严格的angularJS写法要求DOM操作都封装在directive,在实际应用如果某模块有比较频繁的复杂的dom操作,难以实现。

相关文章

  • 2018-03-02初学angular,双向绑定

    大家好,我是IT修真院成都分院第10期学员李劲宏,一枚正直纯洁善良的web程序员,今天给大家分享一下angular...

  • 用Angular.js做的购物车

    有bootstrap 框架及angular 引入即可对于初学angular者练手双向绑定最合适,话不多说直接上代码...

  • Angular学习第一天

    Angular学习第一天 第一天学习目标 如何创建angular新工程 什么是单向绑定 什么是双向绑定 双向绑定需...

  • Angular5踩坑总结

    表单双向绑定1:做双向绑定时,如果遇见Angular: Can't bind to 'ngModel' since...

  • angular双向绑定

    MVVM的核心机制就是双向绑定。React、Vue、Angular的双向绑定,都是基于MVVM的设计模式。 双向绑...

  • Angular 2入门(二)

    (纯属个人笔记,摘要记录) 双向绑定 [(ngModel)]是Angular的双向数据绑定的语法。 用法如下: 因...

  • Angular checkbox 遭遇双向绑定问题

    初学Angular 时遇到过关于checkbox 双向绑定的问题,看代码: 运行后,控制台报错: 嗯嗯,意思是如果...

  • 双向绑定和单向绑定

    Vue 的双向绑定(也是 Angular 的双向绑定)有这些功能: 只要 JS 改变了 view.number 或...

  • Angular学习笔记-双向绑定

    Angular和Vue一样都是MVVM的框架,MVVM的核心机制就是双向绑定。 双向绑定将属性绑定与事件绑定结合在...

  • angular,vue,react数据双向绑定原理分析

    在不同的 MVVM 框架中,实现双向数据绑定的技术有所不同。 Angular数据绑定 Angular 采用“脏值检...

网友评论

    本文标题:2018-03-02初学angular,双向绑定

    本文链接:https://www.haomeiwen.com/subject/dwvaxftx.html