Angular RouterModule and Routes: Navigating Your Angular Applications

Welcome to the Angular RouterModule and Routes tutorial! In this lesson, we'll explore how to create multi-page Angular applications using the RouterModule and Routes. By the end of this tutorial, you'll be able to create navigation systems with ease, making your Angular applications more interactive and user-friendly.

💡 Pro Tip: Angular RouterModule and Routes are essential for building single-page applications (SPAs) with multiple pages or routes.

Understanding Angular RouterModule

The Angular RouterModule is a powerful module that enables navigation within an Angular application. It allows us to define routes and navigate between them based on user interactions.

Installing the Angular RouterModule

First, let's install the Angular RouterModule using the Angular CLI.

bash

ng add @angular/router

After the installation, update the imports array in the app.module.ts file:

typescript

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

@NgModule({
  imports: [
    RouterModule
  ],
  // ...
})
export class AppModule { }

Defining Routes with Routes Array

The Routes array is used to define routes for our application. Each route consists of a path, component, and other configuration options.

typescript

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

📝 Note: Each route defines a path (URL) and a component that will be loaded when the user navigates to that path.

In the example above, we have two routes:

path: '' - This is the default route, and the HomeComponent will be loaded when the user visits the root URL (e.g., localhost:4200).
path: 'about' - The AboutComponent will be loaded when the user visits the about URL (e.g., localhost:4200/about).

Configuring the Router Module

Now that we have our routes defined, let's configure the RouterModule in the AppModule.

typescript

import { RouterModule } from '@angular/router';
import { routes } from './app.routes';

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  // ...
})
export class AppModule { }

💡 Pro Tip: The forRoot method initializes the RouterModule and makes it available to the whole application.

Navigating between Routes

To navigate between routes, we can use the Router service. Here's an example of navigating to the AboutComponent:

typescript

import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  templateUrl: './home.component.html',
})
export class HomeComponent {
  constructor(private router: Router) {}

  goToAbout() {
    this.router.navigate(['/about']);
  }
}

In the example above, we have a HomeComponent with a goToAbout method that navigates to the /about route when called.

Let's create a complete, working example by implementing both the HomeComponent and AboutComponent.

typescript

// home.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-home',
  template: `
    <h1>Welcome to Home Component</h1>
    <button (click)="goToAbout()">Go to About</button>
  `,
})
export class HomeComponent {
  constructor(private router: Router) {}

  goToAbout() {
    this.router.navigate(['/about']);
  }
}

// about.component.ts
import { Component } from '@angular/core';

@Component({
  selector: 'app-about',
  template: `
    <h1>Welcome to About Component</h1>
  `,
})
export class AboutComponent { }

Now, let's see the example in action:

html

<!-- app.component.html -->
<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
</nav>

<router-outlet></router-outlet>

In the example above, we have a navigation bar with links to both the HomeComponent and AboutComponent. The routerLink directive makes the links navigable. The <router-outlet></router-outlet> directive is used to display the current route's component.

That's it for this tutorial! You've learned how to use Angular RouterModule and Routes to create multi-page Angular applications. Now, let's put your knowledge to the test with a few quiz questions.