© Excellent backgrounds/Shutterstock.com
Java Magazin
Kolumne: Die Angular-Abenteuer

Kolumne: Die Angular-Abenteuer

Gemäß des im Dezember 2016 veröffentlichten Plans gibt es zweimal jährlich ein neues Major-Release von Angular. Wenngleich das die Möglichkeit für Breaking Changes eröffnet, sollten sich diese jedoch in Grenzen halten. Ein Beispiel dafür ist, dass beim Umstieg auf eine neue Angular-Version auch TypeScript zu aktualisieren ist. Da aber gerade im UI-Umfeld die Zeit nicht stillsteht, hat sich das Angular-Team eine Deprecation Policy auferlegt. Demnach können mit jedem Major-Release Konzepte als veraltet erklärt werden. Die Entwickler haben dann mindestens bis zum nächsten Major Zeit, diese zu ersetzen. Auch das war bis jetzt selten Hexerei. Beispielsweise wurde die Klasse OpaqueToken durch InjectionToken ersetzt, und aus dem Element template wurde ng-template, um Konflikte zu vermeiden. Teams, denen die halbjährlichen Zyklen zu kurz sind, können stattdessen auch auf Long-Time-Support-Versionen von Angular setzen. Diese werden jeweils für ein Jahr gepflegt. Die erste dieser Versionen ist 4.x. Somit wird sowohl dem Wunsch mancher Teams nach weniger Veränderung, aber auch der rasanten Weiterentwicklung von UI-Technologien Rechnung getragen. Wie auch schon beim Übergang von Version 2 auf 4 gestaltet sich der Sprung auf Angular 5 sehr evolutionär. Neue Möglichkeiten in Bereichen wie Internationalisierung, Performance oder Progressive Web-Apps runden den Leistungsumfang ab.

Manfred Steyer


Internationalisierung vereinfachtDie Standardsprache lässt sich hingegen nicht im Nachhinein ändern. Auch wenn das auf den ersten Blick seltsam erscheint, gibt es dafür gute technische Gründe. Es geht dabei um das wohl wichtigste Architekturziel von Angular: Performance. Um die Handhabe der Pipes zu optimieren, sieht Angular das Konzept der puren Pipes vor. In Anlehnung an die Welt der funktionalen Programmierung sind das Pipes, deren Ausgaben einzig und allein von ihren Eingaben bestimmt werden. Sich ändernde Nebeneffekte, wie eine globale Variable mit der Standard-Locale, dürfen sich auf solche Pipes nicht auswirken. Aufgrund dieser Einschränkung muss Angular pure Pipes auch nur erneut ausführen, wenn sich die Eingaben ändern. Nicht-pure Pipes, die von Nebeneffekten abhängen, muss Angular hingegen immer und immer wieder ausführen, konkret nach jedem Ereignis. Zumal es die Nebeneffekte nicht überwachen kann. Das ist auch der Grund, warum die meisten von Angular gelieferten Pipes pur sind. Und das betrifft auch die hier genannten. Ein Beispiel für das Registrieren von Locales findet sich in Listing 1. Es importiert die gewünschten Metadaten und registriert sie mit der Funktion registerLocaleData.Listing 1: Registrieren von Localesimport { registerLocaleData } from '@angular/common';import localeDe from '@angular/common/locales/de';import localeDeAt from '@angular/common/locales/de-AT';import localeEs from '@angular/common/locales/es'; registerLocaleData(localeDe); // de-DEregisterLocaleData(localeDeAt); // de-ATregisterLocaleData(localeEs); // es-ESimport { registerLocaleData } from '@angular/common';import localeDe from '@angular/common/locales/de';import localeDeAt from '@angular/common/locales/de-AT';import localeEs from '@angular/common/locales/es'; registerLocaleData(localeDe); // de-DEregisterLocaleData(localeDeAt); // de-ATregisterLocaleData(localeEs); // es-ESproviders: [ [...] { provide: LOCALE_ID, useValue: 'de' },]ng build --prod --locale=de

Datum (Default=de): {{item.date | date:'long'}}

Datum (de-AT): {{item.date | date:'long':'': 'de-AT'}}

Datum (es): {{item.date | date:'long':'': 'es'}}

Entfernen von Whitespaces

Hallo

Welt!

@Component({ selector: 'flight-card', templateUrl: './flight-card.component.html', preserveWhitespaces: false})export class FlightCardComponent {...}AOT als Standard?ngUpgrade Lite macht Parallelbetrieb schnellerServer-side Rendering: Nicht zweimal ladenE...
Java Magazin
Kolumne: Die Angular-Abenteuer

Kolumne: Die Angular-Abenteuer

Gemäß des im Dezember 2016 veröffentlichten Plans gibt es zweimal jährlich ein neues Major-Release von Angular. Wenngleich das die Möglichkeit für Breaking Changes eröffnet, sollten sich diese jedoch in Grenzen halten. Ein Beispiel dafür ist, dass beim Umstieg auf eine neue Angular-Version auch TypeScript zu aktualisieren ist. Da aber gerade im UI-Umfeld die Zeit nicht stillsteht, hat sich das Angular-Team eine Deprecation Policy auferlegt. Demnach können mit jedem Major-Release Konzepte als veraltet erklärt werden. Die Entwickler haben dann mindestens bis zum nächsten Major Zeit, diese zu ersetzen. Auch das war bis jetzt selten Hexerei. Beispielsweise wurde die Klasse OpaqueToken durch InjectionToken ersetzt, und aus dem Element template wurde ng-template, um Konflikte zu vermeiden. Teams, denen die halbjährlichen Zyklen zu kurz sind, können stattdessen auch auf Long-Time-Support-Versionen von Angular setzen. Diese werden jeweils für ein Jahr gepflegt. Die erste dieser Versionen ist 4.x. Somit wird sowohl dem Wunsch mancher Teams nach weniger Veränderung, aber auch der rasanten Weiterentwicklung von UI-Technologien Rechnung getragen. Wie auch schon beim Übergang von Version 2 auf 4 gestaltet sich der Sprung auf Angular 5 sehr evolutionär. Neue Möglichkeiten in Bereichen wie Internationalisierung, Performance oder Progressive Web-Apps runden den Leistungsumfang ab.

Manfred Steyer


Internationalisierung vereinfachtDie Standardsprache lässt sich hingegen nicht im Nachhinein ändern. Auch wenn das auf den ersten Blick seltsam erscheint, gibt es dafür gute technische Gründe. Es geht dabei um das wohl wichtigste Architekturziel von Angular: Performance. Um die Handhabe der Pipes zu optimieren, sieht Angular das Konzept der puren Pipes vor. In Anlehnung an die Welt der funktionalen Programmierung sind das Pipes, deren Ausgaben einzig und allein von ihren Eingaben bestimmt werden. Sich ändernde Nebeneffekte, wie eine globale Variable mit der Standard-Locale, dürfen sich auf solche Pipes nicht auswirken. Aufgrund dieser Einschränkung muss Angular pure Pipes auch nur erneut ausführen, wenn sich die Eingaben ändern. Nicht-pure Pipes, die von Nebeneffekten abhängen, muss Angular hingegen immer und immer wieder ausführen, konkret nach jedem Ereignis. Zumal es die Nebeneffekte nicht überwachen kann. Das ist auch der Grund, warum die meisten von Angular gelieferten Pipes pur sind. Und das betrifft auch die hier genannten. Ein Beispiel für das Registrieren von Locales findet sich in Listing 1. Es importiert die gewünschten Metadaten und registriert sie mit der Funktion registerLocaleData.Listing 1: Registrieren von Localesimport { registerLocaleData } from '@angular/common';import localeDe from '@angular/common/locales/de';import localeDeAt from '@angular/common/locales/de-AT';import localeEs from '@angular/common/locales/es'; registerLocaleData(localeDe); // de-DEregisterLocaleData(localeDeAt); // de-ATregisterLocaleData(localeEs); // es-ESimport { registerLocaleData } from '@angular/common';import localeDe from '@angular/common/locales/de';import localeDeAt from '@angular/common/locales/de-AT';import localeEs from '@angular/common/locales/es'; registerLocaleData(localeDe); // de-DEregisterLocaleData(localeDeAt); // de-ATregisterLocaleData(localeEs); // es-ESproviders: [ [...] { provide: LOCALE_ID, useValue: 'de' },]ng build --prod --locale=de

Datum (Default=de): {{item.date | date:'long'}}

Datum (de-AT): {{item.date | date:'long':'': 'de-AT'}}

Datum (es): {{item.date | date:'long':'': 'es'}}

Entfernen von Whitespaces

Hallo

Welt!

@Component({ selector: 'flight-card', templateUrl: './flight-card.component.html', preserveWhitespaces: false})export class FlightCardComponent {...}AOT als Standard?ngUpgrade Lite macht Parallelbetrieb schnellerServer-side Rendering: Nicht zweimal ladenE...

Neugierig geworden?


   
Loading...

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang