Introduction des fonctionnalités d'Angular 5.0

Nous sommes heureux d'annoncer la sortie d'Angular 5.0.0 - Pentagon Donut ! Il s'agit d'une autre version majeure, contenant de nouvelles fonctionnalités et corrigeant de nombreux bugs. Cela reflète une fois de plus notre objectif constant de rendre Angular plus petit, plus rapide et plus facile à utiliser. Angular 5.0 est là ! Avec ces changements majeurs, cet article présente les changements majeurs d'Angular 5.0. Les amis intéressés peuvent s'y référer.

Ce qui suit est une brève introduction aux changements majeurs de la v5. Pour en savoir plus, consultez le journal des modifications.

Build Optimizer

À partir de la version 5.0.0, les builds de produits exécutés via la CLI utilisent l'optimiseur de build par défaut.

L'optimiseur de build est un outil de la CLI qui peut réduire la taille du package construit en fonction de notre compréhension de votre application Angular.

Construire un optimiseur comporte deux tâches principales. Tout d'abord, marquez certaines parties de votre application comme pures afin que les outils existants puissent l'utiliser pour améliorer l'effet d'optimisation du « secouement de l'arbre » et supprimer les éléments inutiles de l'application.

Deuxièmement, l'optimiseur de build supprimera le code du décorateur angulaire de votre application. Les décorateurs ne sont utilisés que par le compilateur et ne sont pas utilisés pendant l'exécution et peuvent être supprimés. Les deux optimisations ci-dessus peuvent réduire la taille du package JS généré et accélérer le démarrage de l'application.

API de transfert d'état universel angulaire et prise en charge du DOM

Cela facilite le partage de l'état de l'application entre le serveur et le client.

Angular Universal est un projet qui aide les développeurs à effectuer un rendu côté serveur (SSR). Le HTML généré par le rendu côté serveur est convivial pour les robots d'exploration qui ne prennent pas en charge JS et contribue à améliorer les performances perçues par l'utilisateur.

Dans la version 5.0.0, l'équipe de développement a ajouté ServerTransferStateModule et le BrowserTransferStateModule correspondant. Ce module peut aider les développeurs à ajouter des informations pertinentes au contenu généré par le rendu côté serveur, puis à l'envoyer au client pour éviter une génération répétée. Ceci est utile pour les scénarios dans lesquels les données sont récupérées via HTTP. En transférant le statut du serveur vers le client, le développeur n'a pas besoin de faire une deuxième requête HTTP. La documentation pour le transfert de statut sera publiée dans quelques semaines.

L'équipe Angular Universal a également ajouté le serveur de plateforme Domino au serveur de plateforme. Domino prend en charge davantage d'opérations DOM prêtes à l'emploi dans un environnement côté serveur, ce qui peut améliorer notre prise en charge des bibliothèques de composants et JS tiers non côté serveur.

Améliorations du compilateur

Pour prendre en charge la compilation incrémentielle, nous avons amélioré le compilateur Angular. En conséquence, la reconstruction est accélérée, en particulier pour les builds de produits et les builds AOT, et l’effet est plus évident. Nous avons également amélioré le décorateur pour réduire la taille du paquet en supprimant les espaces.

Conversion TypeScript

Maintenant, le mécanisme de travail sous-jacent du compilateur Angular est la conversion TypeScript, ce qui rend les reconstructions incrémentielles beaucoup plus rapides. La conversion TypeScript est une nouvelle fonctionnalité de TypeScript 2.3 qui nous permet de plonger dans le pipeline de compilation TypeScript standard.

Avec la balise AOT ouverte, vous pouvez utiliser le mécanisme ci-dessus en exécutant ng serve.

ng serve --aot

Je suggère à tout le monde de l'essayer. Cette configuration deviendra la configuration par défaut pour la CLI à l'avenir. De nombreux projets rencontrent des problèmes de performances impliquant des milliers de composants, et nous espérons que des projets de toutes tailles pourront bénéficier de ces améliorations.

Lors de l'exécution d'une construction AOT incrémentielle de https://angular.io, le nouveau pipeline du compilateur peut économiser 95 % du temps de construction (les résultats des tests sur notre machine de développement proviennent de plus de 40 secondes réduites à moins de 2 secondes).

Notre objectif est de rendre la compilation AOT suffisamment rapide pour que les développeurs puissent l'utiliser pour le développement. Maintenant, nous avons dépassé les 2 secondes, donc AOT pourrait être activé par défaut dans les futures CLI.

Comme étape de transition vers cette conversion, nous n'avons plus besoin de genDir, et outDir a également changé : maintenant, nous allons taper tous les fichiers générés pour le package dans node_modules.

Préserver les espaces

Dans le passé, les compilateurs reproduisaient fidèlement et incluaient des tabulations, des nouvelles lignes et des espaces dans les modèles. Vous pouvez désormais choisir d'inclure ou non des espaces dans les composants et les applications.

Cette configuration peut être spécifiée dans le décorateur de chaque composant, et la valeur par défaut actuelle est vraie.

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

Ou vous pouvez le configurer globalement dans tsconfig.json, où la valeur par défaut de cet élément est également vraie.

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

La règle générale est que la configuration au niveau du composant remplace la configuration au niveau de l'application. L'équipe de développement prévoit de modifier la valeur par défaut en false à l'avenir afin d'économiser de l'espace pour les développeurs par défaut. Ne vous inquiétez pas de vos balises

, le compilateur les gérera intelligemment. </p><p><strong>Prise en charge améliorée des décorateurs </strong></p><p> La réduction des expressions dans Lambda et les objets littéraux useValue, useFactory et les décorateurs de données sont désormais prises en charge. Cela permet d'utiliser des valeurs qui ne peuvent être réduites que dans les décorateurs qui peuvent être évalués au moment de l'exécution. </p><p>Vous pouvez désormais utiliser des fonctions Lambda au lieu de fonctions nommées. En d’autres termes, l’exécution du code n’affectera pas votre d.ts ou votre API externe. </p><p class="jb51code"><br/></p><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class='brush:php;toolbar:false;'>Component({
 provider: [{provide: SOME_TOKEN, useFactory: () => null}]
})
export class MyClass {}

Copier après la connexion

我们还会将表达式降级，作为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 [ngModelOptions]="{updateOn: &#39;blur&#39;}">

或者

<form [ngFormOptions]="{updateOn:&#39;submit&#39;}">

反应式表单

以前

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），也公布了一些新的废弃项。以上指南会详细介绍这些变更。

相关推荐：

详解Angular中支持SCSS的方法

Angular4表单响应功能示例分析

angularJS的一些用法

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!