从入门到进阶，全面剖析 Angular 2 新特性 | 高手问答精粹

Posted 2021-04-26 OSC开源社区

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

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

这篇文章挑选了部分精彩的问答内容，分享给各位交流、学习。也可以点击“阅读原文”继续浏览。

『入门篇』

问

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

答

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

问

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

答

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

问

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

答

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

问

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

答

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

问

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

答

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

问

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

答

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

问

哪些需要node.js基础？

答

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

问

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

答

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

问

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

答

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

问

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

答

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

问

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

答

『特性篇』

问

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

答

整合性：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

问

angular2不擅长的领域是那些？

答

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

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

问

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

答

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

『使用篇』

问

Angular 2有对应的ui么？

答

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

问

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

答

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

问

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

答

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

问

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

答

其实官方的例子已经涵盖了大部分的知识点了，在工作中够用了，遇到新问题就查官方文档。 不过如果你需要一个较大的开源项目，建议来看看 https://github.com/greengerong/rebirth 这是国内另一位Angular 2高手写的开源博客。涉及到的技术面比较广。

问

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

答

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

问

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

答

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

问

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

答

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

『性能篇』

问

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

答

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

问

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

答

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

问

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

答

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

问

试过ng1，不理想，ng2更大 

答

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

问

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

答

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

问

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

答

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

问

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

答

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

问

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

答

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

问

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

答

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

END

推荐阅读

点击标题直接进入阅读

高手问答精粹：《》

做了几年的自动化运维，是否还是不能确定有哪些工作没做，怎样更优雅的实施运维自动化？

原创博客：《》

自从有了Elasticsearch、Logstash、Kibana，俗称ELK，小公司也可以很轻松地做日志分析了。

《》

开源中国源创会就将来到成都、重庆，与各位OSCer来一个约会，更为大家奉上精彩的主题演讲，各位还不来赴约吗？

点击“阅读原文”查看更多精彩内容