,二 从Angular1到Angular2需要的预备知识

1. TypeScript语法与ES6新特性

写惯了jQ的话突然从ES5跳到ES6,又是个变形的ES6(TypeScript),学习成本确实不低。不过笔者也是从ng1直接上手ng2,对与很多新特性的积累基本是抄着ng2官网的快速起步捡起来的。所以给的建议是,有ES6甚至TS基础肯定完美,但是在使用ng2过程中现学这些也完全没有问题。

2. Webpack前端模块化

ng2的默认模块化工具是SystemJS,也是个很酷炫的模块化工具。但它也只是个模块化工具,只管帮你模块化代码不管打包压缩,这会导致项目运行过程中会不停的去请求module啊component啊service啊甚至component的模板html啊css啊全都得请求,还是未压缩的。所以SystemJS下的ng2拿来娱乐玩玩还不错,真要做产品还是得换Webpack上场(相比SystemJS的配置只需要一个.config.js而且是动态加载,Webpack则需要手动编译打包然后运行,其打包配置也是一门学问)。

Webpack给我的感觉就是,理解起来有一定难度,但好在一劳永逸,一旦完成了成熟的配置,后续所有项目都通用。

3. 前后端分离的SPA架构

这个不仅是ng2了,Web趋势如此,服务器只做WebApi,客户端算是个独立的应用。

前后端分离要面对一些问题,比如跨域,比如网络请求的认证,客户端登录状态的保持等等。

带来的好处之一是客户端非常容易扩展,部署一个WebApi服务一百个客户端网站理论上完全没问题,还有就是客户端迁移到跨平台App上或是原生App的Webview中会相对简单很多,可以直接把前端网站想象成真正的Android App来开发。

4. ng1的一些架构思维

ng2相比ng1是强化了它好的地方,并修改了它不好的地方,抛开项目迁移的门槛与工作量,ng2一定是远强大与ng1的。其部分核心理念还是继承下来的,比如其组件、服务、管道的概念。其中组件是ng1中标签型指令的分离强化版,服务依然是那个通过依赖注入到具体组件的强大单例工具,管道则是ng1过滤器的演变形态,去掉了几个性能杀手级别的自带过滤器,还有更强大的动画系统与路由体系等等。

5.npm基础

ng2在npm上维护,绝对是个好消息,至少保证了其生命力,不再是在页面上引用个*.min.js完事了(虽然强行这么做也还是可以),不过这又要求开发者有一些npm使用的基础了,简单的包管理指令就足够。当然如果想要进一步自己开发一个ng2模块并发布到npm,还是需要一些功底才能做到了,这涉及到npm的一些发布流程以及js模块化的包管理概念。

总结是要想使用ng2来完成一个产品,还真得学习不少新技术,门槛不低,但要是连这么多东西都能熟练运用,不是一件相当有征服感与成就感的事么!