[译]Angular 5:升级和新功能的总结

代号为pentagonal-donut的Angular 5刚刚发布,它带来了一些新功能以及一些内部变化,这些会让Angular应用变得更小,执行变得更快。 在这篇文章中,我们将简要介绍一些最重要的变化以及升级指南。 有关更多详细信息,请参阅公告博客帖子,有关所有更改的详细信息,请参阅官方更新日志

性能

这是Angular 5包含的一些改变,它会让你的应用变得更小更快:

  • Angular CLI v1.5也是今天发布的,它有一个默认启用的构建优化器。 构建优化器在构建时会执行一系列额外的优化,包括更好的tree shaking。
  • 为了加快构建和重构建,Angular编译器也进行了改进。 它现在在引擎下使用TypeScript转换。ng serve命令使用--aot标记让 AOT(Ahead of time)和增量构建在开发时成为了可能。 这应该成为未来CLI版本的默认值。
  • intl和Reflect polyfills不再需要,这有助于缩小程序包。 请注意,在JIT模式下仍然需要Reflect polyfills。
  • 有一个新的选项,preserveWhitespaces,从模板代码中删除非重要的空白字符,这可以进一步减少你的应用程序的最终包的大小。 该选项默认是关闭的,只要将规则添加到全局tsconfig.json文件并将该选项设置为false,就可以轻松地打开整个应用程序:

tsconfig.json

{
  "compileOnSave": false,
  "compilerOptions": {
    "outDir": "./dist/out-tsc",
    "sourceMap": true,
    "declaration": false,
    "moduleResolution": "node",
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "target": "es5",
    "typeRoots": ["node_modules/@types"],
    "lib": ["es2017", "dom"]
  },
  "angularCompilerOptions": {
    "preserveWhitespaces": false
  }
}

你也可以在每个组件的基础上设置选项,或者仅在特定组件中覆盖项目的默认值:

app.component.ts

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css'],
  preserveWhitespaces: false
})
export class AppComponent {
  // ...
}

新特性

updateOn blur或submit

表单字段或整个表单新增了选项updateOn,它可以让Angular仅在blur或submit事件时检查有效性,而不是默认的变更事件,这有助于提高性能。

例如,给定一个模板驱动的表单,如下所示:

<form #newUserForm="ngForm" (ngSubmit)="onSubmit(newUserForm)">

  <label for="user-name">User Name:</label>
  <input type="text" placeholder="User name"
         required maxlength="25" id="user-name"
         [(ngModel)]="userName" name="userName">

  <button type="submit" [disabled]="!newUserForm.form.valid">
    Register
  </button>
</form>

你现在可以输入以下内容,让Angular仅在输入触发blur事件时才进行有效性检查:

<input type="text" placeholder="User name"
      required maxlength="25" id="user-name"
      [(ngModel)]="userName" name="userName"
      [ngModelOptions]="{updateOn: 'blur'}">

你也可以一次性对整个表单应用规则:

<form #newUserForm="ngForm"
      (ngSubmit)="onSubmit(newUserForm)"
      [ngFormOptions]="{updateOn: 'blur'}">
  ...
</form>

在响应式表单,你可以添加这样的选项:

ngOnInit() {
  this.newUserForm = this.fb.group({
    userName: ['Bob', { updateOn: 'blur', validators: [Validators.required] }]
  });
}

路由事件

Angular路由器现在新增了一些的生命周期事件,以便在更细粒度的级别上对事件做出响应。 新事件如下:ActivationStart,ActivationEnd,ChildActivationStart,ChildActivationEnd,GuardsCheckEnd,GuardsCheckStart,ResolveStart和ResolveEnd。

@angular/service-worker

Angular 5现在提供了一个新的包@angular/service-worker,它可以让我们很方便地将服务worker添加到应用程序中。我们将在将来的文章中深入探讨它的使用。

升级

因为重大改变很少,升级应该是一个很简单的工作。 Angular团队还组合了一个方便的工具,让升级尽可能简单。

这里有一些可以帮助升级的点。 这假定你是从一个Angular 4应用升级的:

  • 你可以使用一个命令升级所有的Angular软件包:
$ npm install @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0

# or, using Yarn:
$ yarn add @angular/{animations,common,compiler,compiler-cli,core,forms,http,platform-browser,platform-browser-dynamic,platform-server,router}@5.0.0
  • 现在Angular 5依赖于TypeScript 2.4.2和RxJS 5.5.2,所以你也要升级这些包。
  • 如果你还没有这样做,请将项目的<template>标签更改为<ng-template>。
  • 如果你正在使用Flex Layout for Angular,则需要确保升级到最新版本(撰写本文时为beta 10),因为之前的版本使用了OpaqueToken,而在Angular5已把它移除。
  • 如果你还没有这样做,你可以开始将http调用迁移到Angular 4.3中引入的新HttpClient。传统的Http模块现在已经被弃用了。
  • 如果你使用日期,货币或百分比管道,则可能需要更改语法,因为Angular现在使用自己的实现来管理这些管道,而不是依靠浏览器的i18n API。 有关所有详细信息,请参阅变更日志的i18n部分
  • RxJS 5.5版最近也发布了,RxJS v5.5.2是Angular 5应用程序的默认版本。 你的代码可以保持完全一样,但是RxJS正在转移到lettable operators ,以改善tree shaking,并使其更容易创建自定义运算符。 因此,开始将可观察管道代码转换为新的语法可能是一个好主意。

以下是旧语法的一个简单例子:

import { Component, OnInit } from '@angular/core';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/observable/of';
import 'rxjs/add/operator/map';
import 'rxjs/add/operator/filter';
import 'rxjs/add/operator/do';

@Component({ ... })
export class AppComponent implements OnInit {
  myObs = Observable.of('Hello', 'Alligator', 'World!');

  ngOnInit() {
    this.myObs
      .do(x => console.log('The do operator is the do operator!'))
      .filter(x => x.length > 8)
      .map(x => x.toUpperCase())
      .subscribe(x => console.log(x));
  }
}

...新的可用操作符语法的例子变成:

import { Component, OnInit } from '@angular/core';

import { of } from 'rxjs/observable/of';
import { map, filter, tap } from 'rxjs/operators';

@Component({ ... })
export class AppComponent implements OnInit {
  myObs = of('Hello', 'Alligator', 'World!');

  ngOnInit() {
    this.myObs
      .pipe(
        tap(x => console.log('The do operator is now tap!')),
        filter(x => x.length > 8),
        map(x => x.toUpperCase())
      )
      .subscribe(x => console.log(x));
  }
}

注意所有操作符是如何从一个导入语句中导入的,以及它们是如何使用pipe方法合并的。 当使用可用操作符时,一些操作符更改了名称。 例如,do操作符变成tap。

有了这个,你现在应该已经准备好进入Angular 5,并从更快更小的应用程序中受益。

原文:Angular 5: Upgrading & Summary of New Features

版权声明:著作权归作者所有。

相关推荐

[译]5分钟内学习CSS变量

CSS自定义属性(也称为变量)对于前端开发人员来说是一个巨大的胜利。 它将变量的强大功能引入CSS,从而减少重复,代码更可读以及更灵活。另外,与CSS预处理器的变量不同,CSS变量实际上是DOM的一部分,它是有很多好处。 所以他们基本上像SASS和LESS的变量。 在这篇文章中,我会给你一个关于这种新技术如何工作的速成课程。我还创建了一个免费的关于CSS变量的课程,它

Python批量升级更新库包(pip和Anaconda)

pip批量更新库查看过期的库pip list --outdated  更新单一的库:pip install --upgrade 库名 批量升级更新所有过期的库import pip from subprocess import call for dist in pip.g

Angular 5配置使用service-worker

Angular 5实现了一个适用于Angular应用的Service Worker,Angular CLI 1.6也添加了对service worker的支持。使用Angular CLI对应用添加service worker的支持分两种情况:新项目应用中添加service worker在已有项目中添加service&n

Angular 5:HttpClient的基本用法

Angular 4.3引入了新的用于http请求的接口HttpClient。它旨在替换之前版本的接口Http。有以下新特性:对响应的body做类型检查默认返回的是JSON对象,不再需要使用json()显式解析返回的数据支持拦截器支持进度事件请求后验证和基于刷新的测试框架安装HttpClientModuleHttpClient属于@angular/common/http包的模块HttpCl

升级angular cli到最新版本

升级angular cli我们可能首先想到的是npm updatenpm update angular-cli -g 但执行完后,使用ng v查看angular cli 的版本,版本仍然为旧的。下面方法可以升级angular cli到最新版本:全局安装升级angular cli到最新的版本需要先卸载