Angular5.0.0新特性

文章来自官网部分翻译

https://blog.angular.io/version-5-0-0-of-angular-now-available-37e414935ced

Angular5.0.0版本已经正式发布

总结一下v5.0.0带来的新变化都有哪些。

1.构建优化

  5.0版本默认采用CLI构建和打包。构建优化器是包含在CLI里面的一个工具,通过对你的应用程序更加语义化的理解可以使得你的打包程序(bundle)更小。

构建优化器有两个主要工作。

第一,我们可以将应用程序的一部分标记为纯应用(pure),改进了现有工具提供的摇树优化,删除了应用中其它不需要的部分。

第二,从你的应用程序在运行时删除装饰符代码(decorators),装饰(decorators)是由编译器使用的,而在运行时并不需要可以被删除。这些工作减少了生成的JavaScript bundles的大小,并增加了你的用户应用程序的启动速度。

2.服务端状态转换和DOM支持

  有了这个支持,可以让应用程序在服务器端和客户端版之间共享状态更容易。

Angular Universal是一个帮助开发者实现SSR的开源项目,通过在服务端渲染

Angular应用程序,然后在客户端引导启动程序并生成HTML,由此更好的支持那些对javascript不太友好的化境来提高应用程序性能。

5.0版本中,Angular开发团队添加了ServerTransferStateModule(与之对应的BrowserTransferStateModule),这个模块允许你在服务端生成模块信息并传输到客户端,不需要在客户端重复创建。这一点在通过HTTP获取数据并展示时非常有用。通过服务端状态转移,客户端不需要在发送第二个HTTP数据请求,状态转移的API文档将在未来几周内发布。

此处另一个改变是AngularUniversal团队添加了Domino渲染工具,Domino的加入意味着我们在服务器端上下文中将可以支持更多的DOM操作,改进了对第三方JS和组件库的支持。

3.编译器改进

  改进了Angular编译器来支持增量编译,重新构建变得更快,特别是对生产环境的构建和AOT编译,增强的装饰器可以通过更精细化的去除空格来减小产生的包.

改进后的AOT编译的性能大幅度,提升可以节省约95%的构建时间,40s可以提升至2s完成一次构建。

Preserve Whitespace

通过编译器,模板开发中的制表符、换行符、空格等可以原样的保留下来,并提供选项可以自选是否使用Preserve Whitespace来保留这些东西。

也可以在tsconfig.json设置作用到全局

注:组件级别的选项会覆盖应用程序级别的设置。

增强的装饰符支持

装饰符降低了在使用useValue、useFactory、data对lambda表达式的要求,开发者也可以使用一个lamdba表示来代替一个已定义的命名函数,也就意味着你可以不事先在*.d.ts中声明而直接执行代码。

去掉表达式方式

4.国际化号码、日期和货币管道

  Angular5中已经建立了新的号码,日期和货币管道,增加了跨浏览器的标准化实现,消除国际化在不同环境中的差异。
在5.0中管道可以使用我们自己的实现,可以在任何地方实现本地化的支持和配置。

V4 V5之间管道差异对比
https://docs.google.com/spreadsheets/d/12iygt-_cakNP1VO7MV9g4lq9NsxVWG4tSfc98HpHb0k/edit#gid=0

5.StaticInjector取代ReflectiveInjector依赖注入器

  为了更多的减少polyfills,5.0中使用了StaticInjector注入器来替换原有的ReflectiveInjector注入器,这种注入器不再里来与ReflectPolyfill,可以大幅减少应用程序体积

在4.x中,依赖注入器一共有两种,即Injector的抽象类子类:

1._NullInjector (该类的实例用于表示空的注入器)

2.ReflectiveInjector (表示一个依赖注入容器,用于实例化对象和解析依赖)

之前提供依赖注入方式:ReflectiveInjector.resolveAndCreate(providers);5.0中方式:Injector.create(providers);

6.Zone执行速度的提升

  5.0中默认提供的zones已经优化过,速度大幅提升,并且在应用程序中绕过zonee区域更加关于应用程序的性能。
绕过zone引导启动应用程序的方式:

platformBrowserDynamic().bootstrapModule(AppModule,{ngZone:'noop'}).then( ref => {} );

7.exportAs多命名支持

  5.0中提供了组件/指令的多命名支持,在对用户不修改代码情况下进行组件的迁移操作等非常有用,将一个组件导出多个名字,可以让组件已一个新名字来使用而达到不破坏现有代码的目的。

8.HttpClient

  在4.3中HttpClient模块被封装在@angular/common中,新的HttpClient被封装在@angular/common/http中,更新Http模块后,需要使用HttpClientModule替换原有HttpModule,并在使用http服务时,可以去掉map(res=>res.json())的调用,新模块中已经不再需要这么写了。

9.CLI v1.5

  Angular CLI v1.5版本中已经添加了对5.0版本的支持,后期将会把v5.0.0作为CLI的默认版本。这个版本中已经默认开启了构建优化,所以开发者可以直接感受到更小的js打包优化带来的收益。同时也更新了.tsconfig将更严格的遵循TypeScript标准,

10.Angular Forms adds updateOn Blur / Submit

  可以使用blur/submit来进行事件更新,而不用每个input都写一个事件了。

Template Driven Forms Before <input name="firstName" ngModel> After <input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}"> or <form [ngFormOptions]="{updateOn: 'submit'}"> Reactive Forms Before new FormGroup(value); new FormControl(value, [], [myValidator]) After new FormGroup(value, {updateOn: 'blur'})); new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]}) asyncValidators可以不再是作为一个参数传递 而是直接作用到表单上了。

11.RxJS 5.5

  支持V5.2+ 5.5在bundle上更加优化了

12.New Router Lifecycle Events

  GuardsCheckStart
  ChildActivationStart
  ActivationStart
  GuardsCheckEnd
  ResolveStart
  ResolveEnd
  ActivationEnd
  ChildActivationEnd

总结

以上所述是小编给大家介绍的Angular5.0.0新特性,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

时间: 2024-09-06 01:56:35

Angular5.0.0新特性的相关文章

在低版本的vc中使用vc 10.0的新特性

/*! 在低版本的vc中使用vc 10.0的新特性 created by : andrew.wu (erpingwu@gmail.com) */ vc 10.0提供了一些新的特性,最引人注目的莫过于lambda, 但vs2010 beta内存占用之多也不得不让人心生退让. 高手 7cat 指出 "vc ide 只是一个壳" 那么如果利用 vc 10.0 编译器的新功能? 以vc9为例, 注意 Tools->Projects and Solutions->VC++ Direc

Spring 2.0的新特性点评

Spring2.0的发布恐怕算得上2006年Java社区的一件大事了.在Spring2.0发布附带的文档里面对2.0新特性做了概要的介绍,2.0的新特性是自然是我们最关注的方面: 一.Spring的XML配置引入XML Schema语法简化配置 在Spring1.x系列中,bean的配置文件使用DTD,没有namespace的分隔.2.0的一个非常大的改进是引入了XML Schema的namespace,因而可以将bean的配置文件做大幅度的简化.这些简化包括了对bean属性的各种简化,AOP配

《Ext JS实战》——1.4 Ext JS 3.0的新特性

1.4 Ext JS 3.0的新特性 Ext JS 2.0中引入的一些变化是颠覆性的,这就导致从级到2.0相当困难.这主要是因为这一版引入了一个更加现代的布局管理器以及一个崭新的.健壮的组件层次,许多Ext JS 1.x的代码都会因此而崩溃.值得庆幸的是,由于Ext JS 2.0的良好的工艺设计,从Ext JS 2.0到3.0的移植就非常容易了.尽管Ext JS 3.0新增的内容并不怎么神奇,不过最新的版本还是可圈可点的,有些新增的特性还是值得讨论的. 1.4.1 Ext JS通过Direct完

[测验]C# 3.0新特性也已经基本定稿了,各种资料层出不穷,但大家对C# 2.0的新特性有多少了解呢?测验一下。

问题描述 入门题:以下哪个特性不是C#2.0的新特性:A.::命名空间别名限定符B.运算符重载C.空值类型D.匿名方法E.迭代器语法记忆题:以下哪个关键字不是C#2.0新增的:A.yeildB.globalC.fromD.fixedE.where提高题:以下关于匿名方法的说法,哪个是错的?A.匿名方法没有方法名B.匿名方法以委托的形式存在C.匿名方法方法参数类型是自动推断的D.匿名方法返回值类型是自动推断的E.匿名方法不能直接赋值给没有方法签名的Delegate类型对象.终极题:嗯嗯,既然是终极

C#7.0中新特性汇总_C#教程

以下将是 C# 7.0 中所有计划的语言特性的描述.随着 Visual Studio "15" Preview 4 版本的发布,这些特性中的大部分将活跃起来.现在是时候来展示这些特性,你也告诉借此告诉我们你的想法! C#7.0 增加了许多新功能,并专注于数据消费,简化代码和性能的改善.或许最大的特性就是元祖和模式匹配,元祖可以很容易地拥有多个返回结果,而模型匹配可以根据数据的"形"的不同来简化代码.我们希望,将它们结合起来,从而使你的代码更加简洁高效,也可以使你更加

Struts 2.0的新特性

Struts 2.0的新特性 Struts 2.0框架中出现的许多特性旨在让Struts更容易使用: ● 改进的设计: 与Struts 1相比,Struts 2的所有类都基于接口,核心接口独立于HTTP.这些API并不依赖服务器小程序API. ● 简化的Action: Struts 2 Action类独立于框架,是简化的普通Java对象(POJO).拥有execute()方法的任何Java类都可以用做Action类. ● POJO表单: Struts 2不支持ActionForms特性.Acti

面试题:ASP.NET2.0的新特性?

问题描述 ASP.NET2.0的新特性?像这种面试题该怎么答,用不着把2.0中增加的服务器控件和功能全部阐述一边吧! 解决方案 解决方案二:还有这种面试题,如果我是直接从ASP.NET2.0学的呢强烈BS招聘的解决方案三:up解决方案四:不合理,问这种问题的就是知道从旧的看新的.不能抛弃以前的.新特征很多了.如:加入的profile,GridView,泛类型等等.解决方案五:新特性.....我认为问这问题意义不大的样子,大家同意不.我确实也不知道怎么答好,不过也更表示我对新老版没有太多的研究和了

《ANSYS FLUENT 16.0超级学习手册》——2.2 FLUENT 16.0的新特性

2.2 FLUENT 16.0的新特性 FLUENT 16.0相对于以往的FLUENT版本,在操作界面.网格处理.并行运算.物理模型和求解精度控制方面有了很多改进. 2.2.1 新的操作界面如图2-3所示,FLUENT 16.0的操作界面较先前版本有了一些变化.原来的列单式项目树改成了与ANSYS CFX类似的导航树,使ANSYS系列的界面风格趋向统一.树状图形界面中包含了所有的设置步骤. ANSYS FLUENT 16.0既可单独使用,也可以在ANSYS Workbench环境下使用. 2.2

《FLUENT 14.0超级学习手册》——2.2 FLUENT 14.0的新特性

2.2 FLUENT 14.0的新特性 FLUENT 14.0超级学习手册FLUENT 14.0相对于以往的FLUENT版本,在操作界面.网格处理.并行运算.物理模型和求解精度控制方面有了很多改进. 2.2.1 新的操作界面自FLUENT 12.0集成到Workbench平台中以来,FLUENT有了全新的操作界面,图2-3为FLUENT 14.0的工作界面. ANSYS FLUENT 14.0既可单独使用,也可以在ANSYS Workbench环境下使用.2.2.2 功能上的改进最新版ANSYS

浅谈Android Studio 3.0 工具新特性的使用 Android Profiler 、Device File Explorer

前言: 其实 studio3.0的工具大家也已经使用过一段时间了,自己呢,就是从bate版开始使用的,我觉得比较好用的几个地方.就几个,可能还没用到其他的精髓. 但我觉的这个两个功能对我是比较实用的.好那么下面就给大家介绍一下吧. 正文: 话不多说咱们直接上图吧.(个人比较喜欢看图说话) 第一个(Android Profiler)我要介绍的就是这个了.(先看一下效果"震撼一下") (图-1) (图-2) (图-3) (厉害不厉害,牛逼不牛逼)那么我们怎么来操作这个工具呢,来咱们接着看图