Detaillierte Interpretation der neuen Funktionen von Angular5.1

In diesem Artikel werden hauptsächlich die neuen Funktionen von Angular5.1 und die damit verbundene Verwendung vorgestellt. Freunde, die es benötigen, können darauf verweisen.

In diesem Artikel werden die Verbesserungen und Ergänzungen von Angular 5.1 ausführlich vorgestellt, indem die neuen Funktionen von Angular 5.1 vorgestellt werden. Im Folgenden finden Sie den vollständigen Inhalt:

Neue Funktionen

Stabile Version von Angular Material und CDK

Service Worker in CLI unterstützt

Verbesserte Universal- und AppShell-Unterstützung in CLI

Verbesserte Fehlermeldungen für Dekorateure

Unterstützung von TypeScript2.5

Eine vollständige Liste der Funktionen und Fehlerbehebungen finden Sie im Änderungsprotokoll für Angular, Material und CLI.

Angular Material und CDK stabil

Nach 11 Alpha-Releases, 12 Beta-Releases und 3 Release-Kandidaten freuen wir uns, jetzt 5.0 für Angular Material und die stabile Version von Angular CDK .0 zu markieren. Basierend auf der visuellen Designsprache Material Design von Google bietet Angular Material 30 UI-Komponenten für Ihre Angular-Anwendungen. In Kombination mit Angular CDK bietet Angular CDK (Component Development Kit) eine Reihe von Bausteinen, mit denen Sie Ihre eigenen benutzerdefinierten Komponenten erstellen können, ohne häufige Probleme erneut lösen zu müssen. Diese Komponenten werden bereits in der Produktion von vielen Google-Anwendungen verwendet, darunter der Google Analytics Suite, der Google Cloud Platform Developer Console und Google Shopping Express.

Ab dieser Version folgt Angular Material derselben semantischen Philosophie wie Angular, und die Hauptversion von Angular Material und Angular CDK werden gleichzeitig als Hauptversion anderer Plattformen veröffentlicht. Bugfix-Releases werden in wöchentlichen Iterationen erstellt, während kleinere Releases veröffentlicht werden, sobald die Funktionen abgeschlossen sind.

Besuchen Sie matrial.angular.io für Dokumentation, Demos und unseren Leitfaden für die ersten Schritte. Sie können unseren Fortschritt auch auf Github verfolgen, während wir dem Framework weiterhin weitere Klassen hinzufügen. Halten Sie in den kommenden Monaten Ausschau nach Dingen wie neuem Mat-Tree, virtuellem Scrollen, Komponententest-Suiten und Drag-and-Drop-Funktionalität.

Service Worker-Unterstützung für CLI1.6

Leistung war schon immer ein wichtiges Ziel für Webentwickler, und bei den heutigen LAN-WIFI- und Mobilfunknetzwerk-Events war Leistung schon immer ein wichtiges Ziel. Moderne Browser verfügen über eine neue API zum Erstellen zuverlässiger und schnell ladender Websites, die Service Worker API.

Angular 5.0.0 verfügt über eine neue Service Worker-Implementierung, die für Angular-Anwendungen angepasst ist, und Angular CLI 1.6 bietet Unterstützung für die Erstellung von Anwendungen, die diese neue Funktion nutzen. Durch die Verwendung von @angular/service-worker können Sie die Ladeleistung Ihrer Anwendung in Browsern verbessern, die diese API unterstützen, und das Ladeerlebnis Ihrer Anwendung eher wie bei einer nativen App gestalten.

CLI1.6 verbessert die Universal- und App Shell-Unterstützung

Darüber hinaus ist es mit der Veröffentlichung von Angular CLI1.6 noch besser, Universal über Schematics zu Ihren bestehenden Projekten hinzuzufügen und App Shell-Unterstützung bereitzustellen .

Angular Universal

Um Universal zu Ihrem aktuellen CLI-Projekt hinzuzufügen, können Sie den folgenden Befehl in Ihrem Projektverzeichnis verwenden:

npm generate universal <name>

Ersetzen Sie 697e1f5009f1ac19a61c1b02b3392967 mit dem Namen, den Sie Ihrer Bewerbung geben möchten. Dadurch wird aus Ihrer übernommenen Anwendung ein gemeinsames Modul erstellt und Ihre Datei „angular-cli.json“ automatisch für Sie konfiguriert. Anschließend können Sie mit Schritt 4 in unserer Anleitung zur Verwendung von Universal fortfahren.

Um Ihre Universal-App zu erstellen, führen Sie einfach den folgenden Befehl aus:

ng build --app=<name>

App Shell

Eine zusätzliche zusätzliche Funktion ist die Unterstützung für App Shell. Jetzt können Sie eine Anwendungs-Shell generieren und erstellen, die Universal verwendet, um ein statisches erstes Rendering für Ihre Anwendung auf Ihrer index.html-Seite zu erstellen. Dies bietet dem Benutzer ein besseres Erlebnis beim Start Ihrer App.

Stellen Sie zunächst sicher, dass im NgModule Ihrer Anwendung ein RouterModule-Modul importiert ist und dass im Modul Ihrer Anwendungskomponente ein b06060c1b765d597eda031c226772d27d643f9f2456fe4db0e530134a61924e2 vorhanden ist. App Shell verwendet Routing zum Rendern Ihrer App.

Führen Sie den folgenden Befehl aus:

ng generate app-shell [ --universal-app <universal-app-name>] [ --route <route>]

Fügen Sie Ihrer Datei „angular-cli.json“ Unterstützung für alle Shells für die Hauptanwendung hinzu, indem Sie den Parameter „app-shell“ übergeben. Wenn die Universal-Anwendung nicht erfolgreich ist, wird bei der ersten Ausführung von Universal Schematic eine Universal-Anwendung erstellt. Routing-Parameter geben die Routing-Konfiguration an, die während der Anwendungserstellung generiert wird. (App Shell erfordert Routing-Unterstützung). Der Standardwert ist /shell.

Nach Abschluss dieses Schritts verwenden Sie einfach ng build, um die Anwendung normal zu erstellen, und die Datei index.html enthält automatisch gerenderte Routen.

Verbesserte Decorator-Fehlermeldungen

Die vom Compiler generierte Diagnose wurde erheblich verbessert, insbesondere wenn Decorators nicht unterstützte oder falsche Ausdrücke in der Formelzeit enthalten.

Beispiel: Der Aufruf einer Funktion zum Verarbeiten einer Vorlage wird nicht unterstützt.

@Component({
 template: genTemplate()
})

Dies ist der Fehler, der zuvor aufgetreten ist:

Error encountered resolving symbol values statically. Calling function ‘genTemplate', function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol MyComponent in components.ts, resolving symbol MyComponent in components.ts

Dieser Fehler wurde behoben und die Ursache und Art des Problems wurde geklärt.

component.ts(9,16): Error during template compile of 'MyComponent'.
 Function calls are not supported in decorators but 'genTemplate' was called.

Unterstützung für TypeScript 2.5

Wir haben Unterstützung für TypeScript 2.5 hinzugefügt, das von allen Entwicklern empfohlen wird. Diese Version von TypeScript enthält mehrere nützliche erweiterte Funktionen.

Sie können Ihr Typescript aktualisieren, indem Sie Yarn add typescript@'~2.5.3' oder npm install typescript@'~2.5.3' verwenden.

Dieses Update ist optional, TypeScript 2.4 unterstützt weiterhin Angular 5.X. TypeScript 2.6 wird noch nicht unterstützt. Unser Plan ist, die Unterstützung in einer zukünftigen Nebenversion hinzuzufügen.

a7d71c5568cd0c774b4c2d188d23325cWichtiger Hinweis: a76bcb5cf2f22c4f8daeb0ab5ac42844Wenn Ihr Code injektor.get(Token) verwendet und Token statische Mitglieder hat, treten TypeScript-Probleme auf und der zurückgegebene Typ ist {} anstelle von Token . Sie können Injector.get42e4dd2825ec91a3f52b146cc8a24e44(Token) verwenden, um den gewünschten Rückgabewert zu erhalten.

Ich habe das Obige für Sie zusammengestellt und hoffe, dass es Ihnen in Zukunft hilfreich sein wird.

Verwandte Artikel:

Verwandte Verwendung von js-Array-Reduzierung

So verwenden Sie die Ersetzungsfunktion in Javascript

So implementieren Sie die Audiowiedergabefunktion mit JavaScript

So implementieren Sie die Kopierfunktion mit JS-Code

So implementieren Sie JS Verwenden der tangram.js-Bibliotheksklasse

So implementieren Sie das verzögerte Laden von Bildern, die nicht auf dem ersten Bildschirm angezeigt werden, in JS

So verhindern Sie wiederholtes Rendern mit Reagieren

So implementieren Sie die Direktivenfunktion in Vue

Das obige ist der detaillierte Inhalt vonDetaillierte Interpretation der neuen Funktionen von Angular5.1. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!