Why routing is needed for SPAs in Angular - See It in Action

Why routing is needed for SPAs

📖 Scenario: You are building a simple single-page application (SPA) for a small online store. The app has different sections like Home, Products, and Contact Us. You want users to navigate between these sections without the page reloading.

🎯 Goal: Build a basic Angular SPA with routing that lets users switch between Home, Products, and Contact Us pages smoothly.

📋 What You'll Learn

Create a basic Angular app structure with three components: HomeComponent, ProductsComponent, and ContactComponent

Set up Angular routing to navigate between these components

Use routerLink in the navigation menu for user-friendly links

Display the correct component content when the user clicks a link without reloading the page

💡 Why This Matters

🌍 Real World

Most modern web apps use SPAs to provide fast, smooth user experiences by loading content dynamically without full page reloads.

💼 Career

Understanding routing is essential for frontend developers working with Angular or other SPA frameworks to build user-friendly navigation.

1

Create the initial components

Create three Angular components named HomeComponent, ProductsComponent, and ContactComponent with simple template text inside each.

Angular

// Create HomeComponent, ProductsComponent, and ContactComponent with basic template text
// Your code here

Need a hint?

Use @Component decorator to create each component with a simple template.

2

Set up the routing configuration

Create a routing configuration array called routes that maps the path '' to HomeComponent, 'products' to ProductsComponent, and 'contact' to ContactComponent.

Angular

import { Routes } from '@angular/router';

// Define routes array mapping paths to components
// Your code here

Need a hint?

Use an array of objects with path and component properties for routing.

3

Add router outlet and navigation links

In the main app component template, add a navigation menu with routerLink directives for Home, Products, and Contact. Also add a <router-outlet> tag to display routed components.

Angular

Need a hint?

Use <a routerLink="path"> for navigation and <router-outlet> to show routed content.

4

Import RouterModule and apply routing

In the main app module, import RouterModule from @angular/router and call RouterModule.forRoot(routes) inside the imports array of @NgModule.

Angular

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule } from '@angular/router';

// Add RouterModule.forRoot(routes) to imports array
@NgModule({
  declarations: [AppComponent, HomeComponent, ProductsComponent, ContactComponent],
  imports: [BrowserModule, /* Your code here */],
  bootstrap: [AppComponent]
})
export class AppModule {}

Need a hint?

Import RouterModule and add RouterModule.forRoot(routes) to the imports array in @NgModule.