Angular Routing Tutorial with Example

Angular encompasses the power of building highly effective and multilayered web applications. Angular supports routing, which is a mechanism that helps in navigating across different pages and components of your application. This feature is essential for building single-page applications (SPAs) where dynamic contents need to appear on the screen without requiring you to reload the entire page.

In this article, we will discuss the concepts of routing in Angular with an example.

The Basics of Routing in Angular

Routing in Angular enables navigation between different URL paths in the application. This is done by associating a route with a specific component. A route can be defined with the following parameters:

  • Path: The URL path.

  • Component: The component to be displayed based on the path.

  • Redirect: The URL route to be redirected to if the current path does not match any defined path.

Creating Routes in Angular

To create routes in Angular, navigate to your project directory in the command prompt and run the following command:

ng generate module app-routing --flat --module=app

This will create a new file named app-routing.module.ts in your project directory.

Defining Routes in Angular

Open the app-routing.module.ts file, and define your routes as shown below:


import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';

// Import the components to be associated with the routes
import { HomeComponent } from './home/home.component';
import { AboutComponent } from './about/about.component';
import { ContactComponent } from './contact/contact.component';

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

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

The first three imports are required to make this module work, and the paths and components are defined in the routes variable.

Adding Navigation Links

To navigate between the defined routes in your application, we need to add navigation links in the HTML file. To do this, open the app.component.html file and add the following lines of code.


The routerLink directive indicates the path to be followed when the user clicks on the link. The router-outlet directive serves as the placeholder where the corresponding component is rendered on the screen.

Testing Your Route

To test the routes you just added, go to your terminal and run the following command:

ng serve --open

This will launch the server and open the application on your default browser. Now, navigate between the defined routes to see how it works.

FAQs

Q. What is a single-page application (SPA)?

A single-page application is a website that loads all its content on a single page, and dynamically updates the content based on the user’s interactions. SPAs provide a richer user experience similar to a desktop application.

Q. What are the benefits of routing in Angular?

Routing in Angular comes with several benefits, including:

  • It enables navigation across different pages and components of the application without reloading the entire page.

  • It provides a cleaner codebase, as the logic for different routes is separated into individual files.

  • It makes it easy to maintain and update the application by enabling quick access to different sections of the application.

Q. Can routing be used in other frameworks besides Angular?

Yes, routing is a common feature in many front-end frameworks, including React and Vue. These frameworks use different syntax for defining routes, but the underlying concept is the same.

Similar Posts