08 Routing

Routing - Routing in Angular 2

Ausgangslage

Sie kennen sich bereits mit Bindings, Modularisierung und Direktiven aus und haben Erfahrungen mit Styling und Pipes

Ziel

Am Ende dieses Kapitel sind Sie in der Lage Ihre Komponenten so zu Editieren, dass Sie den Angular Router verwenden können. Darüber hinaus wissen Sie, wie Sie Routen (mit oder ohne Parameter) benutzen und mit Hilfe der BrowserHistory zu navigieren.

Inhalt

1. Routing in NG2
2. Vorbereitungen
3. Routing einrichten und konfigurieren
4. Routing Direktiven
5. Weitere Routingfunktionalitäten
6. Zusätzliche Informationen

Routing in NG2

Laut Wikipedia ist Routing die Wegfindung von Datenpaketen in einem Netzwerk. Innerhalb einer NG2-Anwendung bildet Routing die Basis jeder Single Page Anwendung, da man anhand von Routen den aktuellen Status der Seite ablesen kann und bestimmt wird, welche App-Komponenten angezeigt werden. Das Routing dient daher zur Wegfindung innerhalb der Angular-App

Bestandteile des Routing-Moduls

• Metadaten zur Konfiguration des Routers
• RouterLink-Direktive
• RouterOutlets- Direktive
• Diverse Services

Vorbereitungen

1. Wichtig! <base href='/base/path'> - Tag in der Head Bereich der index.html überprüfen!
2. Modularisierung überprüfen, so dass jede Komponente, die vom Routing betroffen ist einzeln vorhanden ist und nicht zusammengefasst in einer Komponente steht.
3. "@angular/router": "~3.1.1" in die Dependencies der App eintragen
4. Die Datei app-routing.module.ts erstellen, welche die Konfiguration des App-Routers enthalten wird

Routing einrichten und konfigurieren

Damit Routing flexibel eingesetzt werden kann, empfielt sich ein Routing Modul zu erstellen, welches die Routen der Anwendung und deren Konfigurationen in einer Konstante enthält und sich selbst exportiert. app-routing.module.ts

import {NgModule} from "@angular/core";
import {RouterModule, Routes} from "@angular/router";
import {DashboardComponent} from "./dashboard/dashboard.component";
import {HeroesComponent} from "./heroes/heroes.component";
import {HeroDetailComponent} from "./hero/hero-detail.component";

const routes: Routes = [
    {path: '', redirectTo: '/dashboard', pathMatch: 'full'},
    {path: 'dashboard', component: DashboardComponent},
    {path: 'detail/:id', component: HeroDetailComponent},
    {path: 'heroes', component: HeroesComponent},
    {path: '**', redirectTo: '/dashboard'}
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})
export class AppRoutingModule {
}

Das routes-Array beschreibt, wie durch die App navigiert wird. Gibt man dieses der Router.forRoot Methode in den Imports des Moduls, so wird der Router automatisch konfiguriert. Dabei mapt jede Route eine URL zu einer Komponente.

Der Parameter :id in der dritten URL ist ein Token für einen Routenparameter. Bei /hero/42, ist die "42" der Id-Parameter. Die dazugehörige HeroDetailComponent wird diesen Parameter benutzen um die Details des Heroes mit der Id 42 anzuzeigen.

Routing Direktiven

Die RouterLink-, RouterLinkActive- und RouterOutlet-Direktiven werden vom Angular RouterModule-Package bereitgestellt und werden direkt im Template eingebunden.

Router Outlet

Bei einem Aufruf der Route /heroes mit der oben definierten Konfiguration, erkennt der Router, dass die HerosComponent angefragt wurde und platziert diese innerhalb des Router-Outlets, welches in der Hostkomponente enthalten ist.

app.component.html

<router-outlet></router-outlet>

Wenn noch ein zusätzlicher Outlet benötigt wird, bietet das Routung Module die Möglichkeit weitere Outlets einzubinden und diese anhand eines name-Attributs zu identifizieren.

Bsp.

const routes = [{path: '/mycomponent', component: MyComponent, outlet: 'my-component'}];

<router-outlet name="mycomponent"></router-outlet>

RouterLink-Direktive

Die RouterLink-Direktive wird als Attribut von a-Attributen verwendet und dient dazu über Verlinkungen innerhalb der App zu navigieren. Dies kann mit oder ohne zusätzliche Parameter erfolgen.

app.component.html

<a [routerLink]="['/endpointWithParams', { foo: 'foo' }]">Crisis Center</a>

RouterLinkActive-Direktive

Die RouterLinkActive Direktive setzt eine CSS-Klasse für aktive RouterLinks, basierend auf dem aktuellen Status des Routers. Das passiert dabei in allen Kind Elementen des Routing-Baumes, sodass sowohl der Eltern- als auch der Kindknoten die Klasse gesetzt bekommen. Um dieses verhalten zu unterbinden, setzt man einfach [routerLinkActiveOptions] mit dem Parameter { exact: true }. Dies bewirkt, dass die CSS-Klasse nur gesetzt wird, wenn die URL zu vollständig matched.

app.component.html

<a routerLink="/crisis-center" routerLinkActive="active">Crisis Center</a>

Weitere Routingfunktionalitäten

ActivatedRoute

Das ActivatedRoute-Modul stellt einer Komponente spezielle Routenparameter, statische Informationen, Query-Parameter und weitere Informationen bereit. Es wird häufig benutzt um die angeforderten Resourcen anhand der Route identifizieren. Der Service muss im Konstruktor der Komponente injected werden, damit er verwendet werden kann.

hero-detail.component.ts

constructor(private heroService: HeroService,
                private route: ActivatedRoute) {
}

ngOnInit(): void {
        this.route.params
            .switchMap((params: Params) => this.heroService.getHero(+params['id']))
            .subscribe(hero => this.hero = hero);
    }

In diesem Code-Bespiel wird die Id des angefragten Heros mit Hilfe der route.params extrahiert und der Service mit dieser aufgerufen.

Router-Modul

Das Router-Modul ist ein eigenständiges Moodul, welches Services und Direktiven zum Navigieren innerhalb der Applikation bereit stellt. Es muss im Konstruktor der Komponente injected werden, damit man es verwenden kann. Dabei stellt es eine ganze Reihe von Funktionalitäten bereit. Die wichtigste Funktionalität ist das weiterleiten auf andere Komponenten.

**dashboard.component.ts

constructor(private heroService: HeroService, 
	           private router: Router) {
}

gotoDetail(): void {
        this.router.navigate(['/detail', this.selectedHero.id]);
}

Location-Service

Der Location Service wird benutzt um vom Inneren einer Komponente mit der Browser Historie zu interagieren und Beispielsweise in der History zurück zu gehen.

hero-detail.component.ts

constructor(private location: Location) {}

goBack(): void {    
this.location.back();
}

hero-detail.component.html

<button (click)="goBack()">Back</button>

Zusätzliche Informationen und Dokumentation

• Weitere Methoden des Router Modules ->klick
• Weitere Methoden des Location Services ->klick
• Routing im englischen Angular2 Tutorial ->klick
• VideoToBrain Tutorial zu Angular2 (evtl. kostenpflichtig) ->klick