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

小咪咪 2022-06-16 03:09 194阅读 0赞

*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来完成一个产品，还真得学习不少新技术，门槛不低，但要是连这么多东西都能熟练运用，不是一件相当有征服感与成就感的事么！