Why Defining routes array in Angular? - Purpose & Use Cases

The Big Idea

Discover how a simple list of routes can save you hours of confusing code and bugs!

The Scenario

Imagine building a website with many pages, and you have to write code to check the URL and show the right page every time someone clicks a link or types an address.

The Problem

Manually checking URLs and loading pages is slow, confusing, and easy to break. You might forget a case or mix up page links, making your site hard to use and fix.

The Solution

Defining a routes array lets Angular handle URL changes and page loading automatically. You just list your pages and their paths once, and Angular does the rest smoothly.

Before vs After

✗ Before

if (url === '/home') { showHome(); } else if (url === '/about') { showAbout(); }

✓ After

const routes = [{ path: 'home', component: HomeComponent }, { path: 'about', component: AboutComponent }];

What It Enables

This makes your app easy to grow and maintain, letting users move between pages quickly without errors.

Real Life Example

Think of a shopping website where clicking 'Cart' or 'Profile' changes the page instantly without reloading the whole site, thanks to routes.

Key Takeaways

Manually managing page navigation is hard and error-prone.

Routes array lets Angular handle navigation automatically.

This leads to faster, smoother, and easier-to-maintain apps.