Der ultimative Leitfaden zur Beherrschung von Angular Routing

Angular Routing ist eine leistungsstarke Funktion, die es Entwicklern ermöglicht, leistungsstarke und dynamische Single-Page-Anwendungen zu erstellen. Es ist ein entscheidender Teil jeder Angular-Anwendung, und es zu meistern kann eine gewaltige Aufgabe sein.

Mit dem richtigen Ansatz muss das aber nicht sein. In diesem Leitfaden erfahren Sie, wie Sie Angular-Routing beherrschen. Wir werden uns ansehen, wie man Routen einrichtet, wie man Routenparameter verwendet und wie man mit Lazy Loading arbeitet. Wir besprechen auch, wie Sie Ihre Routen absichern und wie Sie mit Fehlern umgehen. Am Ende dieses Leitfadens werden Sie auf dem besten Weg sein, ein Routing-Meister zu werden.

Einrichten von Routes

Der erste Schritt, um das Angular-Routing zu beherrschen, ist das Einrichten der Routen. Dazu müssen Sie eine Routenkonfigurationsdatei erstellen und sie beim Angular-Router registrieren.

Um zu beginnen, erstellen Sie eine neue Datei namens app-routing.module.ts im Ordner src/app. Diese Datei wird die gesamte Routing-Konfiguration enthalten.

importiere { NgModule } von '@angular/core';
importiere { RouterModule, Routes } von '@angular/router';

const routes: Routes = [
  // Fügen Sie hier Ihre Routen hinzu
];

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

Als nächstes müssen Sie Ihre Routen zum Array routes hinzufügen. Jede Route sollte eine Path und eine Component Eigenschaft haben. Die Eigenschaft "Path" ist die URL, auf die die Route reagieren soll, und die Eigenschaft "Component" ist die Komponente, die gerendert werden soll, wenn auf die Route zugegriffen wird.

``Typescript const routes: Routes = [ { path: '', component: HomeComponent }, { path: 'about', component: AboutComponent }, { path: 'contact', component: ContactComponent } ];


Sobald Sie Ihre Routen hinzugefügt haben, müssen Sie Ihr `AppRoutingModule` mit dem Angular Router registrieren. Um dies zu tun, öffnen Sie die Datei "app.module.ts" und fügen Sie das "AppRoutingModule" zum Array "Importe" hinzu:

```typescript
@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Nun, da Ihre Routen eingerichtet sind, können Sie mit dem nächsten Schritt fortfahren.

Verwendung von Routenparametern

Mit Routenparametern können Sie Daten aus der URL an Ihre Komponenten übergeben. Dies ist nützlich für Situationen, in denen Sie auf ein bestimmtes Datenelement aus der URL zugreifen müssen.

Um Route-Parameter zu verwenden, müssen Sie Ihrer Routenkonfiguration eine Eigenschaft "path" hinzufügen. Diese Eigenschaft sollte einen Platzhalter für den Parameter enthalten.

``Typescript const routes: Routes = [ { path: 'user/:userId', component: UserComponent }, ];


Der Platzhalter sollte einen eindeutigen Namen haben. In diesem Fall verwenden wir `userId`.

Wenn Sie nun zur Route `/user/123` navigieren, wird die Komponente `UserComponent` gerendert und der Parameter `userId` wird an die Komponente übergeben. Um auf den Parameter zuzugreifen, können Sie den Dienst `ActivatedRoute` verwenden.

``Typescript
constructor(private route: ActivatedRoute) { }

ngOnInit() {
  this.route.paramMap.subscribe(params => {
    const userId = params.get('userId');
    // Etwas mit der userId machen
  });
}

Lazy Loading

Lazy Loading ist eine leistungsstarke Funktion, mit der Sie Ihre Anwendung in kleinere, besser zu verwaltende Teile aufteilen können. Dies kann die Leistung Ihrer Anwendung verbessern, da nur die notwendigen Teile geladen werden, wenn sie benötigt werden.

Um Lazy Loading zu nutzen, müssen Sie für jede Komponente, die nicht geladen wird, ein eigenes Routing-Modul erstellen. Wenn Sie zum Beispiel eine "UserComponent" haben, die Sie nachladen möchten, erstellen Sie eine Datei "user-routing.module.ts" mit dem folgenden Inhalt:

importiere { NgModule } von '@angular/core';
importiere { Routes, RouterModule } von '@angular/router';

importiere { UserComponent } von './user.component';

const routes: Routes = [
  { path: '', component: UserComponent }
];

@NgModule({
  imports: [RouterModule.forChild(routes)],
  exports: [RouterModule]
})
export Klasse UserRoutingModule {}

Als nächstes müssen Sie das Modul beim Angular-Router registrieren. Dazu öffnen Sie die Datei "app-routing.module.ts" und fügen der Route die Eigenschaft "loadChildren" hinzu.

`Typescript const routes: Routes = [ { path: 'user', loadChildren: () => import('./user/user.module').then(m => m.UserModule) } ];


Wenn nun auf die Route `/user` zugegriffen wird, wird das `UserModule` nach und nach geladen.

## Absicherung von Routen

Die Absicherung von Routen ist ein wichtiger Teil jeder Anwendung. Glücklicherweise macht Angular es einfach, Ihre Routen mit Hilfe von Route Guards zu sichern.

Route Guards sind Dienste, mit denen Sie den Zugriff auf bestimmte Routen kontrollieren können. Sie können zum Beispiel einen Guard erstellen, der nur authentifizierten Benutzern den Zugriff auf bestimmte Routen erlaubt. Um einen Route Guard zu erstellen, müssen Sie einen neuen Dienst erstellen und die Schnittstelle "CanActivate" implementieren.

```Typescript
importiere { Injectable } von '@angular/core';
import { CanActivate, ActivatedRouteSnapshot, RouterStateSnapshot, UrlTree } from '@angular/router';
importiere { Observable } von 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class AuthGuard implements CanActivate {
  canActivate(
    next: ActivatedRouteSnapshot,
    state: RouterStateSnapshot): Observable<boolean | UrlTree> | Promise<boolean | UrlTree> | boolean | UrlTree {
    // Ihre Autorisierungslogik hier
    return true;
  }

}

Sobald Sie Ihre Wache erstellt haben, müssen Sie sie beim Angular-Router registrieren. Öffnen Sie dazu die Datei "app-routing.module.ts" und fügen Sie der Route die Eigenschaft "canActivate" hinzu.

`Typescript const routes: Routes = [ { path: 'user', component: UserComponent, canActivate: [AuthGuard] } ];


Jetzt wird der `AuthGuard` aufgerufen, bevor die `UserComponent` gerendert wird.

## Behandlung von Fehlern

Schließlich ist es wichtig, Fehler zu behandeln, die in Ihrer Anwendung auftreten können. Angular macht dies einfach mit dem `ErrorHandler` Dienst. Um den `ErrorHandler` Dienst zu verwenden, müssen Sie einen neuen Dienst erstellen und die `ErrorHandler` Klasse erweitern.

```Typescript
importiere { ErrorHandler, Injectable, Injector } von '@angular/core';

@Injectable()
export class AppErrorHandler extends ErrorHandler {
  constructor(private Injector: Injector) {
    super();
  }

  handleError(error: any): void {
    // Ihre Fehlerbehandlungslogik hier
  }
}

Sobald Sie Ihren Fehlerhandler erstellt haben, müssen Sie ihn beim Angular-Router registrieren. Öffnen Sie dazu die Datei app.module.ts und fügen Sie den ErrorHandler zum Array providers hinzu.

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    AppRoutingModule
  ],
  providers: [{provide: ErrorHandler, useClass: AppErrorHandler}],
  bootstrap: [AppComponent]
})
export class AppModule { }

Wenn nun ein Fehler in Ihrer Anwendung auftritt, wird der AppErrorHandler aufgerufen.

Fazit

Die Beherrschung des Angular-Routings ist ein wesentlicher Bestandteil jeder Angular-Anwendung. Mit der richtigen Herangehensweise muss es keine entmutigende Aufgabe sein. In diesem Leitfaden haben wir untersucht, wie man Routen einrichtet, wie man Routenparameter verwendet, wie man mit Lazy Loading arbeitet, wie man seine Routen sichert und wie man mit Fehlern umgeht. Wenn Sie die in diesem Leitfaden beschriebenen Schritte befolgen, sind Sie auf dem besten Weg, ein Routing-Meister zu werden.

Keywords

Angular

Technologien