1. Introduction

In this tutorial, we will learn how to set up routing in an Angular application. Routing is a core concept in Angular that allows us to navigate from one view to the next as users perform tasks in a Single Page Application (SPA).

What you will learn

By the end of this tutorial, you will be able to:

1. Create a routing module in Angular.
2. Define paths and associate them with specific components.
3. Understand and implement parameterized and child routes.

Prerequisites

Before proceeding with this tutorial, you should have a basic understanding of:

• Angular basics
• JavaScript and TypeScript
• Angular CLI installed on your machine

2. Step-by-Step Guide

Setting Up a New Angular Project

First, we need to create a new Angular project. Use Angular CLI for this purpose:

ng new angular-routing

This will create a new project called "angular-routing".

Creating a Routing Module

Angular CLI can automatically generate a routing module when creating a new application. To do this, you need to add the --routing flag:

ng new angular-routing --routing

This will create an AppRoutingModule and import it in AppModule.

Defining Routes

Routes are defined in the Routes array. Each route is an object with a path and a component. The path is the URL, and the component is the component that will be displayed when that URL is accessed.

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

3. Code Examples

Example: Defining a Default Route

To set a default route that will be accessed when no path is specified, use an empty string for the path:

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

In this example, if a user navigates to the root of your site, they will be redirected to '/home'.

4. Summary

In this tutorial, we have learned how to set up routing in an Angular application. We have created a routing module, defined routes, and associated them with specific components.

5. Practice Exercises

To reinforce what you've learned, try the following exercises:

1. Exercise 1: Create a new Angular application with a routing module. Create two components and define routes for them. Test the application to ensure the routing works correctly.

2. Exercise 2: Add a default route to the application you created in Exercise 1. The application should redirect to this route when no path is specified.

3. Exercise 3: Create a route with a parameter. The route should display a component that uses the parameter to display specific data.

Solutions

1. Solution to Exercise 1:

ng new routing-practice --routing
ng generate component home
ng generate component about

In app-routing.module.ts:

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

1. Solution to Exercise 2:

In app-routing.module.ts:

const routes: Routes = [
  { path: '', redirectTo: '/home', pathMatch: 'full' },
  { path: 'home', component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

1. Solution to Exercise 3:

ng generate component user

In app-routing.module.ts:

const routes: Routes = [
  { path: 'user/:id', component: UserComponent },
];

In user.component.ts:

export class UserComponent implements OnInit {
  id: string;

  constructor(private route: ActivatedRoute) {}

  ngOnInit() {
    this.id = this.route.snapshot.paramMap.get('id');
  }
}

In this exercise, we created a user component that displays a user's ID. The ID is obtained from the route parameter 'id'.