Derzeit ist unser Aufgaben-Tracker eine einfache Single Page Application (SPA). Sie wird immer von derselben Adresse im Browser geladen (localhost:4200) und zeigt unabhängig von der Situation 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 App zu navigieren. Beim Wechseln zwischen diesen URLs soll die Seite nicht neu geladen werden – stattdessen soll sich nur der Inhalt dynamisch im selben Browserfenster aktualisieren.

Dieser Ansatz definiert eine SPA (Single Page Application) – die gesamte Anwendung wird einmalig geladen, und alle weiteren Navigationen erfolgen durch das dynamische Austauschen von Inhalten.

Dies ist schnell und benutzerfreundlich, erfordert jedoch ein spezielles System, das versteht, wie verschiedene URLs verarbeitet werden. 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, möchten wir eine Komponente mit einer Liste von Aufgaben anzeigen;

• Wenn er zu /tasks/42 geht, möchten wir die Details der Aufgabe mit der ID 42 anzeigen.

Angular liest die aktuelle URL und entscheidet, welche Komponente angezeigt werden soll – 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 bereit, die Navigation zwischen Ansichten zu verwalten.

Für unseren Aufgaben-Tracker bietet Routing zahlreiche Vorteile:

• Routen definieren — beispielsweise 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 — zum Beispiel Benutzereinstellungen innerhalb eines Profilbereichs (/profile/settings);

• Routen schützen — etwa indem der Zugriff auf /settings nur für angemeldete Nutzer möglich ist.

In der Praxis definieren Sie lediglich eine Reihe von Regeln: Welcher Pfad soll welche Komponente laden. Angular übernimmt den Rest und steuert Navigation sowie Rendering automatisch.

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