Understanding Angular Routing and Navigation with Step-by-Step Tutorial

Navigating through an Angular application can sometimes feel like exploring a complex maze. One of the most challenging tasks in Angular development is mastering routing, which is why in this blog, we’re here to guide you through the best practices of Angular routing and navigation.

What is Angular Routing?

Users can navigate between pages using Angular’s routing feature. For instance, Angular’s routing enables users to transition from the home page to pages like ‘contact’ or ‘about’ seamlessly.

Let’s Build an Angular Application to Understand Routing Better

Note: Here, we’ll put feature routing into practice, thus we’ll make two modules as follow;

  1. user
  2. admin

Instead of creating all of your routes in the app routing file, it is better practice to create feature routing

Step 1. Use the following command to create an angular application.

ng new angular-routing

Step 2. Next, we’ll create two modules with routing enabled: user and admin.

ng generate module admin --routing
ng generate module user --routing

The routing flag creates a routing file for your module.

As a developer, you should refrain from adding routes inside modules; instead, it’s recommended to establish separate routing files.

Step 3. Let’s create some components in the user and admin modules.

ng g c admin/home
ng g c user/home

Step 4. Open app-routing.module file and paste the following code.

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

const routes: Routes = [
{
path: 'admin',
loadChildren: () =>
import('./admin/admin.module').then((m) => m.AdminModule),
},
{
path: 'user',
loadChildren: () => import('./user/user.module').then((m) => m.UserModule),
},
];

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

As lazy loading is an excellent practice for quick loading, we will utilize it here. Lazy loading improves the application’s performance by loading only the required modules.

Step 5. Open the user-routing.module file and paste the following code.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
{ path: 'home', component: HomeComponent, pathMatch: 'full' },
];

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

We will create the routes for the user module within the routing file, The pathMatch property will match the exact route, and you can create multiple routes inside the routes array.

Because Angular renders the first matching route, the order of the routes is crucial. More precise routes should be placed before less specific routes.

Step 6. Open the admin-routing.module file and paste the following code.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { HomeComponent } from './home/home.component';

const routes: Routes = [
{ path: 'home', component: HomeComponent, pathMatch: 'full' },
];

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

Step 7. Open the app.component.html file and add the following tag.

<router-outlet></router-outlet>

A directive called router-outlet aids Angular in inserting matching path components.

Step 8. Now let’s run our app.

Ng serve

Because nothing has been added to the app component, you might see a blank screen. Let’s navigate to http://localhost:4200/user/home this route will render the home component from the user module.

We implemented the feature routing using a step-by-step tutorial in the above example.

Related read: Things that help to improve your Angular Code

Unlock the Full Potential of AngularJS: Hire a Skilled AngularJS Developer

Let’s Create a Wild Card Route

Due to the possibility that a user may attempt to navigate to a route that does not exist, it is crucial to create wild card routes.

Let’s build a component called page not found that will be displayed when a user attempts to visit a route that doesn’t exist.

ng g c pagenotfound

Next, open the app-routing.modules file and paste the following code.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { PagenotfoundComponent } from './pagenotfound/pagenotfound.component';

const routes: Routes = [
{
path: 'admin',
loadChildren: () =>
import('./admin/admin.module').then((m) => m.AdminModule),
},
{
path: 'user',
loadChildren: () => import('./user/user.module').then((m) => m.UserModule),
},
{
path: '**',
component: PagenotfoundComponent,
},
];

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

We can create a wildcard route by adding a path with two asterisks at the end of all of your routes; when this happens, Angular will redirect to the wildcard route if it fails to find any other paths that match.

Related read: How To Implement Angular Elements?

coma

Conclusion

In conclusion, mastering Angular routing and navigation is a vital aspect of web development that can be challenging yet rewarding. In this article, we have explored best practices for Angular routing and navigation, emphasizing the importance of feature routing and lazy loading to enhance performance.

We have also learned how to create wildcard routes to handle scenarios where users may access non-existent routes gracefully. By following these best practices, developers can ensure a smooth and efficient navigation experience for users in their Angular applications.

Keep Reading

Keep Reading

Mindbowser is excited to meet healthcare industry leaders and experts from across the globe. Join us from Feb 25th to 28th, 2024, at ViVE 2024 Los Angeles.

Learn More

Let's create something together!