Sie sind hier

Angular Router

Eintrag zuletzt aktualisiert am: 07.11.2016

Mit Hilfe des – ebenfalls komplett überarbeiteten – Angular Router wechselt der Entwickler die Ansichten in einer Single-Page-Application. Jede Route in Angular 2.x besteht aus der Zuordnung eines relativen Pfades zu einer Komponente; diesen Zusammenhang legt der Entwickler in einer eigenen Klasse fest, die wie alle anderen Module auch in app.module.ts zu registrieren ist. Mit dem Tag <router-outlet> ist dann die Position für die von der jeweils aktiven Komponente erzeugte Ausgabe festzulegen. Der Wechsel zwischen den Routen erfolgt über Tags (<a routerLink="/liste">Liste zeigen</a>) oder im JavaScript-Code durch Aufruf der Methode navigate() in einer injizierten Instanz der von Angular 2.x vordefinierten Router-Klasse.

Die URL bildet der Angular Router im Standard mit dem Schrägstrich (PathLocationStrategy), was aber nur in modernen Browser funktioniert, die die Session History Management mit history.pushState() unterstützen. Ältere Browser lösen bei einer URL mit Schrägstrich stets einen Rundgang zum Server aus. Für diese Fälle kann der Entwickler die LocationStrategy auf HashLocationStrategy setzen und damit die relativen URLs per Hash abtrennen (http://server/#/liste), sodass selbst in den ältesten Browsern kein Rundgang ausgelöst wird.

Das wohl größte Chaos in der Entwicklungsphase von Angular 2.x gab es beim Router . Das Entwicklungsteam wollte für Angular 1.x und Angular 2.x einen gemeinsamen Router bereitstellen, um die Migration zu vereinfachen. Die für Angular 1.4 geplante Lösung (ngNewRouter) wurde nie vollendet; in Angular 1.5 erschien dagegen ein ngComponentRouter, der aber nun ebenfalls nicht dem jetzt in Angular 2.x erschienen Router entspricht. Für eine vereinfachte Migration empfiehlt Google jetzt in [https://docs.angularjs.org/guide/component-router], auf das Community-Projekt uiRouter [https://github.com/angular-ui/ui-router] auszuweichen.