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