Mastering Angular 12 Routing for Efficient Single-Page Application Development

Overview

With Google’s Angular framework, developers can create dynamic single-page applications (SPAs) quickly and effectively. The routing system of Angular is one of its primary features, which enables developers to switch between views with ease. To improve your comprehension, we’ll go into dynamic routing, review the foundations of Angular 12 routing, and answer some often-asked questions in this blog article.

Pioneers in Cloud Consulting & Migration Services

Reduced infrastructural costs
Accelerated application deployment

Get Started

Introduction

Angular is a comprehensive and robust framework developed by Google, empowers developers to build dynamic single-page applications (SPAs) efficiently. One of Angular’s key features is its routing mechanism, allowing developers to navigate seamlessly between different views.

Angular 12 Routing Fundamentals

Setting Up Routes

Angular applications define routes using the RouterModule and its forRoot method. In your main application module, typically named app.module.ts, import the necessary modules:

```typescript
import { RouterModule, Routes } from '@angular/router';
```

```typescript

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

```

Define your routes as an array of Route objects:

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

```typescript

const routes: Routes = [

{ path: '', component: HomeComponent },

{ path: 'about', component: AboutComponent },

{ path: 'contact', component: ContactComponent },

];

Integrating Router Module

Next, integrate the RouterModule into your application by importing and configuring it within the imports array of the @NgModule decorator:

```typescript
@NgModule({
  declarations: [
    // Components
  ],
  imports: [
    // Other modules
    RouterModule.forRoot(routes),
  ],
  bootstrap: [AppComponent],
})
export class AppModule {}
```

```typescript

@NgModule({

declarations: [

// Components

imports: [

// Other modules

RouterModule.forRoot(routes),

bootstrap: [AppComponent],

})

export class AppModule {}

```

Displaying Views with Router Outlet

To display the routed components, use the <router-outlet></router-outlet> directive in your main template (usually app.component.html):

```html
<!-- app.component.html -->
<div>
  <router-outlet></router-outlet>
</div>
```

```html

<div>

<router-outlet></router-outlet>

</div>

```

Navigating Between Routes

Angular provides multiple ways to navigate between routes:

Imperative Navigation:

In your component, use the Router service to navigate programmatically:

```typescript
import { Router } from '@angular/router';
 
// ...
 
constructor(private router: Router) {}
 
navigateToAbout() {
  this.router.navigate(['/about']);
}
```

```typescript

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

// ...

constructor(private router: Router) {}

navigateToAbout() {

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

}

```

Declarative Navigation:

Use the routerLink directive in your templates for declarative navigation:

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

```html

<a routerLink="/about">About</a>

<a routerLink="/contact">Contact</a>

```

Dynamic Routing

Dynamic routing in Angular allows for more flexible and data-driven navigation. This is particularly useful when loading components based on dynamic data or parameters.

Configuring Dynamic Routes

Dynamic routes involve using route parameters to influence the displayed content. Modify your routes to include the parameters:

```typescript
const routes: Routes = [
  { path: '', component: HomeComponent },
  { path: 'about/:id', component: AboutDetailComponent },
  { path: 'contact', component: ContactComponent },
];
```

```typescript

const routes: Routes = [

{ path: '', component: HomeComponent },

{ path: 'about/:id', component: AboutDetailComponent },

{ path: 'contact', component: ContactComponent },

];

```

In this example, the :id in the route indicates a parameter that can be passed when navigating to the ‘about’ route.

Accessing Route Parameters

To access route parameters, inject the ActivatedRoute service in your component:

```typescript
import { ActivatedRoute } from '@angular/router';
 
// ...
 
constructor(private route: ActivatedRoute) {
  this.route.params.subscribe(params => {
    console.log(params.id);
  });
}
```

```typescript

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

// ...

constructor(private route: ActivatedRoute) {

this.route.params.subscribe(params => {

console.log(params.id);

});

}

```

Dynamically Loading Components

With dynamic routing, you can dynamically load components based on route parameters. In the example above, the AboutDetailComponent can use the route parameter to fetch specific data or content.

Conclusion

Angular 12 routing is a powerful feature that enables developers to create sophisticated and dynamic SPAs. Mastering both the fundamentals and dynamic aspects of routing opens up endless possibilities for crafting engaging user experiences.

Drop a query if you have any questions regarding Angular 12 and we will get back to you quickly.

Empowering organizations to become ‘data driven’ enterprises with our Cloud experts.

Reduced infrastructure costs
Timely data-driven decisions

Get Started

About CloudThat

CloudThat is an award-winning company and the first in India to offer cloud training and consulting services worldwide. As a Microsoft Solutions Partner, AWS Advanced Tier Training Partner, and Google Cloud Platform Partner, CloudThat has empowered over 850,000 professionals through 600+ cloud certifications winning global recognition for its training excellence including 20 MCT Trainers in Microsoft’s Global Top 100 and an impressive 12 awards in the last 8 years. CloudThat specializes in Cloud Migration, Data Platforms, DevOps, IoT, and cutting-edge technologies like Gen AI & AI/ML. It has delivered over 500 consulting projects for 250+ organizations in 30+ countries as it continues to empower professionals and enterprises to thrive in the digital-first world.

FAQs

1. What is the purpose of the `RouterModule.forRoot` method?

ANS: – The forRoot method configures the router with the provided routes. It should be called only once in the main application module. The forRoot method sets up the router with initial navigation based on the current browser URL.

2. How can I navigate programmatically in Angular 12?

ANS: – Use the Router service and its navigate method for imperative navigation. For example, this.router.navigate([‘/about’]); will navigate to the ‘about’ route.

3. Can I have multiple `router-outlet` directives in my application?

ANS: – Yes, you can. Multiple router-outlet directives allow you to have named outlets, enabling the display of different components in different parts of your application.

WRITTEN BY Huda Khan

Huda works as a Frontend Software Developer at CloudThat. She is an accomplished front-end developer passionate about creating user-friendly and aesthetically pleasing websites. Proficient in frameworks like ReactJS and technologies such as HTML, CSS, and JavaScript, Huda specializes in producing responsive and intuitive designs with a thorough understanding of web development fundamentals. In her spare time, she enjoys experimenting with new technologies and staying up to date with the latest advancements in the field.