The Project | About Us | Contribute | Donations | License
HOME My courses Completed
◄ Previous
◄

Setting Up Routes

Next ►
►

Routing is a fundamental feature in Angular that allows you to navigate between different views or components in your application. In this section, we will cover the basics of setting up routes in an Angular application.

Key Concepts

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

Steps to Set Up Routes

  1. Importing the Router Module

First, you need to import the RouterModule and Routes from @angular/router in your 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 { }

  1. Defining Routes

In the routes array, each route is an object with two properties:

  • path: The URL path.
  • component: The component to display when the path is matched.
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent }
];

  1. Adding Router Outlet

In your main template (usually app.component.html), add the <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>

  1. Using Router Link

Use the routerLink directive to create navigation links.

<!-- 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.

  1. Generate Components

Use Angular CLI to generate the components:

ng generate component home
ng generate component about

  1. Update AppModule

Update app.module.ts to include the routes and import the components.

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 { }

  1. Update Templates

Update app.component.html 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>

Update home.component.html and about.component.html with some content.

<!-- home.component.html -->
<h1>Home</h1>
<p>Welcome to the Home page!</p>
<!-- about.component.html -->
<h1>About</h1>
<p>Welcome to the About page!</p>

Practical Exercise

Exercise

  1. Create a new Angular component named ContactComponent.
  2. Add a new route for the ContactComponent with the path contact.
  3. Update the navigation menu to include a link to the Contact page.
  4. Add some content to contact.component.html.

Solution

  1. Generate the ContactComponent:
ng generate component contact
  1. Update app.module.ts to include the new route:
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about', component: AboutComponent },
  { path: 'contact', component: ContactComponent }
];
  1. Update app.component.html 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>
  1. Add content to contact.component.html:
<!-- contact.component.html -->
<h1>Contact</h1>
<p>Welcome to the Contact page!</p>

Summary

In this section, we learned how to set up basic routing in an Angular application. We covered:

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

In the next section, we will explore how to handle route parameters to create dynamic routes.

◄ Previous
◄
Next ►
►
The Project | About Us | Contribute | Donations | License
© Copyright 2024. All rights reserved