© Excellent backgrounds/Shutterstock.com
Java Magazin
Teil 2: Komponenten und der Component Router

Einseitig vielseitig

Der neue Component Router erlaubt das Simulieren verschiedener Seiten innerhalb einer auf Angular 2 basierenden Single-Page-Applikation. 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.

Manfred Steyer


ArtikelserieTeil 1: Erste Schritte mit Angular 2 und TypeScriptTeil 2: Komponenten und der Component RouterTeil 3: Formulare und Validierung

Auch so genannte Single-Page-Applikationen (SPA) müs­sen dem Anwender unterschiedliche Seiten präsentieren. Abhängig vom Zustand der Anwendung gilt es, die eine oder die 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.

InfokastenDieser Artikel wurde anhand des Release Candidate 1 von ­Angular 2 geschrieben. Für den geplanten Release Candidate  2 stehen in diesem Bereich einige API-Änderungen ins Haus. Die zugrunde liegenden Konzepte bleiben jedoch erhalten.

Lediglich Ansichten ein- und auszublenden ist jedoch zu wenig, denn in diesem Fall bekommt der Browser vom damit verbundenen Zustandswechsel nichts mit. Das bedeutet z. B., dass der Anwender den Back-Button nicht nutzen kann, um zu früheren Zuständen oder Ansichten innerhalb der SPA zurückzukehren. Dasselbe gilt für Bookmarks oder Links, die auf eine bestimmte Ansicht der SPA verweisen. Glücklicherweise lösen Router auch dieses Problem. Sie spendieren jeder Ansicht einen logischen URL, der den 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 auch 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 Serie, sodass es unter Nutzung des Component Routers mehrere Ansichten präsentiert. Das komplette Beispiel findet sich unter [2].

Überblick zum Component Router

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

Abb. 1: Single Page Application mit Platzhalter

Abhängig von dem logischen URL, den der Aufrufer an den (physischen) URL der SPA anhängt, lädt der Component Router die eine oder die andere Komponente in diesen Platzhalter. Hierbei ist auch davon die Rede, dass der Router die adressierte Komponente aktiviert. Abbildung 2 veranschaulicht dies. Hier wurde an dem physischen URL /index.html der logische URL / flug-buchen/...

Java Magazin
Teil 2: Komponenten und der Component Router

Einseitig vielseitig

Der neue Component Router erlaubt das Simulieren verschiedener Seiten innerhalb einer auf Angular 2 basierenden Single-Page-Applikation. 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.

Manfred Steyer


ArtikelserieTeil 1: Erste Schritte mit Angular 2 und TypeScriptTeil 2: Komponenten und der Component RouterTeil 3: Formulare und Validierung

Auch so genannte Single-Page-Applikationen (SPA) müs­sen dem Anwender unterschiedliche Seiten präsentieren. Abhängig vom Zustand der Anwendung gilt es, die eine oder die 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.

InfokastenDieser Artikel wurde anhand des Release Candidate 1 von ­Angular 2 geschrieben. Für den geplanten Release Candidate  2 stehen in diesem Bereich einige API-Änderungen ins Haus. Die zugrunde liegenden Konzepte bleiben jedoch erhalten.

Lediglich Ansichten ein- und auszublenden ist jedoch zu wenig, denn in diesem Fall bekommt der Browser vom damit verbundenen Zustandswechsel nichts mit. Das bedeutet z. B., dass der Anwender den Back-Button nicht nutzen kann, um zu früheren Zuständen oder Ansichten innerhalb der SPA zurückzukehren. Dasselbe gilt für Bookmarks oder Links, die auf eine bestimmte Ansicht der SPA verweisen. Glücklicherweise lösen Router auch dieses Problem. Sie spendieren jeder Ansicht einen logischen URL, der den 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 auch 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 Serie, sodass es unter Nutzung des Component Routers mehrere Ansichten präsentiert. Das komplette Beispiel findet sich unter [2].

Überblick zum Component Router

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

Abb. 1: Single Page Application mit Platzhalter

Abhängig von dem logischen URL, den der Aufrufer an den (physischen) URL der SPA anhängt, lädt der Component Router die eine oder die andere Komponente in diesen Platzhalter. Hierbei ist auch davon die Rede, dass der Router die adressierte Komponente aktiviert. Abbildung 2 veranschaulicht dies. Hier wurde an dem physischen URL /index.html der logische URL / flug-buchen/...

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