Die neueste Version von Angular ist da: Nach neuntägiger Verspätung und sechs zusätzlichen Release Candidates wurde nun am 1. November mit Angular 5 die neueste Version von Googles Frontend-Framework veröffentlicht.
Nachdem das vor etwa einem Jahr veröffentlichte Angular 2 ein komplett neues Framework darstellte, beinhalteten die seither veröffentlichten Versionen 4 und 5 nur vergleichsweise kleine Änderungen und bestätigen damit, dass Angular einen stabilen und ausgereiften Zustand erreicht hat.
Zu Angular 5 erklärt Google, dass das Hauptziel dieses Releases war, Angular kleiner, schneller und einfacher zu machen. Dementsprechend gibt es eher wenig neue Funktionalität und ein Upgrade sollte sich simpel gestalten.
Neues Modul für HTTP-Anfragen
Ursprünglich hielt das neue httpClient-Modul schon mit Version 4.3 Einzug in Angular, um als Alternative zum http-Modul zu dienen. Nun ist in Version 5 das alte http-Modul explizit als veraltet gekennzeichnet. Das neue httpClient-Modul macht insbesondere die Kommunikation mit JSON-APIs einfacher. Da JSON nun als Standard-Format angenommen wird, kann beispielsweise eine explizite Umwandlung mittels ".map(res => res.json())" entfallen.
Soll doch einmal eine HTTP-Anfrage gesendet werden, die kein JSON zurückliefert, kann dies mit Hilfe des 'responseType'-Parameters erfolgen.
Beispiele:
// das Resultat muss nicht mehr explizit in json konvertiert werden
this.http.get('https://jsonplaceholder.typicode.com/todos/1')
.subscribe(data => this.title = data['title']);
// Soll etwas anderes als JSON-Daten empfangen werden, muss der Datentyp explizit angegeben werden
this.http.get('textfile.txt', {responseType: 'text'})
.subscribe(text => console.log(text));
Internationalisierung
Die i18n-Pipes zur Internationalisierung haben in Angular 5 nun ein leicht verändertes Verhalten und eine neue API bekommen.
Angular 5 greift dafür nicht mehr auf die interne Browserfunktionalität zur Internationalisierung zurück, sondern bedient sich der Daten aus der Unicode Common Locale Data Repository (CLDR). Das hat zur Folge, dass die Darstellung nicht mehr von Browser zu Browser unterschiedlich ist und auch keine Polyfills für alte Browser mehr benötigt werden.
Auch die API für die Internationalisierung in Angular hat sich im Zuge dieser Umstellung geändert. So wird nun für das Datumsformat die Schreibweise und die Standardeinstellung von CLDR verwendet. Bei Geldbeträgen hat sich beispielsweise das Standardformat von "USD4.99" auf "$4.99" geändert.
mehr dazu: https://github.com/angular/angular/blob/master/CHANGELOG.md#i18n-pipes
Angular Universal State Transfer
Angular Universal ist die Technologie, die in Angular serverseitiges Rendering erlaubt. Das führt einerseits zu einer schnelleren Darstellung auf Endgeräten und bewirkt andererseits, dass eine entsprechende Angular-Anwendung einfacher durch web-crawler von Suchmaschinen oder ähnlichem verarbeitet werden kann. Neu ist hier nun eine einfachere Methode, um zusätzlich zur gerenderten Website gleichzeitig die Daten für die anschließende dynamische Dartellung von Inhalten mitzusenden. Die Dokumentation hinkt bei diesem Feature noch hinterher und soll in den nächsten Wochen fertiggestellt werden.
Formular-Validierung
Eine weitere kleine Änderung betrifft die Validierung von Formularen: Hier ist es nun beispielsweise möglich, die Validierung erst durchzuführen, wenn der Benutzer das Formular submittet. Das macht insbesondere Sinn, wenn die Validierung serverseitig und damit mit Verzögerung geschieht: Der Endbenutzer würde seine Eingaben zunächst ohne Validierung im Browser durchführen und beim Absenden eines Formulars eine eventuelle Mitteilung über eine ungültige Eingabe erhalten.
Reduzierte Anwendungsgrößen
In zweierlei Hinsicht wurde bei Angular 5 daran gearbeitet, die im Build-Prozess entstehenden Dateien kleiner zu machen: Zum einen ist der Angular build optimizer nun standardmäßig aktiviert, zum anderen kann irrelevanter whitespace automatisch aus Templates entfernt werden.
Der build optimizer in Angular bedient sich zweier Techniken: Einerseits unterstützt er die schon bestehende tree shaking Funktionalität, um möglichst viel an nicht verwendeten Klassen und Funktionen aus den Bundles entfernen zu können. Andererseits kann er aus den Bundles die Definition von Decorators entfernen, die dort nicht gebraucht werden.
Schnellere AOT-Kompilierung
Eine weitere Optimierung fand bei der ahead-of-time - Kompilierung statt. Mit Hilfe von Typescript Transforms konnte hier bei wiederholt ausgeführten Builds die Performance drastisch gesteigert werden. Beispielsweise soll laut Angular-Team ein erneuter Build von https://angular.io nun statt 40 Sekunden nur noch 2 Sekunden dauern.
Da AOT-Kompilierung bisher nur bei Production Builds - und nicht während der Entwicklung - eingesetzt wurde, war diese Performanceverbesserung bisher nur beim Deployment relevant. Das Angular-Team zielt aber darauf ab, dass nach weiteren Performanceverbesserungen AOT-Kompilierung auch in Development-Builds zum Standard werden kann. Bisher kann das mit dem folgenden Befehl schon ausprobiert werden:
ng serve --aot
Upgradeprozess von alten Angular-Versionen
Das Angular-Team hat für Entwickler den folgenden Upgrade-Guide erstellt, der beim wechseln auf zukünftige Versionen hilft:
https://angular-update-guide.firebaseapp.com/
Davor ist es noch wichtig, das npm-Paket “angular-cli” auf die neueste Version 1.5 zu aktualisieren.
Angular 5 - Schulungen bei PPEDV
Immer auf dem neuesten Stand: Schon jetzt bieten wir bei PPEDV Schulungen an, die auf Angular 5 abgestimmt sind und Ihnen die Grundlagen dazu innerhalb von 2 Tagen vermitteln: http://ppedv.de/Schulung/Kurse/AngularJS-JavaScript-SinglePage-WebApp-SPA-MVC-MVVM-Seminar-Training.aspx