Derzeit ist unser Aufgaben-Tracker eine einfache Single Page Application (SPA). Sie wird immer von derselben Adresse im Browser (localhost:4200) geladen und zeigt unabhängig von der URL stets denselben Inhalt an.

Wir möchten jedoch einen Schritt weiter gehen – indem wir den Nutzern ermöglichen, über URLs wie /task/1, /settings oder /analytics zu verschiedenen Bereichen der Anwendung zu navigieren. Beim Wechseln zwischen diesen URLs soll die Seite nicht neu geladen werden – stattdessen soll sich der Inhalt dynamisch im selben Browserfenster aktualisieren.

Dieses Vorgehen definiert eine SPA (Single Page Application) – die gesamte Anwendung wird einmalig geladen, und alle weiteren Navigationen erfolgen durch den dynamischen Austausch von Inhalten.

Dies ist schnell und benutzerfreundlich, erfordert jedoch ein spezielles System, das verschiedene URLs verarbeiten kann. Hier kommt das Routing ins Spiel.

Was ist Routing?

In unserem Aufgaben-Tracker könnten wir verschiedene Bereiche wie eine Aufgabenliste und eine Detailseite für Aufgaben haben. Zum Beispiel:

• Wenn der Benutzer zu /tasks navigiert, soll eine Komponente mit einer Liste von Aufgaben angezeigt werden;

• Wenn er zu /tasks/42 geht, sollen die Details der Aufgabe mit der ID 42 angezeigt werden.

Angular liest die aktuelle URL und entscheidet, welche Komponente angezeigt wird – und das alles, ohne die Seite neu zu laden. Im Hintergrund bleibt es dieselbe HTML-Datei, aber der Inhalt wird dynamisch ersetzt. Für den Benutzer fühlt es sich an, als würde er eine traditionelle Website besuchen, aber alles wird innerhalb der SPA gesteuert.

Kurz gesagt, mit Routing können wir der Anwendung mitteilen:

"Wenn der Benutzer zu /tasks geht, zeige die TaskListComponent. Wenn er zu /tasks/42 geht, zeige die TaskDetailsComponent."

Funktionsweise des Routings in Angular

Angular stellt mit dem integrierten Werkzeug RouterModule eine einfache Möglichkeit zur Verfügung, die Navigation zwischen Ansichten zu verwalten.

Für unseren Aufgaben-Tracker bietet Routing zahlreiche Möglichkeiten:

• Routen definieren — zum Beispiel den Pfad /tasks mit einer Komponente verknüpfen, die alle Aufgaben anzeigt;

• Navigation ohne Neuladen — zu /tasks/15 wechseln und sofort die Details von Aufgabe 15 sehen;

• Unterschiedliche Komponenten je nach URL anzeigen — etwa eine Aufgabenliste, ein Formular für neue Aufgaben oder Einstellungen;

• Routenparameter verwenden — wie Aufgaben-IDs oder Filter (/tasks?status=done);

• Verschachtelte Routen erstellen — beispielsweise Benutzereinstellungen innerhalb eines Profilbereichs (/profile/settings);

• Routen schützen — etwa indem Benutzer angemeldet sein müssen, um auf /settings zuzugreifen.

In der Praxis wird einfach eine Reihe von Regeln definiert: Welcher Pfad lädt welche Komponente. Angular übernimmt den Rest und steuert Navigation sowie Rendering automatisch.

Aus Sicht der Nutzer funktioniert alles wie auf einer gewöhnlichen Website — sie können auf Links klicken, die Vor- und Zurück-Schaltflächen des Browsers verwenden und sogar direkte Links zu bestimmten Ansichten der App teilen.