Right now, our task tracker is a simple Single Page Application (SPA). It always loads from the same address in the browser (localhost:4200) and displays the same content, no matter what.

But we want to take it a step further — by allowing users to navigate to different sections of the app using URLs like /task/1, /settings, or /analytics. When navigating between these URLs, the page shouldn't reload — instead, only the content should update dynamically within the same browser window.

This approach is what defines a SPA (Single Page Application) — the entire application loads once, and all further navigation happens by swapping content on the fly.

It's fast and user-friendly, but it requires a dedicated system that understands how to handle different URLs. That's where routing comes in.

What Is Routing?

In our task tracker, we might have different sections like a task list and a task details page. For example:

• When the user navigates to /tasks, we want to show a component with a list of tasks;

• When they go to /tasks/42, we want to show the details of the task with ID 42.

Angular reads the current URL and decides which component to display — all without reloading the page. Behind the scenes, it's still the same HTML file, but the content is replaced dynamically. For the user, it feels like they're navigating a traditional website, but everything is handled inside the SPA.

Simply put, routing lets us tell the application:

"If the user goes to /tasks, show the TaskListComponent. If they go to /tasks/42, show the TaskDetailsComponent."

How Routing Works in Angular

Angular provides a built-in tool called RouterModule that makes it easy to manage navigation between views.

For our task tracker, routing gives us a lot of power:

• Define routes — for example, link the /tasks path to a component that shows all tasks;

• Navigate without reloading — go to /tasks/15 and immediately see the details of task 15;

• Display different components based on the URL — such as a task list, a new task form, or settings;

• Use route parameters — like task IDs or filters (/tasks?status=done);

• Create nested routes — for example, user settings inside a profile section (/profile/settings);

• Protect routes — like requiring users to be logged in to access /settings.

In practice, you just define a set of rules: which path should load which component. Angular takes care of the rest, handling navigation and rendering automatically.

From the user's point of view, it all works just like a regular website — they can click links, use the browser's back and forward buttons, and even share direct links to specific views in the app.