查看原文
其他

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

2016-09-29 高手问答精粹 开源中国

#长按上图识别二维码,参与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工具链这方面,做好心理准备。


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

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


『特性篇』


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高手写的开源博客。涉及到的技术面比较广。

ng2的社区目前主要以QQ群的形式在运营,但是基本上都满了,所以也很难加入,你可以尝试加一下群278252889。 我还做了一个web版的社区,https://wx.angular.cn,里面已经收录了很多我写的文章,不过目前问答功能还没有实现,你要有兴趣也可以来参与开发。另外,请关注公众号:Angular中文社区,高手问答结束后Web社区建好前你可以先在这里留言,我会随时查看这里的。


官方文档之外能弄几个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


推荐阅读

点击标题直接进入阅读

高手问答精粹:高级运维架构师分享Linux 集群和自动化运维

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

原创博客:《如何在半小时搭建一个简单的日志分析平台?

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

参与成都、重庆源创会,听大咖分享时下最新技术干货!

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



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

您可能也对以下帖子感兴趣

文章有问题?点此查看未经处理的缓存