Eine vollständige Anleitung zum Routing in Angular

Falls Sie mit Angular 7 noch nicht ganz vertraut sind, möchte ich Ihnen alles näher bringen, was dieses beeindruckende Frontend-Framework zu bieten hat. Ich führe Sie durch eine Angular-Demo-App, die verschiedene Konzepte im Zusammenhang mit dem Router zeigt, wie zum Beispiel:

• Die Router-Steckdose,
• Routen und Pfade,
• Navigation.

Ich zeige Ihnen auch, wie Sie Angular CLI v7 verwenden, um ein Demoprojekt zu generieren, in dem wir den Angular-Router verwenden, um Routing und Navigation zu implementieren. Aber erlauben Sie mir zunächst, Ihnen Angular vorzustellen und einige der wichtigen neuen Funktionen in der neuesten Version zu erläutern.

Einführung in Angular 7

Angular ist eines der beliebtesten Front-End-Frameworks zum Erstellen clientseitiger Webanwendungen für das mobile und Desktop-Web. Es folgt einer komponentenbasierten Architektur, bei der jede Komponente ein isoliertes und wiederverwendbares Stück Code ist, das einen Teil der Benutzeroberfläche der App steuert.

Eine Komponente in Angular ist eine TypeScript-Klasse, die mit dem @Component Dekorator dekoriert ist. Es hat eine angehängte Vorlage und CSS-Stylesheets, die die Ansicht der Komponente bilden.

Angular 7, die neueste Version von Angular, wurde kürzlich mit neuen Funktionen veröffentlicht, insbesondere in Bezug auf CLI-Tools und -Leistung, wie zum Beispiel:

• CLI-Eingabeaufforderungen: Ein gängiger Befehl wie ng add und ng new kann den Benutzer jetzt auffordern, die Funktionalitäten auszuwählen, die einem Projekt hinzugefügt werden sollen, z. B. Routing- und Stylesheet-Format usw.
  
• Hinzufügen von Scrollen zu Angular Material CDK (Component DevKit).
• Hinzufügen von Drag-and-Drop-Unterstützung zu Angular Material CDK.
• Projekte verwenden standardmäßig auch Budgetpakete, die Entwickler warnen, wenn ihre Apps Größenbeschränkungen überschreiten. Standardmäßig werden Warnungen ausgegeben, wenn die Größe mehr als 2 MB beträgt, und Fehler bei 5 MB. Sie können diese Grenzwerte auch in Ihrer angular.json -Datei ändern. usw.
  

Einführung in den Angular-Router

Angular Router ist ein leistungsstarker JavaScript-Router, der vom Angular-Kernteam entwickelt und gepflegt wird und aus dem Paket @angular/router installiert werden kann. Es bietet eine vollständige Routing-Bibliothek mit der Möglichkeit, mehrere Router-Ausgänge, verschiedene Pfadanpassungsstrategien, einfachen Zugriff auf Routenparameter und Routenwächter zum Schutz von Komponenten vor unbefugtem Zugriff zu haben.

Der Angular-Router ist ein zentraler Bestandteil der Angular-Plattform. Es ermöglicht Entwicklern, Einzelseitenanwendungen mit mehreren Ansichten zu erstellen und die Navigation zwischen diesen Ansichten zu ermöglichen.

Sehen wir uns nun die wesentlichen Router-Konzepte genauer an.

Das Router-Outlet

Das Router-Outlet ist eine Anweisung, die in der Router-Bibliothek verfügbar ist, wo der Router die Komponente einfügt, die basierend auf der URL des aktuellen Browsers abgeglichen wird. Sie können Ihrer Angular-Anwendung mehrere Outlets hinzufügen, wodurch Sie erweiterte Routing-Szenarien implementieren können.

 <router-outlet></router-outlet>

Jede Komponente, die vom Router abgeglichen wird, rendert sie als Geschwister des Router-Ausgangs.

Routen und Pfade

Routen sind Definitionen (Objekte), die mindestens aus einem Pfad und einem Komponentenattribut (oder einem Umleitungspfad) bestehen. Der Pfad bezieht sich auf den Teil der URL, der eine eindeutige Ansicht bestimmt, die angezeigt werden soll, und die Komponente bezieht sich auf die Angular-Komponente, die mit einem Pfad verknüpft werden muss. Basierend auf einer von uns bereitgestellten Routendefinition (über eine statische RouterModule.forRoot(routes) -Methode) ist der Router in der Lage, den Benutzer zu einer bestimmten Ansicht zu navigieren.

Jede Route ordnet einer Komponente einen URL- path zu.

Der Pfad kann leer sein, was den Standardpfad einer Anwendung angibt, und ist normalerweise der Start der Anwendung.

Der Pfad kann eine Platzhalterzeichenfolge ( ** ) annehmen. Der Router wählt diese Route aus, wenn die angeforderte URL mit keinem Pfad für die definierten Routen übereinstimmt. Dies kann verwendet werden, um eine „Nicht gefunden“-Ansicht anzuzeigen oder zu einer bestimmten Ansicht umzuleiten, wenn keine Übereinstimmung gefunden wird.

Dies ist ein Beispiel für eine Route:

 { path: 'contacts', component: ContactListComponent}

Wenn diese Routendefinition der Routerkonfiguration bereitgestellt wird, rendert der Router ContactListComponent , wenn die Browser-URL für die Webanwendung zu /contacts wird.

Routenanpassungsstrategien

Der Angular Router bietet verschiedene Routen-Matching-Strategien. Die Standardstrategie prüft einfach, ob der URL des aktuellen Browsers der Pfad vorangestellt ist.

Zum Beispiel unsere bisherige Route:

 { path: 'contacts', component: ContactListComponent}

Könnte auch geschrieben werden als:

 { path: 'contacts',pathMatch: 'prefix', component: ContactListComponent}

Das patchMath Attribut gibt die Matching-Strategie an. In diesem Fall ist es das Präfix , das die Standardeinstellung ist.

Die zweite Matching-Strategie ist full . Wenn es für eine Route angegeben wird, prüft der Router, ob der Pfad genau mit dem Pfad der URL des aktuellen Browsers übereinstimmt :

 { path: 'contacts',pathMatch: 'full', component: ContactListComponent}

Routenparameter

Das Erstellen von Routen mit Parametern ist eine gängige Funktion in Web-Apps. Mit Angular Router können Sie auf verschiedene Arten auf Parameter zugreifen:

• Mit dem ActivatedRoute-Dienst,
• Unter Verwendung des ab v4 verfügbaren ParamMap Observable.

Sie können einen Routenparameter mit der Doppelpunktsyntax erstellen. Dies ist eine Beispielroute mit einem ID -Parameter:

 { path: 'contacts/:id', component: ContactDetailComponent}

Streckenwächter

Ein Route Guard ist eine Funktion des Angular Routers, die es Entwicklern ermöglicht, eine Logik auszuführen, wenn eine Route angefordert wird, und basierend auf dieser Logik dem Benutzer den Zugriff auf die Route zu erlauben oder zu verweigern. Es wird häufig verwendet, um zu überprüfen, ob ein Benutzer angemeldet ist und die Berechtigung hat, bevor er auf eine Seite zugreifen kann.

Sie können einen Routenwächter hinzufügen, indem Sie die im @angular/router -Paket verfügbare Schnittstelle CanActivate implementieren und die Methode canActivate() erweitern, die die Logik zum Zulassen oder Verweigern des Zugriffs auf die Route enthält. Der folgende Wächter erlaubt beispielsweise immer den Zugang zu einer Route:

 class MyGuard implements CanActivate { canActivate() { return true; } }

Sie können dann eine Route mit dem Wächter schützen, indem Sie das Attribut canActivate :

 { path: 'contacts/:id, canActivate:[MyGuard], component: ContactDetailComponent}

Schifffahrtsrichtlinie

Der Angular Router stellt die routerLink Direktive bereit, um Navigationslinks zu erstellen. Diese Direktive nimmt den Pfad, der der Komponente zugeordnet ist, zu der navigiert werden soll. Zum Beispiel:

 <a [routerLink]="'/contacts'">Contacts</a>

Mehrere Verkaufsstellen und Hilfsrouten

Angular Router unterstützt mehrere Outlets in derselben Anwendung.

Eine Komponente hat eine zugeordnete primäre Route und kann Hilfsrouten haben. Hilfsrouten ermöglichen es Entwicklern, mehrere Routen gleichzeitig zu navigieren.

Um eine Hilfsroute zu erstellen, benötigen Sie einen benannten Router-Ausgang, an dem die mit der Hilfsroute verknüpfte Komponente angezeigt wird.

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

• Die Steckdose ohne Namen ist die primäre Steckdose.
• Alle Ausgänge außer dem primären Ausgang sollten einen Namen haben.

Anschließend können Sie mit dem Outlet-Attribut den Ausgang angeben, an dem Sie Ihre Komponente rendern möchten:

 { path: "contacts", component: ContactListComponent, outlet: "outlet1" }

Erstellen eines Angular 7-Demoprojekts

In diesem Abschnitt sehen wir ein praktisches Beispiel für die Einrichtung und Arbeit mit dem Angular Router. Sie können die Live-Demo sehen, die wir erstellen, und das GitHub-Repository für das Projekt.

Installation von Angular CLI v7

Angular CLI erfordert Node 8.9+ mit NPM 5.5.1+ . Sie müssen sicherstellen, dass diese Anforderungen auf Ihrem System installiert sind, und dann den folgenden Befehl ausführen, um die neueste Version von Angular CLI zu installieren:

 $ npm install -g @angular/cli

Dadurch wird die Angular-CLI global installiert.

Hinweis : Abhängig von Ihrer npm-Konfiguration möchten Sie möglicherweise sudo verwenden, um Pakete global zu installieren.

Erstellen eines Angular 7-Projekts

Das Erstellen eines neuen Projekts ist nur einen Befehl entfernt, Sie müssen lediglich den folgenden Befehl ausführen:

 $ ng new angular7-router-demo

Die CLI fragt Sie, ob Sie Routing hinzufügen möchten (geben Sie N für Nein ein, da wir sehen werden, wie wir Routing manuell hinzufügen können) und welches Stylesheet-Format Sie verwenden möchten. Wählen Sie CSS, die erste Option, und drücken Sie dann die Enter . Die CLI erstellt eine Ordnerstruktur mit den erforderlichen Dateien und installiert die erforderlichen Abhängigkeiten des Projekts.

Erstellen eines gefälschten Back-End-Dienstes

Da wir kein echtes Back-End haben, mit dem wir interagieren können, erstellen wir ein gefälschtes Back-End mit der Angular angular-in-memory-web-api Bibliothek, die eine In-Memory-Web-API für Angular-Demos ist, und testen diese emuliert CRUD-Operationen über eine REST-API.

Es funktioniert, indem es die an den Remote-Server gesendeten HttpClient -Anforderungen abfängt und sie an einen lokalen In-Memory-Datenspeicher umleitet, den wir erstellen müssen.

Um ein gefälschtes Backend zu erstellen, müssen wir die nächsten Schritte ausführen:

1. Zuerst installieren wir das Modul angular-in-memory-web-api ,
2. Als nächstes erstellen wir einen Dienst, der gefälschte Daten zurückgibt,
3. Konfigurieren Sie schließlich die Anwendung so, dass sie das gefälschte Back-End verwendet.

Führen Sie in Ihrem Terminal den folgenden Befehl aus, um das Modul angle angular-in-memory-web-api von npm zu installieren:

 $ npm install --save angular-in-memory-web-api

Generieren Sie als Nächstes einen Back-End-Dienst mit:

 $ ng gs backend

Öffnen Sie die Datei src/app/backend.service.ts und importieren InMemoryDbService aus dem Modul angle angular-in-memory-web-api :

 import {InMemoryDbService} from 'angular-in-memory-web-api'

Die Dienstklasse muss InMemoryDbService implementieren und dann die Methode createDb() überschreiben:

 @Injectable({ providedIn: 'root' }) export class BackendService implements InMemoryDbService{ constructor() { } createDb(){ let contacts = [ { id: 1, name: 'Contact 1', email: '[email protected]' }, { id: 2, name: 'Contact 2', email: '[email protected]' }, { id: 3, name: 'Contact 3', email: '[email protected]' }, { id: 4, name: 'Contact 4', email: '[email protected]' } ]; return {contacts}; } }

Wir erstellen einfach eine Reihe von Kontakten und senden sie zurück. Jeder Kontakt sollte eine ID haben.

Schließlich müssen wir einfach InMemoryWebApiModule in die Datei app.module.ts importieren und unseren gefälschten Back-End-Dienst bereitstellen.

 import { InMemoryWebApiModule } from “angular-in-memory-web-api”; import { BackendService } from “./backend.service”; /* ... */ @NgModule({ declarations: [ /*...*/ ], imports: [ /*...*/ InMemoryWebApiModule.forRoot(BackendService) ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Erstellen Sie als Nächstes einen ContactService , der den Code für die Arbeit mit Kontakten kapselt:

 $ ng gs contact

Öffnen Sie die Datei src/app/contact.service.ts und aktualisieren Sie sie so, dass sie dem folgenden Code ähnelt:

 import { Injectable } from '@angular/core'; import { HttpClient } from “@angular/common/http”; @Injectable({ providedIn: 'root' }) export class ContactService { API_URL: string = "/api/"; constructor(private http: HttpClient) { } getContacts(){ return this.http.get(this.API_URL + 'contacts') } getContact(contactId){ return this.http.get(`${this.API_URL + 'contacts'}/${contactId}`) } }

Wir haben zwei Methoden hinzugefügt:

• getContacts()
  Um alle Kontakte zu erhalten.
• getContact()
  Um einen Kontakt nach ID zu erhalten.

Sie können die API_URL auf eine beliebige URL setzen, da wir kein echtes Back-End verwenden werden. Alle Anfragen werden abgefangen und an das In-Memory-Back-End gesendet.

Erstellen unserer eckigen Komponenten

Bevor wir sehen können, wie die verschiedenen Router-Funktionen verwendet werden, erstellen wir zunächst eine Reihe von Komponenten in unserem Projekt.

Gehen Sie zu Ihrem Terminal und führen Sie die folgenden Befehle aus:

 $ ng gc contact-list $ ng gc contact-detail

Dadurch werden zwei ContactListComponent und ContactDetailComponent -Komponenten generiert und dem Haupt-App-Modul hinzugefügt.

Routing einrichten

In den meisten Fällen verwenden Sie die Angular-CLI, um Projekte mit Routing-Setup zu erstellen, aber in diesem Fall fügen wir es manuell hinzu, damit wir eine bessere Vorstellung davon bekommen, wie das Routing in Angular funktioniert.

Hinzufügen des Routing-Moduls

Wir müssen AppRoutingModule hinzufügen, das unsere Anwendungsrouten und einen Router-Ausgang enthält, in den Angular die aktuell übereinstimmende Komponente abhängig von der aktuellen URL des Browsers einfügt.

Wir werden sehen:

• So erstellen Sie ein Angular-Modul für das Routing und importieren es;
• Wie man Routen zu verschiedenen Komponenten hinzufügt;
• So fügen Sie die Router-Steckdose hinzu.

Beginnen wir zunächst mit der Erstellung eines Routingmoduls in einer app-routing.module.ts Datei. Erstellen Sie in der src/app die Datei mit:

 $ cd angular7-router-demo/src/app $ touch app-routing.module.ts

Öffnen Sie die Datei und fügen Sie den folgenden Code hinzu:

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; const routes: Routes = []; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Wir beginnen mit dem Importieren des NgModule aus dem @angular/core -Paket, das ein TypeScript-Dekorator ist, der zum Erstellen eines Angular-Moduls verwendet wird.

Wir importieren auch die Klassen RouterModule und Routes aus dem Paket @angular/router . RouterModule bietet statische Methoden wie RouterModule.forRoot() zum Übergeben eines Konfigurationsobjekts an den Router.

Als nächstes definieren wir ein konstantes routes -Array vom Typ Routes , das verwendet wird, um Informationen für jede Route zu speichern.

Schließlich erstellen und exportieren wir ein Modul namens AppRoutingModule (Sie können es nennen, wie Sie wollen), das einfach eine TypeScript-Klasse ist, die mit dem @NgModule Dekorator dekoriert ist, der ein Metainformationsobjekt verwendet. Im Attribut imports dieses Objekts rufen wir die statische Methode RouterModule.forRoot(routes) mit dem Array „routes“ als Parameter auf. Im exports -Array fügen wir das RouterModule .

Importieren des Routing-Moduls

Als nächstes müssen wir dieses Modul-Routing in das Haupt-App-Modul importieren, das sich in der Datei src/app/app.module.ts :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { AppComponent } from './app.component'; @NgModule({ declarations: [ AppComponent ], imports: [ BrowserModule, AppRoutingModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Wir importieren das AppRoutingModule aus ./app-routing.module und fügen es dem imports -Array des Hauptmoduls hinzu.

Hinzufügen des Router-Ausgangs

Schließlich müssen wir die Router-Steckdose hinzufügen. Öffnen Sie die Datei src/app/app.component.html , die die Haupt-App-Vorlage enthält, und fügen Sie die Komponente <router-outlet> hinzu:

 <router-outlet></router-outlet>

Hier rendert der Angular Router die Komponente, die dem Pfad des aktuellen Browsers entspricht.

Das sind alle Schritte, die wir befolgen müssen, um das Routing innerhalb eines Angular-Projekts manuell einzurichten.

Routen erstellen

Lassen Sie uns nun Routen zu unseren beiden Komponenten hinzufügen. Öffnen Sie die Datei src/app/app-routing.module.ts und fügen Sie die folgenden Routen zum routes -Array hinzu:

 const routes: Routes = [ {path: 'contacts' , component: ContactListComponent}, {path: 'contact/:id' , component: ContactDetailComponent} ];

Stellen Sie sicher, dass Sie die beiden Komponenten in das Routing-Modul importieren:

 import { ContactListComponent } from './contact-list/contact-list.component'; import { ContactDetailComponent } from './contact-detail/contact-detail.component';

Jetzt können wir über die Pfade /contacts und contact/:id auf die beiden Komponenten zugreifen.

Navigationslinks hinzufügen

Als Nächstes fügen wir unserer App-Vorlage mithilfe der routerLink Direktive Navigationslinks hinzu. Öffnen src/app/app.component.html und fügen Sie den folgenden Code über dem Router-Outlet hinzu:

 <h2><a [routerLink] = "'/contacts'">Contacts</a></h2>

Als nächstes müssen wir die Liste der Kontakte in ContactListComponent . Öffnen src/app/contact-list.component.ts und fügen Sie dann den folgenden Code hinzu:

 import { Component, OnInit } from '@angular/core'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css'] }) export class ContactListComponent implements OnInit { contacts: any[] = []; constructor(private contactService: ContactService) { } ngOnInit() { this.contactService.getContacts().subscribe((data : any[])=>{ console.log(data); this.contacts = data; }) } }

Wir erstellen ein contacts -Array, um die Kontakte zu speichern. Als Nächstes fügen wir ContactService und rufen die getContacts() Methode der Instanz (auf dem ngOnInit -Lebenszyklusereignis) auf, um Kontakte abzurufen und sie dem contacts zuzuweisen.

Öffnen Sie als Nächstes die Datei src/app/contact-list/contact-list.component.html und fügen Sie Folgendes hinzu:

 <table> <tr> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> <tr *ngFor="let contact of contacts" > <td>{{ contact.name }}</td> <td>{{ contact.email }}</td> <td> <a [routerLink]="['/contact', contact.id]">Go to details</a> </td> </tr> </table>

Wir durchlaufen die Kontakte und zeigen den Namen und die E-Mail-Adresse jedes Kontakts an. Außerdem erstellen wir mithilfe der routerLink Direktive einen Link zur Detailkomponente jedes Kontakts.

Dies ist ein Screenshot der Komponente:

Wenn wir auf den Link Gehe zu Details klicken, gelangen wir zu ContactDetailsComponent . Die Route hat einen id -Parameter, mal sehen, wie wir von unserer Komponente aus darauf zugreifen können.

Öffnen Sie die Datei src/app/contact-detail/contact-detail.component.ts und ändern Sie den Code so, dass er dem folgenden Code ähnelt:

 import { Component, OnInit } from '@angular/core'; import { ActivatedRoute } from '@angular/router'; import { ContactService } from '../contact.service'; @Component({ selector: 'app-contact-detail', templateUrl: './contact-detail.component.html', styleUrls: ['./contact-detail.component.css'] }) export class ContactDetailComponent implements OnInit { contact: any; constructor(private contactService: ContactService, private route: ActivatedRoute) { } ngOnInit() { this.route.paramMap.subscribe(params => { console.log(params.get('id')) this.contactService.getContact(params.get('id')).subscribe(c =>{ console.log(c); this.contact = c; }) }); } }

Wir injizieren ContactService und ActivatedRoute in die Komponente. Im ngOnInit() wir den id -Parameter ab, der von der Route übergeben wird, und verwenden ihn, um die Kontaktdetails abzurufen, die wir einem contact zuweisen.

Öffnen Sie die Datei src/app/contact-detail/contact-detail.component.html und fügen Sie Folgendes hinzu:

 <h1> Contact # {{contact.id}}</h1> <p> Name: {{contact.name}} </p> <p> Email: {{contact.email}} </p> 

Wenn wir unsere Anwendung zum ersten Mal von 127.0.0.1:4200/ aus aufrufen, rendert das Outlet keine Komponente, also leiten wir den leeren Pfad zum contacts um, indem wir die folgende Route zum Routen-Array hinzufügen:

 {path: '', pathMatch: 'full', redirectTo: 'contacts'}

Wir wollen den genauen leeren Pfad abgleichen, deshalb spezifizieren wir die vollständige Übereinstimmungsstrategie.

Fazit

In diesem Tutorial haben wir gesehen, wie Sie den Angular Router verwenden, um Routing und Navigation in unsere Anwendung einzufügen. Wir haben verschiedene Konzepte wie den Router-Ausgang, Routen und Pfade gesehen und eine Demo erstellt, um die verschiedenen Konzepte praktisch zu zeigen. Sie können von diesem Repository aus auf den Code zugreifen.