视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
Angular5.0的特性介绍
2020-11-27 20:10:04 责编:小OO
文档
我们很高兴地宣布Angular 5.0.0——五角形甜甜圈发布啦!这又是一个主版本,包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、更好用的一贯目标。Angular 5.0 来了! 有这些重大变化,这篇文章就为大家介绍了Angular 5.0大变化,感兴趣的小伙伴们可以参考一下,希望能帮助到大家。


以下简单介绍v5的重大变化。要了解详情,请看changelog。

构建优化器

5.0.0开始,通过CLI执行的产品构建默认使用构建优化器。

构建优化器是CLI中的一个工具,它基于我们对你Angular应用的理解,可以把构建后的包变得更小。

构建优化器有两个主要任务。首先,把你应用的某些部分标记为pure,以便原有工具利用它改进“tree shaking”的优化效果,同时删除应用中不必要的东西。

其次,构建优化器会从你的应用中删除Angular装饰器代码。装饰器只有编译器会用,运行时不用,可以删掉。上述两项优化都可以减少生成JS包的大小,同时加快应用启动速度。

Angular Universal状态转交API及对DOM的支持

这样更便于在服务端和客户之间共享应用状态。

Angular Universal是一个帮助开发者执行服务端渲染(SSR)的项目。服务端渲染生成的HTML对不支持JS的蜘蛛和爬虫友好,同时有助于提升用户感知性能。

在5.0.0中,开发团队添加了ServerTransferStateModule及对应的BrowserTransferStateModule。这个模块可以帮开发者在服务端渲染生成的内容中加入相关信息,然后传送给客户端,从而避免重复生成。这对于通过HTTP获取数据的场景是很有用的。通过把状态从服务器传送到客户端,开发者就不用再发第二次HTTP请求了。状态转交的相关文档几周后会发布。

Angular Universal团队还把平台服务器Domino加到了平台服务器中。Domino支持在服务器端环境下更多的开箱即用的DOM操作,可以改进我们对非服务端第三方JS及组件库的支持。

编译器改进

为支持递增编译,我们改进了Angular编译器。结果让重新构建加快,特别是对产品构建和AOT构建,效果更明显。我们还增强了装饰器,通过删除空白达到减少包大小的目的。

TypeScript转换

现在,Angular编译器底层的工作机制是TypeScript转换,从而让递增式重新构建快了很多。TypeScript转换是TypeScript 2.3新增的一个特性,可以让我们深入到标准TypeScript编译管道。

在打开AOT标签的情况下,运行ng serve就可以利用上述机制。

ng serve --aot

建议大家都试一下。将来这个配置会成为CLI的默认值。很多项目都有性能问题,涉及上千组件,我们希望各种规模的项目都能从这些改进中受益。

在执行https://angular.io 的递增AOT构建时,新编译器管道可节省95%的构建时间(在我们开发机上测试的结果是从40多秒减少为不到2秒)。

我们的目标是让AOT编译快到能开发者用它开发的程度。现在,我们已经冲进了2秒以内,因此将来的CLI中可能会默认开启AOT。

作为向本次转换过渡的一步,我们不再需要genDir,而outDir也变了:现在,我们会把为包生成的文件都打到node_modules里。

保留空白

过去编译器会忠实地复现并在模板中包含制表符、换行符和空白。现在你可选择是否在组件和应用中包含空白了。

可以在每个组件的装饰器中指定这个配置,而当前的默认值为true。

或者也可以在tsconfig.json中进行全局配置,其中该项默认值也是true。

一般规则是组件级配置要覆盖应用级配置。开发团队打算将来把默认值改成false,默认为开发者节省空间。不要担心你的<pre>标签,编译器会智能处理它们。

改进的装饰器支持

现在支持Lambda和对象字面量useValue、useFactory和data装饰器中的表达式降级(expression lowering)。这样可以使用只能在运行时计算的装饰器中被降级(lower)的值。

因此现在可以不使用命名函数,而改用Lambda函数。换句话说,执行代码不会影响你的d.ts或你的外部API。

我们还会将表达式降级,作为useValue的一部分。

国际化的数值、日期和货币管道

我们写了新的数值、日期和货币管道,让跨浏览器国际化更方便,不需要再使用i18n的腻子脚本(polyfill)。

在以前版本的Angular中,我们一直依赖浏览器及其i18n API提供数值、日期和货币格式。为此,很多开发者都在使用腻子脚本(polyfill),而结果也不好。很多人反馈说一些常见的格式(如货币)不能做到开箱即用。

而在5.0.0中,我们把这个管道更新成了自己的实现,依赖CLDR提供广泛的地区支持,而且可配置。以下是我们对v4和v5所做的比较:a document comparing the pipe behavior between v4 and v5。

如果你还没条件使用新管理,可以导入DeprecatedI18NPipesModule以降级到旧的行为。

StaticInjector代替ReflectiveInjector

为了消除对更多腻子脚本(polyfill)的依赖,我们用StaticInjector代替了ReflectiveInjector。前者不再需要Reflect,为开发者减少了应用大小。

以前

ReflectiveInjector.resolveAndCreate(providers);

以后

Injector.create(providers);

提升Zone的速度

一方面提升了Zone的速度,另一方面也可以在特别关注性能的应用中绕过它。

若要绕过它,启动应用时加上noop:

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

这里有一个完整的例子:the example ng-component-state project。

exportAs

组件和指令中增加了对多名称的支持。这有助于用户实现无痛迁移。通过把指令导出为多个名称,可以在不破坏原有代码的情况下在Angular语法中使用新名称。Angular Material项目已经在其前缀迁移项目中用上了,对其他组件作者肯定也有用。

示例

HttpClient

v4.3在@angular/common中推出过HttpClient,用于在Angular中发送请求,它小巧易用。HttpClient受到了开发者的广泛赞誉,因此我们推荐在所有应用中使用它,放弃之前的@angular/http library。

要升级HttpClient,需要在每个模块的@angular/common/http中把HttpModule替换为HttpClientModule,注入HttpClient服务,删除所有map(res => res.json())。

CLI v1.5

从Angluar CLI v1.5开始,已经开始支持Angluar v5.0.0,默认生成v5项目。

在这次小版本升级中,我们默认打开了构建优化器,让开发者拿到更小的包。

我们还修改了使用.tsconfig文件的方式,以更严格地遵守TypeScript标准。此前,如果检测到延迟加载的路由,而且你在tsconfig.json中手工指定了一组files或include,那这些路由会自动化处理。而如今,根据TypeScript规范,我们不再这么干了。默认情况下,CLI对TypeScript的配置中没有files或include,因此多数开发者不会受影响。

Angular表单添加updateOn Blur/Submit

这样可以根据blur或submit来运行验证和更新值的逻辑了,不必再单纯依赖input事件。

表单对应用很重要,如果有服务端验证,或者验证或更新值会触发较慢的操作,你当然希望它少跑几次。现在你可以在控件层面控制验证和更新值的时机了,也可以在表单层面设置。

此外,你现在可以直接在选项中指定asyncValidators,而不是通过第三个参数指定。

模板驱动的表单

以前

<input name="firstName" ngmodel=""/>

以后

或者

反应式表单

以前

以后

RxJS 5.5

我们已经把使用的RxJS更新到5.5.2或更高版本。这个新发布的RxJS可以让开发完全摆脱之前导入机制的副作用,因为我们以新的lettable operators的方式使用了RxJS。这些新操作符消除了副作用,以及之前导入操作符中“patch”方法存在代码切割和“tree shaking”等问题。

不再这样:

现在这样:

此外,RxJS现在发行了一个使用ECMAScript Modules的版本。新Angular CLI会默认拉取这个新版本,让包大小有明显减小。如果你没使用Angular CLI,那还是应该指向这个新版本。相关文档在此:Build and Treeshaking。

新的路由器生成周期事件

我们给路由器添加了新的生命周期事件,让开发者可以跟踪running guard启动到激活完成的各个阶段。这些事件可在有子组件更新时,在一个特定的路由器出口上展示加载动画,或者测量性能。

新的事件(按顺序)是GuardsCheckStart、ChildActivationStart、ActivationStart、GuardsCheckEnd、ResolveStart、ResolveEnd、ActivationEnd、ChildActivationEnd。以下是一个使用这些事件启动和停止加载动画的示例:

如何更新

这里有Angular Update Guide,告诉你整个过程,以及更新前要做哪些事,还有更新应用的步骤,以及做好迎接Angular未来版本的准备等信息。

我们删除很多以前废弃的API(如OpaqueToken),也公布了一些新的废弃项。以上指南会详细介绍这些变更。

下载本文
显示全文
专题