这篇文章结合了我入门的过程与心得体会,篇幅会显得有点啰嗦,不喜勿喷。
9月14日,angular2正式版发布,而公司新项目处于准备启动阶段,我也在做技术选型,此前我花了两周时间在学习react+webpack+es6的技术栈,都是前端非常时髦的技术(我承认我是几个技术爱好者,不过这么做确实有点冒险,一个人研究,然后去应用),不过react+redux的工作方式,以及webpack打包后怎么部署到服务器上去等问题,都对我造成困扰,react技术文档虽然挺多,但是能够解答我困惑的平台不多,经常会为一些问题在搜索引擎上大海捞针一样翻出好多文章了解,前期海量的学习让我觉得一个人搞不定了。转向去学习angular2,唯一的风险点就是ng2对ie8并不支持。此时公司对浏览器的要求,随着另外一个项目开发的进展,也逐渐的转向了主要支持chrome浏览器(我们的用户大多是使用360的,虽然不喜欢,但用户数量不容忽视,好在360默认是急速模式就是chrome内核,差别不会太大,兼容模式的ie内核也不会旧到ie8内核),另外一个选择ng2的原因,就是我们另外项目的技术栈用的是ng1,ng2也为ng1提供了一个升级的渠道,在此之前我已经用ng1开发项目1年多时间,对社区也比较熟悉,ng1中文社区也随着ng2的推出转型了,群里会为我们提供大量的及时的技术支持,群里的几个大佬就是ng2中文网的主力,他们负责在中国推动普及ng2技术的使用,如此强大的技术支撑,给我很大的信心,后面又加入了ng2的微信兴趣讨论群,微信群闲聊的成分会更少一些,相比之下,react的Q群居然要50元的入群费,显得有点不厚道,太火的原因吗?
ng2相关的技术栈,可以参照https://www.zhihu.com/question/48670501。
我学习的过程也基本是按照这个顺序来的。
学习过程中涉及到的相应网址我会跟着贴出来。
在开始学习ng2语法之前,先学习es6(scma script 6)和ts(typescript)的语法是必不可少的过程,否则看ng2官网的代码会觉得吃力。学习周期建议2周,以联系为主,其中变量、class、模块是重点,和ng2语法有很大关联。ts是es6的超集,ts就是在es6的基础,主要增加了装饰器,装饰器在ng2里面经常用到,虽然官网也提供了js版的教程,感觉那样写法会不太方便。
开发工具建议使用vscode,官网的风格指南中提供了ng2的插件,辅助写ng2非常方便,另外vscode还有很多强大的插件可以用,安装非常方便,界面简洁,最主要的优势是打开大文件速度很快,这是sublime\atom都不能比的,微软的良心之作,ts也是微软出品,两者结合非常完美,ng2框架就是谷歌和微软强强联手打造的框架,将来必火。
现在开始讲讲ng2入门过程,一开始的主要资源来自于ng2中文官网,先从hello world开始,最简单的环境搭建,官网使用的构建工具是systemjs,这让人有点不适应,不过好在最后官网也提供了一个webpack+ng2的教程,可以无缝对接,没看出systemjs好在哪里,资料也不是很多,还是时下最火的webpack用着比较顺手。不过在学习ng2语法期间还是用systemjs。
ng2中文网,从快速起步到英雄教程,再到开发指南、高级文档、烹饪指南,在开发指南之前的内容都比较基础,以熟练为主,通过练习、操作官网教程掌握语法,英雄教程已经提供了一个完整的技术展示(虽然技术不深),掌握了开发指南之前的内容,已经能上手简单的开发了。高级文档和烹饪指南,顾名思义,设计到复杂的应用和高级的语法,可以慢慢去消化打磨。ng2的框架语法需要两周学习时间。后面的代码以阅读为主,可以复制代码本地运行,再尝试改改代码看看运行结果,以理解为主,项目代码可以在以后作为字典查阅,例如路由、组件通信和模块等内容都非常具有参考价值。
官网中http请求涉及到另外一个非常大的知识点:rxjs,掌握这一套知识点需要非常多的时间(当然这套技术栈里面的每一面想吃透都需要非常多的时间打磨),前期我们只要会简单应用就可以了,拿来做数据请求,回调后再简单处理下数据。
到这里技术栈还剩余一个webpack,webpack和模块化的框架搭配使用非常使用,因为在webpack看来,一切都是可以模块化的,包括html\css\js,甚至图片,把前端打包带入一个新的境界。不过缺点是资料缺失太少,除了阮一峰的demo和一些中文文档,主要还是英文官网。对webpack的要求只能看懂经常用到的语法即可。后面我们用现成的框架开发,不需要自己去搭开发环境。wepack的入门时间也需要一周时间。
掌握这套技术栈以后,我们需要一个脚手架来开始开发,推荐的有两个angular-cli(ng2团队还在开发中)、angular2-webpack-starter(目前最成熟,我也在用这个)
另外是ui解决方案,有这么几个primeng(目前是最完整的)、angular2-material(开发中)、angular2-bootstrapt(没了解过)。
网址链接:
angular中文网微信号