Angular-2-Komponenten können in Angular-1-Applikationen integriert werden

Nahtloser Upgrade-Pfad von Angular 1 zu Angular 2
Kommentare

Es ist noch kein ganzes Jahr her, dass die kommende Major-Version von AngularJS erstmals genauer vorgestellt wurde und dank fehlender Migrationspfade die Community stark verunsichert hat. Seither hat sich einiges an der Entwicklung der neuen Version getan, und Entwickler können endgültig durchatmen: es soll einen nahtlosen Upgrade-Pfad von bestehenden Angular-1-Applikationen zu Angular 2 geben.

Dabei, so erklärte das Google Entwicklerteam in einem Blogpost, soll es möglich sein, Angular 1 und 2 in der gleichen Applikation zu nutzen, was für viele Entwickler den Umstieg von Angular 1 zur neuen Major-Version deutlich vereinfachen dürfte.

ng-upgrade ermöglicht Interoperabilität von Angular-1- und Angular-2-Applikationen

Die kommende Angular-Version soll zahlreiche Vorteile gegenüber Angular 1 bieten – insbesondere, was die Performance oder das Templating angeht. So sollen Angular-2-Applikationen etwa drei- bis fünfmal schneller bei Render- und Re-Render-Szenarien reagieren. Gleichzeitig wird die Notwendigkeit für zahlreiche Direktiven entfernt; zudem wird das Rendering vom DOM entkoppelt.

Dadurch soll nicht nur die Performance von Angular-2-Applikationen verbessert, sondern auch für mehr Flexibilität gesorgt werden. Damit das Upgrade von Angular 1 zur neuen Version möglichst problemlos über die Bühne gebracht werden kann, können in bestehende Angular-1-Applikationen Angular-2-Komponenten und -Dienste integriert und so die Applikation mithilfe von mehreren kleineren Commits für einzelne Dienste und Komponenten nach und nach mit dem Upgrade zu Angular 2 versehen werden.

So sieht der typische Upgrade-Prozess aus

Der Upgrade-Prozess beim Umstieg von Angular 1 zu Angular 2 dürfte sich bei den meisten Applikationen ähneln. Das Entwicklerteam beschreibt ihn etwa folgendermaßen:

  1. Integration der ng-upgrade-Library und Angular 2 in die bestehende Angular-1-Applikation
  2. Auswahl der zu migrierenden Komponenten:
    1. Anpassen des Angular-1-Direktiven-Templates an die Angular-2-Syntax
    2. Konvertieren der Controller/Linking-Funktion der Direktive in Angular-2-Syntax/Semantics
    3. Export der Direktive als Angular-1-Komponente mithilfe von ng-upgrade
  3. Auswahl des zu migrierenden Dienstes
    1. Die meisten Dienste sollten nur minimale Änderungen benötigen.
    2. Konfiguration des Dienstes in Angular
    3. Neu-Export des Dienstes in Angular 1 mit ng-upgrade; allerdings ist der Schritt optional und nur dann nötig, wenn er noch von anderem Angular-1-Code genutzt wird.
  4. Schritt 2 und 3 so lange wiederholen, bis alle Komponenten und Dienste konvertiert wurden
  5. Top-Level-Angular-1-Bootstrap mit Angular-2-Bootstrap ersetzen

Möglich wird das durch die neue Library ng-upgrade. Sie wird gemeinsam mit Angular 2 in die bestehende Angular-1-Applikation eingefügt und soll für die Interoperabilität von Version 1 und 2 bei der Dependency Injection, Komponenten-Nesting, Transclusion und Change-Detection sorgen. Mehr Informationen dazu hält der entsprechende Blogpost im Google Entwicklerblog bereit; dort findet sich auch ein kurzes Q&A mit den wichtigsten Fragen und Antworten zum Nutzung von Angular und dem anstehenden Upgrade von Angular 1 zu Angular 2.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Meinungen zu diesem Beitrag

X
- Gib Deinen Standort ein -
- or -