Angular 5.0 来了! 有这些大变化


Posted in Javascript onNovember 15, 2017

我们很高兴地宣布Angular 5.0.0——五角形甜甜圈发布啦!这又是一个主版本,包含新功能并修复了很多bug。它再次体现了我们把Angular做得更小、更快、更好用的一贯目标。

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。

@Component({
 templateUrl: 'about.component.html',
 preserveWhitespaces: false
}
export class AboutComponent {}

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

{
 "extends": "../tsconfig.json",
 "compilerOptions": {
  "outDir": "../out-tsc/app",
  "baseUrl": "./",
  "module": "es2015",
  "types": []
 },
 "angularCompilerOptions": {
  "preserveWhitespaces": false
 },
 "exclude": [
  "test.ts",
  "**/*.spec.ts"
 ]
}

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

改进的装饰器支持

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

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

Component({
 provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

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

Component({
 provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]
})
export class MyClass {}

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

我们写了新的数值、日期和货币管道,让跨浏览器国际化更方便,不需要再使用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项目已经在其前缀迁移项目中用上了,对其他组件作者肯定也有用。

示例

@Component({
 moduleId: module.id,
 selector: 'a[mat-button], a[mat-raised-button], a[mat-icon-button], a[mat-fab], a[mat-mini-fab]',
 exportAs: 'matButton, matAnchor',
 .
 .
 .
}

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=""/>

以后

<input name="firstName" ngModel [ngModelOptions]="{updateOn: 'blur'}">

或者

<form [ngFormOptions]="{updateOn:'submit'}">

反应式表单

以前

new FormGroup(value);
new FormControl(value, [], [myValidator])

以后

new FormGroup(value, {updateOn: 'blur'}));
new FormControl(value, {updateOn: 'blur', asyncValidators: [myValidator]})

RxJS 5.5

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

不再这样:

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
names = allUserData
.map(user => user.name)
.filter(name => name);

现在这样:

import { Observable } from 'rxjs/Observable';
import { map, filter } from 'rxjs/operators';
names = allUserData.pipe(
 map(user => user.name),
 filter(name => name),
);

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

新的路由器生成周期事件

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

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

class MyComponent {
 constructor(public router: Router, spinner: Spinner) {
  router.events.subscribe(e => {
   if (e instanceof ChildActivationStart) {
    spinner.start(e.route);
   } else if (e instanceof ChildActivationEnd) {
    spinner.end(e.route);
   }
  });
 }
}

如何更新

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

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

已知问题

当前已知与source map相关的问题。某些source map会报“未定义的源”错误。

https://github.com/angular/angular/issues/19840

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
js控制框架刷新
Aug 01 Javascript
jQuery 页面载入进度条实现代码
Feb 08 Javascript
jQuery学习笔记[1] jQuery中的DOM操作
Dec 03 Javascript
IE的有条件注释判定IE版本详解(附实例代码)
Jan 04 Javascript
如何将网页表格内容导入excel
Feb 18 Javascript
减少访问DOM的次数提升javascript性能
Feb 24 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
Mar 19 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
Mar 05 Javascript
jQuery对checkbox 复选框的全选全不选反选的操作
Aug 09 Javascript
微信小程序实现MUI数字输入框效果
Jan 31 Javascript
Vue全局分页组件的实现代码
Aug 10 Javascript
详解使用uni-app开发微信小程序之登录模块
May 09 Javascript
详解React Native 采用Fetch方式发送跨域POST请求
Nov 15 #Javascript
bootstrap 通过加减按钮实现输入框组功能
Nov 15 #Javascript
layui框架中layer父子页面交互的方法分析
Nov 15 #Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 #Javascript
layui.js实现的表单验证功能示例
Nov 15 #Javascript
javascript函数的节流[throttle]与防抖[debounce]
Nov 15 #Javascript
基于jQuery实现定位导航位置效果
Nov 15 #jQuery
You might like
php获取某个目录大小的代码
2008/09/10 PHP
PHP Stream_*系列函数
2010/08/01 PHP
PHP中使用数组指针函数操作数组示例
2014/11/19 PHP
PHP date函数常用时间处理方法
2015/05/11 PHP
利用PHP实现开心消消乐的算法示例
2017/10/12 PHP
javascript实现的网页局布刷新效果
2008/12/01 Javascript
Javascript的并行运算实现代码
2010/11/19 Javascript
jQuery实现切换页面布局使用介绍
2011/10/09 Javascript
jquery选择器之内容过滤选择器详解
2014/01/27 Javascript
Javascript模块化编程详解
2014/12/01 Javascript
Document.body.scrollTop的值总为零的快速解决办法
2016/06/09 Javascript
jQuery获取同级元素的简单代码
2016/07/09 Javascript
JS实现简单易用的手机端浮动窗口显示效果
2016/09/07 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
微信小程序getPhoneNumber获取用户手机号
2017/09/29 Javascript
详解package.json版本号规则
2019/08/01 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
微信小程序搜索框样式并实现跳转到搜索页面(小程序搜索功能)
2020/03/10 Javascript
[56:47]Ti4 循环赛第三日 iG vs Liquid
2014/07/12 DOTA
详解python执行shell脚本创建用户及相关操作
2019/04/11 Python
Python实现的ftp服务器功能详解【附源码下载】
2019/06/26 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
CSS3 选择器 伪类选择器介绍
2012/01/21 HTML / CSS
加拿大鞋网:Globo Shoes
2019/12/26 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
什么是用户模式(User Mode)与内核模式(Kernel Mode) ?
2015/09/07 面试题
国际贸易专业个人求职信格式
2014/02/02 职场文书
网络信息安全承诺书
2014/03/26 职场文书
简易版租房协议书范本
2014/10/13 职场文书
单身证明范本
2015/06/15 职场文书
python opencv人脸识别考勤系统的完整源码
2021/04/26 Python
MySQL的join buffer原理
2021/04/29 MySQL
Python List remove()实例用法详解
2021/08/02 Python
python实现Nao机器人的单目测距
2021/09/04 Python
微软Win11什么功能最惊艳? Windows11新功能特性汇总
2021/11/21 数码科技
python和Appium的移动端多设备自动化测试框架
2022/04/26 Python