Generelles zum Routing
- wir befinden uns in einer Single Page Application (SPA)
- wenn wir verschiedene Seiten darstellen wollen, so können wir entweder einen Page Reload machen oder den Router benutzen
- wir schauen uns Variante zwei an ;-)
Anzeige eines Menüs
- wir möchten eine kleine Navigation in unserer Applikation nutzen
- der Benutzer soll über dem Contentbereich mit Hilfe eines Menüs zu verschiedenen Seiten navigieren können
das Router Modul
- ist in einem eigenen Paket: @angular/router
- wird mit RouterModule.forRoot(routeConfig) konfiguriert
- erwartet zur Konfiguration ein Route[]
- eine Route hat Properties wie path und component - somit wird für einen bestimmten Pfad eine Komponente geladen
- Die Reihenfolge ist wichtig! Der erste Match gewinnt
ein einfaches Konfigurationsbeispiel
const routeConfig: Routes = [
{ path: 'pizze', component: PizzeComponent },
{ path: 'order/:id', component: OrderComponent },
{ path: '', redirectTo: 'pizze',
pathMatch: 'full'},
{ path: '**', component: NotFoundComponent }
];
@NgModule({
imports: [
RouterModule.forRoot(routeConfig)
]
})
export class AppModule { }
Router Outlet - wo die Komponente angezeigt wird
- die Komponente wird direkt unter <router-outlet></router-outlet> angezeigt
- Router Outlet ist eine Direktive aus dem Angular Router Modul
<h1>Willkommen</h1>
<navigation-bar></navigation-bar>
<router-outlet></router-outlet>
Router Links - Navigation
- klickt der User auf einen Link soll navigiert werden
- Alternativ kann der User natürlich die URL auch manuell eingeben ;-)
- die routerLink Direktive wird mit einem Binding ausgehend vom root versehen
<nav>
<ul>
<li><a routerLink="/pizze">Pizze</a></li>
<li><a routerLink="/order">Bestellungen</a></li>
</ul>
</nav>
RouterLinkActive Direktive
- routerLinkActivefügt dem HTML Element eine CSS Klasse hinzu wenn der routerLink aktiv ist
- Zum Hervorheben des aktiven Menüpunktes
<nav>
<ul>
<li><a routerLink="/pizze"
routerLinkActive="active">Pizze</a></li>
</ul>
</nav>
Angabe des Basis-Pfads
- Dient dazu, dem Router mitzuteilen unter welchem Pfad die Applikation gehostet ist
- Wird im <head> des index.html als erstes Kind eingefügt.
<html>
<head>
<base href="/">
</head>
...
</html>
Aufgabe 10.1 - Routing
- Branch: 09_ServicesHTTP_2
- Erstelle eine neue Home Komponente die das Cinema Bild aus dem assets Ordner anzeigt
- Füge in die Cinema Komponente eine Navigation ein und darunter den Platz für die gewählte Route
- Erstelle eine Konfiguration für den Router, er soll die Pfade home und movies kennen
- Im Falle des leeren Root Pfades soll zur Home Komponente navigiert werden
Aufgabe 10.1 - Mögliche Lösung
- Branch: 10_Routing_1
- Wenn ihr eure Änderungen verwerfen möchtet und direkt zur Lösung wollt: git reset --hard && git checkout 10_Routing_1
Aufgabe 10.2 - Visitors
- Branch: 10_Routing_1
- Diese Übung ist eine Wiederholung bestehender Konzepte
- Baue analog zu den Movies eine neue Seite für Visitors
- die Daten kannst du ebenfalls per REST vom /api/visitors Endpoint beziehen
- Stelle Besucher und einige Felder tabellarisch dar
- Es soll möglich sein zur Seite zu navigieren
Aufgabe 10.2 - Mögliche Lösung
- Branch: 10_Routing_2
- Wenn ihr eure Änderungen verwerfen möchtet und direkt zur Lösung wollt: git reset --hard && git checkout 10_Routing_2
Weitere Router Features
- der Router ist sehr mächtig
- dementsprechend umfangreich ist das API
- Route Parameter, Animationen, Child Routes, mehrere Routen und named Outlets, secondary Routes, Route Guards, Lazy Loading...
- Offizielle Router Dokumentation
