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
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 WhitespacesHallo
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...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
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 WhitespacesHallo
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...
