Suche
Tutorial Teil 3: Navigation mit dem Component Router

Angular 2 Tutorial für Einsteiger: Navigation mit dem Component Router

Manfred Steyer
logo-angular-300x200

© Shutterstock / gdaint

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. Daneben unterstützt er hierarchische Views und Lazy Loading. Wie das genau funktioniert, schauen wir uns in unserem Teil 3 des Angular Einsteiger-Tutorials an.

Dieses Angular 2 Tutorial beschäftigt sich mit dem Aufbau einer Single-Page-Anwendung mit Angular 2 und TypeScript. Der Single-Page-Ansatz erlaubt die Entwicklung von webbasierten Frontends, die auf sämtlichen klassischen und mobilen Plattformen laufen und durch den Einsatz von JavaScript einen hohen Grad an Benutzerfreundlichkeit bieten. Das Framework Angular 2 unterstützt das und ermöglicht das Erreichen einer hohen Codequalität mit bewährten Konzepten, wie Komponentenorientierung und Dependency Injection.

Das große Angular 2 Tutorial

Teil 1: Erste Schritte mit Angular 2 und TypeScript
Teil 2: Formulare und Validierung
Teil 3: Navigation mit dem Component Router

Navigation mit dem Component Router

Auch sogenannte Single-Page-Applikationen (SPA) müssen 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.

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. 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 [1].

Ü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

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. Der Router aktiviert die adressierte Komponente auch. Abbildung 2 veranschaulicht dies. Hier wurde an dem physischen URL /index.html der logische URL /flug-buchen/flug-suchen angehängt. Das veranlasst den Router zum Aktivieren der damit assoziierten FlugSuchenComponent. Welcher URL zum Aktivieren welcher Komponente führen soll, legt der Entwickler im Rahmen einer Routing-Konfiguration fest.

angular2-routing-overview-2

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 FlugSuchenComponent innerhalb von FlugBuchen aktivieren zu wollen.

Abb. 3: Komponente mit Child-Router

Abb. 3: Komponente mit Child-Router

Abb. 4: Hierarchisches Routing

Abb. 4: Hierarchisches Routing

Logische URLs einsetzen

Beim Einsatz von Routing stellt sich unter anderem die Frage, wie der Browser aber auch die SPA den physischen Teil des URLs vom logischen Teil unterscheiden können. Hierzu sind zwei Ansätze üblich. Der klassischere dieser beiden sieht die Platzierung des logischen URLs im Hash-Fragment vor. Das würde im hier betrachteten Beispiel so 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 ihm 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 auch wie herkömmliche URLs aus. Anstelle der Raute (#) kann somit als Trennzeichen zwischen dem physischen und logischen Teil ein einfacher Slash zum Einsatz kommen:

index.html#flug-buchen/flug-suchen

Da die SPA hier die Grenze zwischen physischem und logischem URL selbst verwaltet, liegt diese Information erst nach dem Laden der SPA vor. Das bedeutet, dass der Browser zunächst den gesamten URL beim Server anfragt. Somit muss der Server hier bei einer Anfrage des URLs index.html/flug-buchen/flug-suchen die SPA retournieren, die sich hinter index.html befindet. Dasselbe Verhalten hat der Server beim Anfordern anderer URLs, die mit index.html beginnen, an den Tag zu legen. Serverseitige Frameworks bieten dazu in der Regel einen eigenen Routing-Mechanismus. Alternativ dazu können entsprechende Regeln häufig auch im Web-Server direkt hinterlegt werden.

Unterstützung für serverseitiges Rendering
Da der Browser beim ersten Aufruf den gesamten URL an den Server sendet, erhält der Server auch die Möglichkeit, die erste Ansicht vorzurendern. Dies erhöht die Startgeschwindigkeit der SPA und gibt auch Benutzern, die JavaScript deaktiviert haben, die Möglichkeit einer zumindest grundlegenden Nutzung. Darüber hinaus unterstützt dies auch die Indizierung durch Suchmaschinen. Lösungen wie Universal Angular 2 [2] unterstützen diesen Ansatz.

Um die Funktionsweise des Routers zu veranschaulichen, beschreibt dieser Artikel eine Erweiterung aus dem letzten Teil. Diese bietet mithilfe des Routers drei Menüpunkte an: Home, Flug suchen und Passagier suchen (Abb. 5).

Abb. 5: Beispiel für Routing

Abb. 5: Beispiel für Routing

Der Platzhalter befindet sich in dieser Anwendung unterhalb des Menüs. Er erhält abhängig vom Anwendungszustand eine der folgenden Komponenten:

  • HomeComponent: Zeigt Begrüßung an
  • FlugSuchenComponent: Komponente aus dem ersten Teil dieser Serie
  • PassagierSuchenComponent: Dummy-Komponente zur Veranschaulichung
  • FlugEditComponent: Dient dem Editieren eines ausgewählten Fluges

Routing-Konfiguration einrichten

Damit der Router weiß, wann es welche Komponente zu aktivieren gilt, erhält er von der Anwendung eine Konfiguration über die Datei app.routes.ts bereitgestellt. Dabei handelt es sich um ein Array mit Routen, welche in erster Linie logische URLs auf Komponenten abbilden. Die logischen URLs werden dabei als Pfade bezeichnet (Listing 1).

// app.routes.ts
import { Routes, RouterModule } from '@angular/router';
[…]
export const ROUTE_CONFIG: Routes = [
{
        path: 'home',
        component: HomeComponent
    },
    {
    path: 'flug-suchen', 
        component: FlugSuchenComponent
    },
    {
        path: 'passagier-suchen',
        component: PassagierSuchenComponent
    }
];

Eine erweiterte Version der gezeigten Konfiguration findet sich im nächsten Listing. Sie legt unter anderem mit dem ersten Eintrag eine Standard-Route fest, welche sich mit redirectTo um eine Umleitung auf die Route home kümmert. Diese wird aktiviert, wenn kein logischer URL vorhanden ist, und erhält somit einen leeren Pfad (Listing 2).

export const ROUTE_CONFIG: Routes = [
{
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'flug-suchen', 
        component: FlugSuchenComponent
    },
    {
        path: 'passagier-suchen',
        component: PassagierSuchenComponent
    },
    { 
        path: '**',
        redirectTo: 'home'
    }
];

Normalerweise prüft der Router, ob ein konfigurierter Pfad ein Präfix des logischen URLs im Browser darstellt. Das ist unter anderem zur Berücksichtigung hierarchischer Routen wichtig. Genau dieses Verhalten ist jedoch bei Standardrouten mit einem leeren Pfad ein Problem, zumal ein Leerstring das Präfix jedes Strings ist. Deswegen setzt das hier betrachtete Beispiel die Eigenschaften pathMatch auf full. Das bewirkt, dass der logische URL mit dem Pfad voll und ganz übereinstimmen muss.

Daneben richtet die betrachtete Konfiguration am Ende mit dem Pfad ** eine Catch-All-Route ein. Diese kümmert sich um alle logischen URLs, die bis dahin zu keiner Route gepasst haben, und leitet den Benutzer ebenfalls auf home um.

Mit den Routen konfiguriert die Anwendung das RouterModul. Hierzu kommt die statische Methode forRoot zum Einsatz:

export const AppRoutesModule = RouterModule.forRoot(ROUTE_CONFIG);

Die Methode forRoot ist nur für Konfigurationen im Root-Modul. Für eventuelle weitere Module sieht die Klasse RouterModule die Methode forChild vor.

Root-Komponente einrichten

Für den Einsatz des Component Routers benötigt die Anwendung eine Komponente, welche die gesamte Anwendung repräsentiert und einen Platzhalter aufweist (Listing 3).

import {Component} from 'angular2/core';

@Component({
  selector: 'app',
  templateUrl: 'app/app.html'
})
export class App {
}

Das Template dieser Komponente findet sich in Listing 4. Es definiert mit router-outlet den Platzhalter, in dem der Router die jeweils aktive Komponente platziert. Die Direktive routerLink erzeugt einen Link, der zu einer der definierten Routen führt.



 

AppModule anpassen

Damit Angular die betrachtete Root-Component beim Bootstrapping erzeugt, ist sicherzustellen, dass sie im AppModule unter bootstrap eingetragen ist. Zur Bestückung ihres Platzhalters stützt sie sich auf das konfigurierte RouterModule, das oben beschrieben wurde und in diesem Beispiel den Namen AppRoutesModules trägt (Listing 5).

import {NgModule} from "@angular/core";
import {AppComponent} from "./app.component";
import {BrowserModule} from "@angular/platform-browser";
import {AppRoutesModule} from "./app.routes";
import {HttpModule} from "@angular/http";
import {FormsModule } from "@angular/forms";
import {PassagierSuchenComponent} from "./passagier-suchen/passagier.suchen.component";
import {FlugSuchenComponent} from "./flug-suchen/flug-suchen.component";
import {HomeComponent} from "./home/home.component";

@NgModule({
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        AppRoutesModule
    ],
    declarations: [
        AppComponent,
        HomeComponent,
        FlugSuchenComponent,
        PassagierSuchenComponent
    ],
    providers: [
        FlugService
],
    bootstrap: [
        AppComponent 
    ]
})
export class AppModule { 
}

Daneben listet das Beispiel sämtliche Komponenten der Anwendung im Modul unter declarations. Das ist unter anderem notwendig, damit der Template-Compiler die einzelnen Komponenten finden kann. Wie der nächste Abschnitt zeigt, könnte alternativ dazu das Modul diese Aufgabe auch anderen Modulen überlassen und diese importieren.

Die Startdatei index.html verweist nun auf die Root-Komponente und gibt mit einem Base-Element an, wo sich die Grenze zwischen physischer und logischer URL befindet (Listing 6).

  


  
    […]

  
  
    
    […]
  

Anwendungen, die das Base-Element nicht beeinflussen können, haben auch die Möglichkeit, diese Information an das Token APP_BASE_HREF über einen Provider zu binden. In diesem Fall müssen jedoch per Definition sämtliche Verweise in der Anwendung absolut sein (Listing 7).

import { APP_BASE_HREF } from '@angular/common';
[…]

@NgModule({
    […],
providers: [
        { provide: APP_BASE_HREF, useValue: "/"},
        FlugService
    ],
    bootstrap: [
        AppComponent 
    ]
})
export class AppModule { 
}

Strukturierung mit Modulen

Derzeit muss das AppModule als Root Module sämtliche Komponenten, die der Router verwendet, referenzieren. Bei größeren Anwendungen führt dies zu einem großen und unübersichtlichen Modul. Deswegen bietet es sich an, die Anwendung in mehrere Module aufzusplitten und diese in das Root Module zu importieren. Anwendungsteile, die gemeinsam einen Anwendungsfall oder eine Gruppe zusammengehöriger Anwendungsfälle implementieren, kommen in so genannte Feature Modules.

Für die hier betrachtete Lösung bietet sich ein Feature Module für das Buchen von Flügen an – vor allem dann, wenn man davon ausgeht, dass die Anwendung später noch um weitere Feature-Module ergänzt wird. Dieses FlugModule erhält seine eigenen Routen sowie sein eigenes darauf aufbauendes konfiguriertes RouterModule (Listing 8).

//flug.routes.ts
const FLUG_ROUTES: Routes = [{
    {
        path: 'flug-suchen',
    component: FlugSuchenComponent
    },
    {
        path: 'passagier-suchen',
        component: PassagierSuchenComponent
    }
}];

export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);

Hierbei gilt zu beachten, dass das FlugRouterModule mit der statischen Methode forChild einzurichten ist, da sie lediglich für ein Modul gilt. Das AppModule nutzt stattdessen als Root Module jedoch forRoot.

Das FlugModule importiert das konfigurierte FlugRouterModule aber auch das FormsModule und das CommonModule von Angular. Letzteres enthält unter anderem die Standard-Direktiven, die jederzeit zur Verfügung stehen. Beispiele dafür sind ngIf oder ngFor (Listing 9):

// flug.module.ts
@NgModule({
    imports: [
        CommonModule, 
        FormsModule, 
        FlugRouterModule
],
    declarations: [
        FlugSuchenComponent, 
        PassagierSuchenComponent, 
        FlugEditComponent
],
    providers: [
        FlugService
    ]
})
export class FlugModule {
}

Zusätzlich listet es unter declarations die benötigten Komponenten und mit providers registriert es den im ersten Teil dieser Serie eingeführten FlugService. Die Routen für das AppModule beschränken sich nun auf die HomeComponent sowie auf die besprochenen Standard-Routen (Listing 10).

// app.module.ts
export const ROUTE_CONFIG: Routes = [
 {
        path: '',
        redirectTo: 'home',
        pathMatch: 'full'
    },
    {
        path: 'home',
        component: HomeComponent
    },
    { 
        path: '**',
        redirectTo: 'home'
    }
];

Das AppModule deklariert nach dieser Änderung lediglich die AppComponent und die HomeComponent. Daneben importiert es nun auch die beiden geschaffenen Module, nämlich das FlugModule und das HomeModule (Listing 11).

// app.module.ts
@NgModule({
    declarations: [
        AppComponent,
        HomeComponent
    ],
    imports: [
        BrowserModule,
        HttpModule,
        FormsModule,
        AppRoutesModule,
        FlugModule
    ],
    providers: [
    ],
    bootstrap: [
        AppComponent 
    ]
})
export class AppModule { 
}

Hierarchisches Routing mit Child-Routes

Komponenten, die der Router im Platzhalter aktiviert, können einen weiteren Platzhalter aufweisen. Auf diese Weise lassen sich verschachtelte oder hierarchisch organisierte Views gestalten.

Um dies zu veranschaulichen, fasst dieser Abschnitt die Menüpunkte Flug suchen und Passagier suchen zu einem Menüpunkt Flug buchen zusammen. Dieser Verweist auf eine neue FlugBuchenComponent, die links ein Menü mit Flug suchen und Passagier suchen präsentiert und rechts davon einen Platzhalter aufweist (Abb. 6).

Abb. 6: Beispielanwendung, erweitert um hierarchisches Routing

Abb. 6: Beispielanwendung, erweitert um hierarchisches Routing

Abhängig vom auf der linken Seite ausgewählten Befehl, lädt die Anwendung die FlugSuchenComponent oder die PassagierSuchenComponent in den Platzhalter auf der rechten Seite.

Die Implementierung der FlugBuchenComponent gestaltet sich zunächst einfach:

@Component({
    template: './flug-buchen.component.html'
})
export class FlugBuchenComponent { }

Auch das Template der FlugBuchenComponent definiert einen Platzhalter mit router-outlet (Listing 12). Wie auch das Template der AppComponent richtet das hier betrachtete Template ein paar Links mittels routerLink ein.



 

Dem Router teilt das FlugModule die gewünschte Hierarchie mit ihrer Routenkonfiguration mit. Hierzu richtet es eine Route für die FlugBuchenComponent ein und spendiert diese über die Auflistung children untergeordnete Routen, welche auf die FlugSuchenComponent und PassagierSuchenComponent verweisen:

import {FlugEditGuard} from "./flug-edit/flug-edit.guard";
import {FlugEditComponent} from "./flug-edit/flug-edit.component";
import {PassagierSuchenComponent} from "./passagier-suchen/passagier.suchen.component";
import {FlugSuchenComponent} from "./flug-suchen/flug-suchen.component";
import {FlugBuchenComponent} from "./flug-buchen/flug-buchen.component";
import {RouterModule, Routes } from '@angular/router';

const FLUG_ROUTES: Routes = [{
    path: 'flug-buchen',
    component: FlugBuchenComponent,
    children: [
        {
            path: 'flug-suchen', 
            component: FlugSuchenComponent
        },
        {
            path: 'passagier-suchen',
            component: PassagierSuchenComponent
        }
    ]
}];

export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);

Diese untergeordneten Routen nennen sich auch Child-Routes. Ihre Pfade gelten als Erweiterung der Pfade der übergeordneten Parent-Route. Ein Aufruf des URLs flug-buchen/flug-suchen führt beispielsweise dazu, dass der Router die FlugBuchenComponente im Platzhalter der Anwendung aktiviert sowie die FlugSuchenComponent im Platzhalter der FlugBuchenComponent. Nach dieser Änderung gilt es noch das Hauptmenü in der AppComponent anzupassen (Listing 14).



 

Während der Menüpunkt Home direkt auf die HomeComponent verweist, leitet der Menüpunkt Flug Buchen den Benutzer auf den ersten Unterpunkt der FlugBuchenComponent, nämlich Flug suchen.

Parametrisierte Routen

Um das Editieren eines Fluges zu erlauben, erhält die hier betrachtete Demo-Anwendung eine weitere Route, welche auf eine FlugEditComponent verweist (Listing 15).

cconst FLUG_ROUTES: Routes = [{
    path: 'flug-buchen',
    component: FlugBuchenComponent,
    children: [
        {
            path: 'flug-suchen',
            component: FlugSuchenComponent
        },
        […]
        {
            path: 'flug-edit/:id',
            component: FlugEditComponent
        }
    ]
}];

export const FlugRouterModule = RouterModule.forChild(FLUG_ROUTES);

Beim Betrachten dieser Route fällt der mit einem Doppelpunkt eingeleitete Wert :id auf. Dabei handelt es sich um einen Platzhalter, der zur Laufzeit vom Aufrufer einen konkreten Wert erhält. Diesen Wert kann die Komponente über eine Instanz von ActivatedRoute auslesen , der via Dependency Injection zu beziehen ist (Listing 16).

import { ActivatedRoute } from '@angular/router';
import { Observable, Observer } from 'rxjs';

@Component({
    templateUrl: 'app/flug/flug-edit/flug-edit.component.html'
})
export class FlugEditComponent {

    public id: string;

    constructor(route: ActivatedRoute) {
        route.params.subscribe( (p) => {
            this.id = p['id'];
        });
    }
[…]
}

Diese ActivatedRoute bietet über ihre Eigenschaft params ein Observable an, das über Parameter und Änderungen daran informiert.

Zum Erzeugen eines Links für eine Route mit Platzhalter nutzt die Anwendung abermals routerLink. Das übergebene Array (Tupel) erhält dazu den Pfad der gewünschten Route sowie Werte für die Parameter:

Editieren

Zusätzlich nimmt routerLink ein optionales Parameter-Objekt entgegen. Dessen Eigenschaften hängt es in Form von Matrix-Parameter an das aktuelle Url-Segment an. Die Nutzung von

Editieren

führt somit zu folgenden Link, wenn man für flug.id den Wert 17 annimmt:

flug-buchen/flug-edit/17;showDetails=true;showAll=true

Matrixparameter

Der Router verwendet für benannte Parameter standardmäßig Matrixparameter, die einen Strichpunkt als Trennzeichen verwenden:

flug-buchen/flug-edit/17;showDetails=true;showAll=true

Im Gegensatz zum besser bekannten Query-String, der ein Fragezeichen verwendet, bezieht sich ein Matrixparameter immer auf das aktuelle URL-Segment. Somit kann der Router solche Parameter ganz klar einem Segment und somit auch einer Komponente zuordnen. Das nachfolgende Beispiel macht auf diese Weise klar, dass sich orderBy auf das Segment passagiere und die beiden anderen Parameter auf flug-edit/17 bezieht:

flug-buchen/flug-edit/17;showDetails=true;showAll=true/passagiere;orderBy=Name

Lazy Loading von Routen

Prinzipiell unterstützt der Component Router auch das verzögerte Laden von Modulen. Das bedeutet, dass er einzelne Module erst bei Bedarf und nicht bereits beim Start der Anwendung lädt. Dies soll die Startzeit der Anwendung verbessern. Um Lazy Loading zu nutzen, kommen Routen mit der Eigenschaft loadChildren zum Einsatz. Listing 17 demonstriert dies anhand der Routen für das AppModule:

// app.module.ts
export const ROUTE_CONFIG: Routes = [
    {
        path: 'home',
        component: HomeComponent
    },
    {
        path: 'flug-buchen',
        loadChildren: () => System.import('./modules/flug/flug.module')
                                  .then(m => m.FlugModule)
    }
]

Im betrachteten Fall verweist loadChildren auf eine Funktion, die bei Bedarf das FlugModul nachlädt. Damit das funktioniert, ist darauf zu achten, dass kein anderer Teil des AppModules auf das FlugModul direkt zugreift. Wäre dies der Fall, würde Angular das FlugModul schon beim Start der Anwendung laden. Beim Einsatz von Bundling ist auch darauf zu achten, dass das FlugModule mit seinen Abhängigkeiten in einem Bundle landet. Informationen dazu finden sich unter anderem unter [3].

Fazit

Während die offizielle Routing-Implementierung für AngularJS 1.x nur für einfache Anwendungsfälle geeignet war, geht der neue Component Router für Angular 2 weit darüber hinaus. Er bietet unter anderem hierarchische Views mit Child-Routes und ist die Basis für Lazy Loading. Gerade letzteres ist bei größeren Anwendungen zur Steigerung der Startgeschwindigkeit wichtig und eine Neuerung, die ohne Umwege mit AngularJS 1.x gar nicht möglich war.

Die Möglichkeiten des Routers gehen jedoch weit über das hinaus, was im vorliegenden Artikel beschrieben werden kann. Beispielsweise erlaubt er dank so genannter Auxiliary-Routes die Co-Existenz mehrerer Platzhalter, welche die Anwendung unabhängig voneinander mit Komponenten bestücken kann. Daneben kann er die Anwendung über Ereignisse über seine Aktivitäten informieren. Über Services, die sich Guards nennen, kann eine SPA auch in das Routing eingreifen und so beispielsweise das Aktivieren bzw. Deaktivieren einer Route verhindern.

Geschrieben von
Manfred Steyer
Manfred Steyer
Manfred Steyer ist selbstständiger Trainer und Berater mit Fokus auf Angular 2. In seinem aktuellen Buch "AngularJS: Moderne Webanwendungen und Single Page Applications mit JavaScript" behandelt er die vielen Seiten des populären JavaScript-Frameworks aus der Feder von Google. Web: www.softwarearchitekt.at
Kommentare

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.