publication

Angular Nested Routing

Miquel Canal

Monday 1, June 2020
  • Angular
  • JavaScript

Single-page application (SPA)

Angular is one of the most advanced JavaScript frameworks at the moment. It is being maintained by a large community of engineers and powered by Google, giving that extra plus for reliability.

Its learning curve is often mentioned as a downside for this framework. However, once learnt its best practices and ways of developing it becomes one of the most solid tools for creating web applications.

Following the single-page application architecture, Angular apps are based on one fundamental piece: the router.

Angular Modules

One of the keys to design a scalable Angular system is to modularize its sections. An Angular module consolidate components, directives, and pipes into cohesive blocks of functionality.

Every Angular app has at least one module, the root module. The rest of modules for organizing code are known as feature modules.

The routing of an application can be defined on a single routing module or be split into multiple routing modules. I find this really helpful as it allows an Angular system to scale very easily.

To see the nested routing in action, we can look at an example of Angular application that has 3 modules: MainModule, UsersModule and ConfigModule.

This application will have the following three routes and each route will be defined as an independent module:

/
/users
/config

Angular Nested Router

It is simple to develop nested routers in Angular. The key is to rely on JavaScript’s dynamic imports of modules and Angular’s loadChildren method.

This file is the main routing module. It defines the main routes while importing two nested modules.

const routes: Routes = [
    {
        path: '', 
        component: HomeComponent
    },
    {
        path: 'users',
        loadChildren: () => import('../modules/user/user.module')
            .then(m => m.UsersModule),
    },
    {
        path: 'config',
        loadChildren: () => import('../modules/config/config.module')
            .then(m => m.ConfigModule),
    }
];

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

The Angular application now has two nested modules: UsersModule and ConfigModules. These modules can then define their own routing with complete independence.

Example UsersModule:

@NgModule({
    declarations: [
        UsersComponent,
        UsersListComponent,
        UsersSettingsComponent
    ],
    imports: [ 
        CommonModule,
        UsersRoutingModule
    ]
})
export class UsersModule { }

Example UsersRoutingModule:

const routes: Routes = [
    {
        path: '',
        component: UsersComponent,
        children: [
            {
                path: 'list',
                component: UsersListComponent
            },
            {
                path: 'settings',
                component: UsersSettingsComponent
            },
            {
                path: '',
                redirectTo: 'list',
                pathMatch: 'full'
            }
        ]
    }
];

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

References

Angular: ViewChild and Local References

Angular: ViewChild and Local References

Access DOM elements directly using viewChild and Template Reference Variables.

How to compile Angular into single bundle.

How to compile Angular into single bundle.

Steps to compile an Angular application into a single bundle. An overview of the types of Angular compilation bundles and ways to cache bust an Angular application.

How to update Angular 11

How to update Angular 11

Updating Angular projects on a regular basis is very important. This article covers how to update Angular to version 11 from version 7. It also provides information about new features on Angular 11.

This site uses cookies to ensure a great experience. By continue navigating through the site you accept the storage of these cookies.