The Project | About Us | Contribute | Donations | License

HOME

In this section, we will learn how to set up routing in an Angular application. Routing allows us to navigate between different views or components in our application. This is essential for creating single-page applications (SPAs) where the user can navigate without reloading the entire page.

Key Concepts

Router Module: The Angular Router module is used to configure the routes.
Routes: Routes define the mapping between a URL and a component.
Router Outlet: A placeholder in the template where the routed component will be displayed.
Router Link: A directive to link to different routes.

Steps to Set Up Routes

Importing the Router Module

First, we need to import the RouterModule and Routes from @angular/router in our AppModule.

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Defining Routes

In the routes array, we define the paths and the corresponding components. For example:

{ path: '', component: HomeComponent }: This route maps the root URL (/) to the HomeComponent.
{ path: 'about', component: AboutComponent }: This route maps the /about URL to the AboutComponent.

Adding Router Outlet

In the AppComponent template, we need to add a <router-outlet> directive. This is where the routed component will be displayed.

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

Using Router Link

We use the routerLink directive to create navigation links. When a user clicks on these links, the router will navigate to the corresponding route.

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

Practical Example

Let's create a simple Angular application with two components: HomeComponent and AboutComponent.

Generate Components

Use Angular CLI to generate the components:

ng generate component home
ng generate component about

Update AppModule

Update the AppModule to include the routes and import the RouterModule.

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

import { AppComponent } from './app.component';
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';

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

@NgModule({
  declarations: [
    AppComponent,
    HomeComponent,
    AboutComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot(routes)
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

Update AppComponent Template

Update the AppComponent template to include navigation links and the router outlet.

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

Add Content to Components

Add some content to the HomeComponent and AboutComponent templates.

<!-- home.component.html -->
<h1>Welcome to the Home Page</h1>
<p>This is the home page of our Angular application.</p>

<!-- about.component.html -->
<h1>About Us</h1>
<p>This is the about page of our Angular application.</p>

Practical Exercise

Task

Create a new Angular component named ContactComponent.
Add a route for the ContactComponent with the path contact.
Update the navigation menu to include a link to the ContactComponent.
Add some content to the ContactComponent template.

Solution

Generate the ContactComponent:

ng generate component contact

Update the AppModule to include the new route:

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

Update the AppComponent template to include the new link:

<nav>
  <a routerLink="/">Home</a>
  <a routerLink="/about">About</a>
  <a routerLink="/contact">Contact</a>
</nav>
<router-outlet></router-outlet>

Add content to the ContactComponent template:

<!-- contact.component.html -->
<h1>Contact Us</h1>
<p>This is the contact page of our Angular application.</p>

Summary

In this section, we learned how to set up routing in an Angular application. We covered the following key points:

Importing the RouterModule and defining routes.
Using the <router-outlet> directive to display routed components.
Creating navigation links with the routerLink directive.

By following these steps, you can create a navigable Angular application with multiple views. In the next section, we will explore route parameters and how to use them to pass data between routes.

Setting Up Routes

Key Concepts

Steps to Set Up Routes

Importing the Router Module

Defining Routes

Adding Router Outlet

Using Router Link

Practical Example

Generate Components

Update AppModule

Update AppComponent Template

Add Content to Components

Practical Exercise

Task

Solution

Summary

Angular Course

Module 1: Introduction to Angular

Module 2: Angular Components

Module 3: Data Binding and Directives

Module 4: Services and Dependency Injection

Module 5: Routing and Navigation

Module 6: Forms in Angular

Module 7: HTTP Client and Observables

Module 8: State Management

Module 9: Testing in Angular

Module 10: Advanced Angular Concepts

Module 11: Deployment and Best Practices