Angular2笔记（1）——初步认识
Angular2笔记（1）——初步认识笔者原来是一个纯后端屌丝程序员,在学校的时候,看见 html/js 就头疼,最不愿意看见的就是css。工作后,发现项目组没有前端工程师,谁的模块谁从头到尾自己负责,前端开发的任务自然就落在了我们这些后端工程师身上。前端写得多了,渐渐发现前端已经不再是以前自己认识的那个前端,它的复杂度不亚于后端。近些年,可以说是前端技术爆发的年代,像 angularjs1/2、reactjs、vuejs等新技术和新概念不断提出,使前端的开发模式发生了巨大的变化。 前端技术蓬勃发展,作为一个”伪全栈”工程师,不能视而不见。JQuery 虽然很好用,但毕竟是2006年的技术了,现在的很多新应用已经完全不再使用 JQuery。为了跟上时代潮流,得学点新东西。选择学 Angular2 的原因很简单: 专业的分析还有包括: Angular有牛叉的模块化技术、它是未来的标准等等。进入正题,总得来说 Angularjs1/2 的学习过程还是比较陡峭的,在1里面,概念非常多,2中封装的更好了。具体的区别请参看官网: https://angular.cn/docs/ts/latest/。 Angular2 更多的吸收了后端程序设计的理念,因此有后端程序设计经验的可能学起来更加容易。 Angular2 和 Angular1 没有太大的相关性,基本上属于全部推倒了重写,因此初学者可以直接学习 Angular2。Angular2 的学习资料有很多,Google 自己制作的文档也相对齐全。本系列文章并不会对 Angular2 的基本的语法做大量的讲解,而主要聚焦在一些非常重要的概念以及一些优秀实践。 Angular2 本地环境部署较为复杂,后面可以考虑专门写文章讲解。本文的例子全部采用 Google 官方文档中的在线运行环境 Plunker 运行,这样可以暂时不理会环境带来的问题。 Angular2 以组件为核心,而 Angular1 则是围绕着 在Angular2中,模型和视图是分离的,所谓的双向数据绑定是指: 绑定在视图上的变量当它的值发生变化的时候,这个变化会里面反馈到模型中相同名字的变量上(视图到模型的方向),而模型中的变量的值发生变化的时候,这个变化也会立马反映到绑定该变量的所有视图上(视图到模型的方向)。 下面就以 Angular2 的语法风格来写一个具体的例子,该例子展现了双向数据绑定: <!doctype html> <html> <head> <meta charset="utf-8"> //... 引入文件 </head> <body> <ez-app></ez-app> <script type="module"> import {Component,View,bootstrap,NgIf} from "angular2/angular2"; import {formDirectives} from "angular2/forms"; @Component({selector:"ez-app"}) @View({ directives:[NgIf,formDirectives],template:` <form> <ul> <li>姓名：<input type="text" ng-control="name" [(ng-model)]="data.name"></li> <li>地址：<input type="text" ng-control="address" [(ng-model)]="data.address"></li> <li>电话：<input type="text" ng-control="telephone" [(ng-model)]="data.telephone"></li> </ul> </form> <hr/> 详细信息如下: <br/> 姓名: {{data.name}} <br/> 地址: {{data.address}} <br/> 电话: {{data.telephone}} <br/> ` }) class EzApp{ constructor(){ this.data = { name : "王二小",address : "中国",telephone : "001001" }; } } bootstrap(EzApp); </script> </body> </html>
代码解释: 效果如下: Angular2中依然继承了Angular1中非常强大的数据双向绑定,对于页面中需要操纵大量数据的应用来说,这是一个福音,只需要在视图或者模型中一个地方改变数据,另一个地方会同步改变,配合Angular2的其他指令,基本上不需要操纵DOM,只用操纵数据即可完成功能,而操纵数据不是后端工程师的强项吗? 本片文章主要简单介绍了Angular2,并演示了Angular2中双向数据绑定,文章写得匆忙,后面会更多介绍优秀实践。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |