Die Magie von Angular 5.0

Entschuldigung, kennen Sie Angular? Während viele Leute mit Angular1 nicht vertraut sind, ist Angular5 herausgekommen. Heute werde ich Ihnen eine gute Einführung in Angular5 geben Wurden aus früheren Versionen erstellt?

Build-Optimierer

Ab 5.0.0 verwenden Produkt-Builds, die über die CLI ausgeführt werden, standardmäßig den Build-Optimierer.

Der Build-Optimierer ist ein Tool in der CLI, das das erstellte Paket basierend auf unserem Verständnis Ihrer Angular-Anwendung verkleinern kann.

Der Aufbau eines Optimierers hat zwei Hauptaufgaben. Markieren Sie zunächst bestimmte Teile Ihrer Anwendung als rein, damit bestehende Tools damit den Optimierungseffekt des „Tree Shaking“ verbessern und unnötige Dinge aus der Anwendung entfernen können.

Zweitens entfernt der Build-Optimierer Angular-Decorator-Code aus Ihrer App. Dekoratoren werden nur vom Compiler verwendet und werden zur Laufzeit nicht verwendet und können gelöscht werden. Beide oben genannten Optimierungen können die Größe des generierten JS-Pakets reduzieren und den Anwendungsstart beschleunigen.

Angular Universal State Transfer API und Unterstützung für DOM

Dies erleichtert die gemeinsame Nutzung des Anwendungsstatus zwischen dem Server und dem Client.

Angular Universal ist ein Projekt, das Entwickler beim serverseitigen Rendering (SSR) unterstützt. Der durch serverseitige Rendering generierte HTML-Code ist für Spider und Crawler geeignet, die JS nicht unterstützen, und trägt dazu bei, die vom Benutzer wahrgenommene Leistung zu verbessern.

In 5.0.0 hat das Entwicklungsteam ServerTransferStateModule und das entsprechende BrowserTransferStateModule hinzugefügt. Dieses Modul kann Entwicklern dabei helfen, dem durch serverseitiges Rendering generierten Inhalt relevante Informationen hinzuzufügen und diese dann an den Client zu senden, um eine wiederholte Generierung zu vermeiden. Dies ist nützlich für Szenarien, in denen Daten über HTTP abgerufen werden. Durch die Statusübertragung vom Server zum Client muss der Entwickler keine zweite HTTP-Anfrage stellen. Die Dokumentation zur Statusübertragung wird in einigen Wochen veröffentlicht.

Das Angular Universal-Team hat außerdem den Plattformserver Domino zum Plattformserver hinzugefügt. Domino unterstützt mehr sofort einsatzbereite DOM-Operationen in einer serverseitigen Umgebung, was unsere Unterstützung für nicht serverseitige JS- und Komponentenbibliotheken von Drittanbietern verbessern kann.

Compiler-Verbesserungen

Um die inkrementelle Kompilierung zu unterstützen, haben wir den Angular-Compiler verbessert. Dadurch wird der Neuaufbau beschleunigt, insbesondere bei Produkt-Builds und AOT-Builds, und der Effekt ist deutlicher. Wir haben auch den Dekorator verbessert, um die Paketgröße durch das Entfernen von Leerzeichen zu reduzieren.

TypeScript-Konvertierung

Der zugrunde liegende Arbeitsmechanismus des Angular-Compilers ist nun die TypeScript-Konvertierung, wodurch inkrementelle Neuerstellungen viel schneller werden. Die TypeScript-Konvertierung ist eine neue Funktion von TypeScript 2.3, die es uns ermöglicht, in die Standard-TypeScript-Kompilierungspipeline einzutauchen.

Wenn das AOT-Tag geöffnet ist, können Sie den oben genannten Mechanismus verwenden, indem Sie ng Serve ausführen.

ng Serve --aot

Ich empfehle jedem, es auszuprobieren. Diese Konfiguration wird in Zukunft der Standard für die CLI sein. Bei vielen Projekten treten Leistungsprobleme bei Tausenden von Komponenten auf, und wir hoffen, dass Projekte jeder Größe von diesen Verbesserungen profitieren können.

Bei der Durchführung eines inkrementellen AOT-Builds von https://angular.io kann die neue Compiler-Pipeline 95 % der Build-Zeit einsparen (Testergebnisse auf unserem Entwicklungscomputer stammen von mehr als 40 Sekunden auf weniger als 2 Sekunden reduziert).

Unser Ziel ist es, die AOT-Kompilierung schnell genug zu machen, damit Entwickler sie für die Entwicklung verwenden können. Jetzt haben wir weniger als 2 Sekunden erreicht, sodass AOT in zukünftigen CLIs möglicherweise standardmäßig aktiviert ist.

Als Schritt in Richtung dieses Übergangs benötigen wir genDir nicht mehr, und auch outDir hat sich geändert: Jetzt geben wir alle für das Paket generierten Dateien in node_modules ein.

Leerzeichen beibehalten

In der Vergangenheit hat der Compiler Tabulatoren, Zeilenumbrüche und Leerzeichen originalgetreu reproduziert und in Vorlagen eingefügt. Sie können jetzt auswählen, ob Leerzeichen in Komponenten und Anwendungen einbezogen werden sollen.

Diese Konfiguration kann im Dekorator jeder Komponente angegeben werden und der aktuelle Standardwert ist true.

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

Oder Sie können es global in tsconfig.json konfigurieren, wo der Standardwert auch true ist.

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

Die allgemeine Regel lautet, dass die Konfiguration auf Komponentenebene Vorrang vor der Konfiguration auf Anwendungsebene haben sollte. Das Entwicklungsteam plant, den Standardwert in Zukunft auf „false“ zu ändern, um standardmäßig Platz für Entwickler zu sparen. Machen Sie sich keine Sorgen um Ihre e03b848252eb9375d56be284e690e873-Tags, der Compiler wird sie intelligent verarbeiten.

Verbesserte Decorator-Unterstützung

Ausdrucksreduzierung in Lambda und Objektliteralen useValue, useFactory und Datendekoratoren wird jetzt unterstützt. Dies ermöglicht die Verwendung von Werten, die nur in Dekoratoren gesenkt werden können, die zur Laufzeit ausgewertet werden können. Jetzt können Sie also Lambda-Funktionen anstelle benannter Funktionen verwenden. Mit anderen Worten: Die Ausführung des Codes hat keine Auswirkungen auf Ihr d.ts oder Ihre externe API.

Wir werden den Ausdruck auch als Teil von useValue herabstufen.

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

Component({

Provider: [{provide: SOME_TOKEN, useValue: SomeEnum.OK}]

})

Exportklasse MyClass {}

Internationalisierte Zahlen-, Datums- und Währungs-Pipes

Wir haben neue Zahlen-, Datums- und Währungs-Pipes geschrieben, um die browserübergreifende Internationalisierung komfortabler zu gestalten, ohne dass i18n-Putty-Skripte (Polyfill) verwendet werden müssen.

在以前版本的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=""/>

或者

<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);
      }
    });
  }
}

如何更新

Hier ist der Angular-Update-Leitfaden, der Ihnen den gesamten Prozess erklärt und erklärt, was vor dem Update zu tun ist, sowie die Schritte zum Aktualisieren der Anwendung und zur Vorbereitung auf zukünftige Versionen von Angular.

Wir haben viele zuvor veraltete APIs (z. B. OpaqueToken) gelöscht und auch einige neue veraltete Elemente angekündigt. Diese Änderungen sind im obigen Leitfaden detailliert beschrieben.

Bekannte Probleme

Es gibt derzeit bekannte Probleme im Zusammenhang mit der Quellkarte. Einige Quellkarten melden Fehler „undefinierte Quelle“.

Die offizielle Einführung lautet wie folgt: Wir freuen uns, die Veröffentlichung von Angular 5.0.0 - Pentagonal Donut bekannt zu geben! Dies ist eine weitere Hauptversion, die neue Funktionen enthält und viele Fehler behebt. Es spiegelt einmal mehr unser konsequentes Ziel wider, Angular kleiner, schneller und benutzerfreundlicher zu machen. Wir hoffen auch, uns schnellstmöglich mit der neuen Version vertraut zu machen. Wenn sich die Version nicht an uns anpasst, müssen wir uns an die Version anpassen!

Verwandte Lektüre:

Die Rolle von APP_INITIALIZER in Angular verstehen

So erstellen Sie eine Android-APP-Umgebung mit Angular2-Paket

AngularJs-Formularvalidierungsmethode

Das obige ist der detaillierte Inhalt vonDie Magie von Angular 5.0. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!