做前端的开发的程序员们，或多或少都会接触到一些框架，Angular 作为一款优秀的前端 JS 框架更是被许多开发者使用。近日，Angular 2正式版终于发布了，作为一个革命性的版本，Angular 2具有很多优异的特性。它简化了Angular 1中的诸多概念，也引入更加现代化的设计理念，降低学习曲线，而且在技术实现上也有了大幅提升。它不但是前端开发人员的利器，也是传统后端转型成全栈的阶梯。但毕竟是一个新发布的版本，所以无论是以前使用过 Angular 的朋友，还是零基础的同学，对于Angular 2应该都会有一些疑惑。

因此我们 OSC 第 127 期高手问答带来了 Angular 2 新特性这个主题，并请来了@asnowwolf（汪志成）为大家解答关于Angular 2 新特性的问题。

这篇文章挑选了部分精彩的问答内容，分享给各位交流、学习。也可以转到原链接继续浏览。

0 入门篇

Q:您好，零基础的学习路线是什么？大概需要多久能学完？

A:完全零基础可能比较少。 如果有Angular 1的中级以上基础，那是最快的，估计一周内应该可以，我就是一边翻译官方文档一边做实验学到现在的程度的。 如果有Java、C#的基础，也会比较快，因为Angular中从它们借用了很多概念，特别是模板和依赖注入。但是Angular 1涉及到实现方面的很多坑，所以想精通不容易，而Angular 2中的坑就少了很多了，你把它当做后端框架来学都可以。如果其它前端MVVM框架的基础，也包括Silverlight、Adobe Flex等，那么学起来是其次的，主要是对ng 2中概念的理解（相对1已经少了很多）。 如果完全零基础，那么你的主要困难不在Angular 2方面，而在工具链和HTML/DOM、CSS等方面，这个没法速成。有人带的话最好。

Q:请问一下，如果我没有angular的基础，只有一些简单的js和jquery基础，要想学习angular的话，是直接学2版本吗？另外学习angular一般需要多长时间能入门啊？

A:建议直接学2，Angular 2并不需要先学会Angular 1。事实上，Angular 2中的概念比1中简化了很多。如果你没有后端基础，只有js和jquery基础的话，学起来确实会比较难，但具体多长时间入门我就不清楚了，我一个同事是跟着我边看文档边做项目学会的，之前没有专门花时间学习过。

Q:我有比较好的后端基础，前端方面我只有基本的js基础，应该怎样学习ng2？

A:直接学就行了，你用ts的时候会发现它更像c#和java，胜过像传统的js。传统js中的坑在ts中也已经基本被填平了。不过后端转学前端，最大的障碍在css上，建议先好好学学bootstrap，并且先不要追求过于精美的界面。如果有精通css的队友，先把这部分交给他，Angular 2中文件分离的很清晰。

Q:有js基础可以直接上手Angular2？本身做javaee开发的

A:不是J2EE开发的，也不是用Java，使用的是TS，这是一个ES6的增强版，但是里面引入了很多来自Java或C#中的概念，比如注解/装饰器（@），强类型，接口等等。 IDE对它支持的非常好，比如WebStorm中可以直接对代码进行各种重构，如改名、提取变量、提取方法、移动等，都非常准确。 

Q:那javaee开发有必要去学angular吗？

A:你是指Angular 1吗？没必要，直接学2就可以了，顶多是补一下HTML(DOM)/CSS/NodeJS/前端工具链等方面的知识

Q:有js基础可以直接上手angular不？

A:可以，不过要小心依赖注入、服务等概念可能会成为门槛。

Q:哪些需要node.js基础？

A:NodeJS扮演的角色主要是工具链，其实如果是初级和中级的话，只要会用就够了，都不用写nodejs程序代码。

Q:作为一个Javaer非主攻前端，在使用angular1，也看过vue的api感觉vue非常轻量（常用前端路由，双向绑定，注入，）就不知道angular2门槛怎么样。

A:这么说吧：Angular 2的主要开发人员是Javaer出身。而且其中的依赖注入、单元测试等概念对后端开发人员来说应该比传统前端熟悉得多。还有@注解、强类型、接口等等，都是后端熟悉的领域。

Q:angular2 与第一版的本质区别有哪些异同呢？可否直接学习angular2呢？

A:没问题，可以直接学习的。Angular 2继承了第一版的架构级模型和很多设计理念，但是在概念上做了大幅度的简化，而且在实现上也是完全重写了。没必要先学1再来学2，我都是推荐别人直接学2的。

Q:个人有flex基础，学ng2容易不?

A:可以。Angular的创始人就是Flex Builder的作者。不过你学ng2的困难可能会在HTML/CSS/NodeJS工具链这方面，做好心理准备。

1 特性篇

Q:ng2与reactjs以及新兴的vuejs相比有什么优势？

A:整合性：ALL-IN-ONE，决策成本低，应用从原型成长到大型、巨型时可以提供一个平滑的路径。 后端友好：和后端具有类似的编程模型，封装了前端知识的很多细节。 还有很多，参见：https://wx.angular.cn/library/article/%E6%88%91%E4%B8%BA%E4%BB%80%E4%B9%88%E9%80%89%E6%8B%A9Angular%202

Q:angular2不擅长的领域是那些？

A:1. 性能要求非常高的地方：比如3D手游。

2. 大小要求非常严格的地方：比如总下载大小要控制在50K以内，现在Angular 2使用AoT编译的时候最小下载量是70k左右（不算Polyfills） 另外，如果是纯前端背景的团队，可能用起来会有困难，因为他们可能很难理解依赖注入、单元测试这些东西。最好是前后端合一的团队，甚至后端为主的团队。

Q:angular2的dependencies目前是不是比1要少很多？

A:这个要看你怎么统计了。比如ng2所需的第三方比ng1少，起码它内置的路由非常强大，不像ng1必须用个ui-router。文件总数也少一点，但是这个影响不大。体积的话，如果引用很多库，那么ng2会比较大，但是只用核心库并且开启aot编译的话，那么就比ng1还小。

2 使用篇

Q:安装依赖包的时候，等待了半个多小时，都没有进展，是怎么回事啊

A:不是被墙挡了？有些包被放在了墙外。你检查一下错误信息。将npm的镜像地址改成淘宝的 npm config set registry https://registry.npm.taobao.org

Q:Angular 2有对应的ui么？

A:https://angular.cn/resources/ 这里有官方列举的工具与库，另外，企业级组件库推荐使用primeng，参见我的评测： https://wx.angular.cn/library/resource/PrimeNg

Q:官方推荐是使用material2，不过目前还在beta https://github.com/angular/material2 

A:是的，而且它和primeng重叠度并不高，primeng侧重于企业常用的datagrid等数据展示组件，而material2侧重消费者端的美观性组件多一点。

Q:ng2如何调试？跟着started走了一遍，感觉调试非常困难，chrome 调试工具中的异常时编译后的代码，无法定位问题

A:用webpack 并使用 sourcemap 具体参考：https://webpack.github.io/docs/configuration.html#devtool你可以使用AnguarClass的开始学习，并不需要完全照着教程，教程中为了对live example更友好，所以使用的是system.js作为打包器。或者用angular-cli作为起步工具。

Q:后端和服务器都是我来做的，主攻python，有些js/css/html/angularjs1的经验，但是发现在看ng2的中文文档有些地方貌似不太容易理解，而且ng2的社区并没有那么多，学习资源目前也就是看看中文文档，然后把之前写过的东西用ng2在写一下，但是感觉对大的框架还是不太理解，没有一个很好的例子让我们从头使用ng2+后端开发一个完整的应用，是否有推荐的学习路径和例子呢？官方的例子都是一部分的知识点。

A:其实官方的例子已经涵盖了大部分的知识点了，在工作中够用了，遇到新问题就查官方文档。 不过如果你需要一个较大的开源项目，建议来看看 https://github.com/greengerong/rebirth 这是国内另一位Angular 2高手写的开源博客。涉及到的技术面比较广。
ng2的社区目前主要以QQ群的形式在运营，但是基本上都满了，所以也很难加入，你可以尝试加一下群278252889。 我还做了一个web版的社区，https://wx.angular.cn，里面已经收录了很多我写的文章，不过目前问答功能还没有实现，你要有兴趣也可以来参与开发。另外，请关注公众号：Angular中文社区，高手问答结束后Web社区建好前你可以先在这里留言，我会随时查看这里的。

Q:官方文档之外能弄几个angular 2的混合应用吗？对于很多具体场景如何合理的使用angular 2?

A:如果是深度Hybrid场景，可以等ionic2出release，目前它应该是beta，可以开始学习了，不过离用在产品中还有点距离。

Q:angular2和后端结合，哪个语言更好一些？在网上看到有和dotnet结合的，有和PHP结合的文章。我想和node结合，有什么优势和问题？

A:语言上其实没区别，只要后端语言能简便的实现Web API就可以了。 Angular 2对后端没有任何假设，当然如果能实现RESTful API将是最好的。

Q:Angular 2最吸引我的是提升了首屏加载速度，而且在SEO优化方面也有了很大的提高。我现在在从后端开发转型前端，在从angular2方面入手，是否可以给我一些建议。在使用angular2时，关于SEO的优化给我一些学习的建议。

A:后端开发转型前端，Angular 2可以说是最好的拐杖。它不但从后端借鉴了很多概念，而且其主要设计师也是Javaer。另外，Angular 2对分工提供了非常好的支持，可以让传统前端来负责HTML重构和CSS美化，你们来写“服务”等高度逻辑化的代码。

3 性能篇

Q:请问angular2应该怎样优化首屏渲染时间，减少白屏时长

A:Angular Universal：https://github.com/angular/universal-starter 它会支持服务端渲染。 同时，即使不用服务端渲染，AoT编译技术也能减少白屏时间。 当然，你还可以用Angular 2配合React Native或NativeScript，这样就直接编译出原生程序了。

 

Q:如果将angular2应用在微信上，有没有性能方面的影响啊？

A:没有，目前在各个性能评测中，Angular 2是居于现有框架首位的，可能Vue 2出来会有提升，但应该不会有显著差异。而且Angular 2正在推进Web Worker这种黑魔法，届时第一名仍然会妥妥的。 参见这篇“黑”文：https://www.zhihu.com/question/50666914/answer/122145297?from=profile_answer_card

Q:"它还分离了渲染引擎，使其不但性能有了本质的提升，而且可以实现离线编译、原生手机UI和服务端渲染（提升首屏加载速度，并支持SEO）等特性"，请问ng2的体积会影响原生手机UI（web方式）的用户体验吗？

A；参见 https://github.com/angular/universal-starter 自己编译一下试试，我这里编译出来不算polyfills的js，经过gzip之后是59k，你可以自己尝试编译一下看看。

Q:试过ng1，不理想，ng2更大 

A:刚才给错了链接，你试试这个： https://github.com/manekinekko/angular2-aot-demo 自己编译下看看结果就知道啦，添加点功能，然后再编译。我编译的结果是除了polyfills之外的大小是59k，AoT技术是Angular 2新引入的，Angular 1做不到，不要类比。同时，如果开启了服务端渲染，那么JS本身有多大就不会影响首屏加载了，因为首屏的内容不需要JS下载完就能渲染出来。这种情况下很多首页的下载量（不含图）可能也就几k几十k。

Q：node 4.5.0 + npm 3.10.7 build失败，你的node环境是什么？官网的angular2-webpack build后vendor（angular）部分压缩包202K，polyfills 22.6K 

A：是的，因为这个例子还没有集成AoT功能，你可以看看 https://github.com/manekinekko/angular2-aot-demo 这个是有AoT编译的。

Q: 我们这边的商城用的是bigpipe,多线程加载，有些即时通信的用的是nodejs,现在新开发的项目准备选择angular，要求我们这些前端迅速向这边转型。请问angular性能的真的如传说中的那么高么？

A:是的，Angular 2的性能非常高，参见http://mathieuancelin.github.io/js-repaint-perfs/ 和 https://cdn.rawgit.com/krausest/js-framework-benchmark/a358bc967e1d9ff0c268b43f5ab8b832abe0476e/webdriver-java/table.html 

Q:移动APP中我的用的是ionic，对各种设备的适配好一些，angularjs首次加载时有点慢，库文件有点大，请问2.0版本这一块有优化么 

A:有的。Angular 2提供了两项技术来对首屏加载进行优化：1.服务器端渲染：借助一个NodeJS服务器，它会在内存中先把DOM结构渲染好，然后把这个DOM结构对应的HTML发回给前端，这样前端相当于在访问静态网页。2.预编译：提前把模板编译好，浏览器拿到之后直接开始运行并创建DOM，也就没有白屏了

Q:现在的公司有一部项目组在使用了，但范围不是很大，象一些老的项目，切过去估计可能性不大，因为维稳为主，毕竟能顺畅安全的跑着就好，后面的一些新项目可能会采用这个，但个人觉得如果是性能要求比较高的可能不会采用它吧，请问2.0比前面的版本性能上是不是有质的提高？

A:是的。 首先，它改进了算法，变更检测的算法效率提升了500%；其次，它提供了服务端渲染、AoT预编译等技术，提高首屏加载速度；最后，它还将在下一个小版本中支持WebWorker，那样变更检测等工作就会在另一个线程中完成了，不占用UI线程。

Q:移动web上用angularjs很少，一般认为会一点慢，移动端我们用的是ionic。曾经有一个项目用的ng,js压缩后有好几百K,但是加载好了跑起来还可以，2.0对性能是不是有一些优化

A:是的。 Angular 2提供了预编译（AoT）技术，它会在编译期间就把模板提前编译好，这样发布时就不用带上核心模块中的编译器部分了，而这部分差不多占了核心库大小的50%。同时，它在推荐的工具链中加入了Tree-shaking技术，可以移除死代码，也是一项在大小方面的显著优化。