Angular Routing and Navigation: Building Dynamic Web Applications

Angular - The Ultimate Walkthrough Learning Guide

What do you need to learn to become an Angular Master? The journey can feel overwhelming. The YouTube series can feel like it’s only covering the basics. That’s why I’ve created this Walkthrough Learning Guide to help you get started on your Angular journey. From zero to pro, these articles

matcha.fyiAphinya Dechalert

This section is designed to provide a comprehensive understanding of Angular routing and navigation. It covers the basics of how Angular routing works, creating routes and linking to them in your application, and passing data between routes. By the end, you will be able to implement routing and navigation in your Angular applications to create dynamic and interactive web applications.

Learning Outcomes:

• Understand how to implement routing and navigation in your Angular application.
• Learn how to create and configure routes in Angular.
• Navigate between routes and pass data between them.
• Understand advanced techniques for routing in Angular.

Prerequisites:

• Basic knowledge of HTML, CSS, and JavaScript is required.
• Familiarity with a text editor and command-line interface is recommended.
• Familiarity with Angular basics, such as creating a new project and running the app, is recommended.

Understanding Angular Routing

Angular routing plays a crucial role in building modern web applications. It allows you to create single-page applications (SPAs) with seamless navigation, giving users the experience of navigating between pages without triggering a full page reload. In this section, we will provide an overview of Angular routing and its role in web applications. We'll also discuss creating routes, configuring the router, and understanding the different types of routes in Angular.

Overview of Angular Routing

Angular routing enables you to create SPAs by mapping different URL paths to different components within your application. When users navigate to a URL, Angular loads the associated component, rendering it in the designated location within your app. This provides a smooth user experience, as only the necessary portions of the application are updated, without the need for a full page refresh.

Creating Routes and Configuring the Router

To create routes in your Angular application, you first need to configure the router. Begin by importing the RouterModule and Routes from the @angular/router package in your app.module.ts file:

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

Next, define the routes for your application. Routes are an array of objects, where each object maps a URL path to a specific component. For example:

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

In this example, we have defined three routes:

1. The empty path ('') maps to the HomeComponent.
2. The about path maps to the AboutComponent.
3. The contact path maps to the ContactComponent.

Finally, import the RouterModule into your @NgModule and call its forRoot() method, passing in the routes array:

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

Don't forget to import and include the AppRoutingModule in the imports array of the @NgModule decorator in the app.module.ts file:

import { AppRoutingModule } from './app-routing.module';

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

To display the component associated with a route, use the <router-outlet> directive in your app.component.html:

<router-outlet></router-outlet>

Understanding the Different Types of Routes in Angular

In Angular, there are several types of routes you can configure:

1. Basic Routes: As demonstrated above, basic routes map a URL path to a specific component.
2. Parameterized Routes: These routes include parameters within the URL path, allowing you to pass data to the component. For example:

{ path: 'product/:id', component: ProductComponent }

In this example, the :id segment in the path represents a parameter. When navigating to a URL like /product/42, the ProductComponent will be loaded, and the value 42 will be passed as the id parameter.

1. Wildcard Routes: Wildcard routes are used to catch undefined routes or display a "404 Not Found" page. To create a wildcard route, use the ** path:

{ path: '**', component: NotFoundComponent }

Keep in mind that the order of routes in the routes array matters. The router uses a first-match strategy, so place the wildcard route at the end of the array to ensure it only matches when no other routes are matched.

1. Child Routes: Child routes allow you to create nested routes within a parent route, enabling more complex navigation structures. To create child routes, use the children property in a route configuration:

{
  path: 'products',
  component: ProductsComponent,
  children: [
    { path: '', component: ProductListComponent },
    { path: ':id', component: ProductDetailComponent },
  ],
}

In this example, the products path is mapped to the ProductsComponent, which serves as the parent component. Within the ProductsComponent, there are two child routes:

• An empty path that maps to the ProductListComponent.
• A parameterized path with an :id segment that maps to the ProductDetailComponent.

The parent component should include a <router-outlet> directive to display the child components.

1. Redirect Routes: Redirect routes are used to navigate the user from one URL to another automatically. This can be useful for handling legacy URLs or simplifying navigation. To create a redirect route, use the redirectTo property:

{ path: 'old-path', redirectTo: '/new-path', pathMatch: 'full' }

In this example, when the user navigates to /old-path, they will be redirected to /new-path. The pathMatch property is set to 'full' to ensure that the route only matches when the entire URL path matches the path value.

Angular routing is an essential feature for building modern web applications. By understanding how to create and configure routes and recognizing the different types of routes, you can build single-page applications with seamless navigation, providing an improved user experience.

Navigating Between Routes

Navigating between routes is a core aspect of Angular applications. In this section, we'll explore how to create navigation links, work with route parameters, and use router guards for authentication and authorization.

Creating Navigation Links Between Routes

To create navigation links between routes, Angular provides the routerLink directive. Instead of using the traditional href attribute, you can use routerLink to bind a route path to an HTML element, such as an anchor tag. This directive ensures that navigation is handled by the Angular router, enabling smooth navigation without full page reloads. Here's an example:

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

In this example, we have three anchor tags with the routerLink directive, each navigating to a different route in our application.

Understanding Route Parameters and How to Use Them

Route parameters allow you to pass data between routes. We previously discussed parameterized routes that include parameters within the URL path. To navigate to a route with a parameter, you can use the routerLink directive with an array containing the route path and the parameter value:

<a [routerLink]="['/product', productId]">View Product</a>

In this example, productId is a variable that holds the value of the product ID. The routerLink directive will generate a URL such as /product/42 based on the value of productId.

To access route parameters in the target component, you can use the ActivatedRoute service provided by Angular. First, import the service and inject it into your component:

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

constructor(private route: ActivatedRoute) {}

Next, use the route.params observable to access the route parameters:

ngOnInit(): void {
  this.route.params.subscribe((params) => {
    const id = +params['id'];
    // Perform actions with the id value
  });
}

In this example, we subscribe to the params observable, which emits the route parameters whenever they change. We then extract the id parameter and convert it to a number using the + operator.

Using Router Guards for Authentication and Authorization