© Matej Kotula/Shutterstock.com
Teil 3: Der Component Router in Angular 2

Tutorial: Moderne Apps für alle Plattformen


Der neue Component Router erlaubt das Simulieren verschiedener Seiten innerhalb einer auf Angular 2 basierenden Single Page Application. Dazu lädt er Komponenten in einen Platzhalter. Er unterstützt Lazy Loading und gibt der Anwendung über Lifecycle Hooks die Möglichkeit, ein Veto gegen einen Seitenwechsel einzulegen.

Selbst so genannte Single Page Applications (SPA) müssen dem Anwender unterschiedliche Seiten präsentieren. Abhängig vom Zustand der Anwendung gilt es, die eine oder andere Ansicht einzublenden. Router helfen innerhalb einer SPA bei dieser nicht gerade spannenden Aufgabe. Daneben erlauben sie es auch, einzelne Ansichten in verschiedenen Dateien zu organisieren. Diese Dateien lädt der Router entweder bei Bedarf oder bereits beim Anwendungsstart.

Lediglich Ansichten ein- und auszublenden ist jedoch zu wenig, denn in diesem Fall bekommt der Browser vom damit verbundenen Zustandswechsel nichts mit. Das bedeutet zum Beispiel, dass der Anwender den Back-Button nicht nutzen kann, um zu früheren Zuständen bzw. Ansichten innerhalb der SPA zurückzukehren. Dasselbe gilt für Bookmarks oder die Nutzung von Links, die auf eine bestimmte Ansicht der SPA verweisen. Allerdings lösen Router auch dieses Problem: Sie spendieren jeder Ansicht einen logischen URL, den der URL der SPA ergänzt. Somit ändert sich der URL bei jedem Zustandswechsel und der Browser kann Back-Buttons oder Bookmarks anbieten.

Beim Component Router handelt es sich um die offizielle Routerimplementierung für Angular 2, die aus der Feder des Produktteams stammt und auch in einer Portierung für AngularJS 1.x [1] zur Verfügung steht. Dieser Artikel ergänzt das Beispiel aus dem letzten Teil der vorliegenden Serie, das komplette Beispiel befindet sich unter [2].

Überblick zum Component Router

Der im Lieferumfang von Angular 2 enthaltene Component Router sieht vor, dass die SPA neben konkreten Bereichen, wie Menüs oder Fußzeilen, auch einen Platzhalter aufweist (Abb. 1).

image

Abb. 1: Single Page Application mit Platzhalter

Abhängig vom logischen URL, den der Aufrufer an den (physischen) URL der SPA anhängt, lädt der Component Router die eine oder andere Komponente in diesen Platzhalter. Hierbei ist auch davon die Rede, dass der Router die adressierte Komponente „aktiviert“, was in Abbildung 2 veranschaulicht wird. Hier wurde an den physischen URL /index.html der logische URL / flug-buchen/flug-suchen angehängt. Das veranlasst den Router zum Aktivieren der damit assoziierten Komponente FlugSuchen, die im vorigen Teil dieser Artikelserie beschrieben wurde. Welcher URL zum Aktivieren welcher Komponente führen soll, legt der Entwickler im Rahmen einer Routingkonfiguration fest.

image

Abb. 2: Aktivieren von Komponenten mit dem Component Router

Besonders spannend wird das Thema Routing beim Einsatz von Komponenten, die neben konkreten Aspekten einen weiteren Platzhalter ins Spiel bringen. Ein Beispiel dafür ist die Komponente FlugBuchen in Abbildung 3. Zum Verwalten ihres Platzhalters erhält diese Komponente einen weiteren Router. Da dieser dem für die gesamte SPA verantwortlichen Router untergeordnet ist, ist hierbei auch von Child Router die Rede. Damit kann FlugBuchen weitere Komponenten innerhalb ihres Platzhalters aktivieren. Ein Beispiel dafür findet sich in Abbildung 4. Hier gab der Aufrufer mit dem genutzten URL an, die Komponente FlugSuchen innerhalb von FlugBuchen aktivieren zu wollen.

image

Abb. 3: Komponente mit Child Router

Logische URLs

Beim Einsatz von Routing stellt sich unter anderem die Frage, wie der Browser – aber auch die SPA – den physischen Teil des URL vom logischen Teil unterscheiden kann. Hierzu sind zwei Ansätze üblich: Der klassische dieser beiden sieht die Platzierung des logischen URL im Hash-Fragment vor. Das würde im hier betrachteten Beispiel wie folgt aussehen: index.html#flug-buchen/flug-suchen.

Der Vorteil dieses Ansatzes ist, dass der Browser das Hash-Fragment nie zum Server sendet und beim Ändern des Hash-Fragments auch keine neue Seite beim Server anfordert. Letzteres wäre nicht der Fall, wenn die SPA den URL vor dem Hash-Fragment ändert. Macht sie aus index.html etwa index2.html, beginnt der Browser mit dem Laden dieser Datei vom Server.

Eine Alternative dazu bietet das mit HTML5 assoziierte History-API. Mit diesem kann eine Anwendung programmatisch verschiedene Zustände sowie URLs dafür definieren und später via Bookmarks, Links oder dem Back-Button dazu zurückkehren. Solche URLs sehen aus wie herkömmliche URLs. Anstelle der Raute (#) kann somit als Trennzeichen zwischen dem physischen und logischen Teil ein einfacher Slash zum Einsatz kommen.

Da die SPA hier die Grenze zwischen physischem und logischem URL selbst verwaltet, liegt diese Information der SPA erst nach dem Laden vor. Das bedeutet, dass der Browser zunächst den gesamten URL beim Server anfragt. Somit muss der Server hier bei einer Anfrage des URL index.html/flug-buchen/flug-suchen die SPA retournieren, die sich hinter index.html befindet. Dasselbe Verhalten hat der Server beim Anfordern anderer URLs durchzuführen, die mit index.html beginnen. Serverseitige Frameworks bieten dazu in der Regel einen eigenen Routingmechanismus.

image

Abb. 4: Hierarchisches Routing

Mit dem Component Router loslegen

Um in den Genuss des Component Routers zu kommen, bindet der Entwickler das Bundle router.js ein. Für den Einsatz während der Entwicklung bietet Angular 2 alternativ dazu das Bundle router.dev.js an node_modules/angular2/bundles/router.dev.js.

Wie weiter unten beschrieben, ist zusätzlich eine Providerkonfiguration für den Component Router in die Anwendung aufzunehmen. Hierzu ist es am einfachsten, die vorgefertigte Konfiguration ROUTER_PROVIDERS aus dem Modul angular2/router zu nutzen.

Die nächsten Abschnitte zeigen, wie die in dieser Artikelserie beschriebene Anwendung um das Routing erweitert werden kann.

Top-Level-Komponente mit Routingkonfiguration einrichten

Für den Einsatz des Component Routers benötigt die Anwendung eine Komponente, die die gesamte Anwendung repräsentiert und einen Platzhalter aufweist. Ein Beispiel für eine solche Top-Level-Komponente findet sich in Listing 1. Diese Komponente listet die Konstante ROUTER_DIRECTIVES aus dem Namensraum des Routers – angular2/router – im Rahmen ihrer Direktiven. Somit hat ihr Template Zugriff auf Direktiven zum Definieren ein...

Neugierig geworden? Wir haben diese Angebote für dich:

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