Day 04: Modules, Routing and Navigation

Day 04: Modules, Routing and Navigation

A Quick Overview of Modules in Angular

An Angular application is usually a group of modules that further is a cohesive set of components, services, templates, etc. In any angular application, there will be at least one module file named as app.module.ts and this file works as a root module by using the NgModules which acts like a container for all these angular elements by grouping those.

We can create more than one NgModules as per our business requirements which can further be exported to other modules. Below is a quick snapshot of the the different properties that can be used while declaring an NgModules.

PropertiesDescription
declarations Here, we can declare all the modules, pipes, components, or directives that needs to be used in this module. We can encapsulate more than one components within a single NgModules.
exports Whatever components we declare, we can export few or all of those components to be used in the template files of other NgModules where we intend to use this NgModule.
imports Here, we can import any pre-built NgModules or custom-built NgModules for use in our components of this NgModule.
providers All services we intend to use in our Angular components for this NgModule should be added to the providers array.
bootstrap This property is usually defined in the root NgModule only which signifies the name of the component that needs to be initialized/bootstrapped at the beginning of the angular application. We should not define this property in any other NgModule except the root module.
Sample Code for app.module.ts
// Here, we need to import all the modules, components, pipes, etc.
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { CommonModule } from '@angular/common';
import { AppComponent } from './app.component';
import { EmployeeService } from '../services/employee.service';

// @NgModule is a decorator, used to create an angular module
@NgModule({

  // Here, we declare all the modules or components, and/or pipes
  declarations: [ AppComponent ],

  // Here, we can import all the modules or components, pipes, etc. in an array format
  imports: [ CommonModule, BrowserModule ],

  // The exports array contains the list of all NgModules and components to be exported from this NgModule
  exports: [ CommonModule, AppComponent ],

  // Here, we can add all the services to the providers array
  providers: [ EmployeeService ],

  // app.module.ts is a root module so we have specified the component name as a starting point
  bootstrap: [ AppComponent ]

})

export class AppModule { }

In similar way, we can import directives and pipes as well.

Now, let's move to Routing & Navigation in Angular to understand how Routing Modules work in Angular.

Routing & Navigation in Angular

In real-time application development, an angular application consists of more than one components where we need to navigate from one component to another component. This navigation in angular is done via Angular Routing.

To work with Angular Routing, we define Routing Modules which is one of a kind of module which we discussed above. Let's have a look how can we generate a normal module and a module with routing.

To generate an application with routing enabled
ng new my-first-angular-app --routing --defaults
To generate a feature module without routing
ng generate module employees
Shorthand command where g stands for generate and m stands for module
ng g m employees
To generate a feature module with routing module
ng generate module employees --route employees

Once our feature module and routing modules are created, we can configure the routing paths and add links in our application. You can refer the sample code below to see how after routing configurations, our application will look like on UI.

app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

const routes: Routes = [
  {
    path: 'hello-world',
    loadChildren: () => import('./hello-world/hello-world.module').then(m => m.HelloWorldModule),
    data: {
      title: 'Hello World! || Learn Angular Step by Step in 30 days'
    }
  }, {
    path: 'employees',
    loadChildren: () => import('./employees/employees.module').then(m => m.EmployeesModule),
    data: {
      title: 'Employees || Learn Angular Step by Step in 30 days'
    }
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ]
})
export class AppRoutingModule { }
app.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { AppRoutingModule } from './app-routing.module';
import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    CommonModule,
    BrowserModule,
    AppRoutingModule
  ],
  exports: [
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
hello-world.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { HelloWorldComponent } from './hello-world.component';

@NgModule({
    declarations: [
    HelloWorldComponent
    ],
    imports: [
    CommonModule,
    RouterModule.forChild([
        {
        path: '',
        component: HelloWorldComponent,
        data: {
            title: 'Hello World! || Learn Angular Step by Step in 30 days'
        }
        },
    ])
    ],
    exports: [
    ]
})
export class HelloWorldModule { }
employees.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { RouterModule } from '@angular/router';
import { EmployeesComponent } from './employees.component';
import { EmployeeService } from '../services/employee.service';

@NgModule({
  declarations: [
    EmployeesComponent
  ],
  imports: [
    CommonModule,
    RouterModule.forChild([
      {
        path: '',
        component: EmployeesComponent,
        data: {
          title: 'Employees || Learn Angular Step by Step in 30 days'
        }
      },
    ])
  ],
  exports: [
  ],
  providers: [
    EmployeeService
  ]
})
export class EmployeesModule { }
app.component.html
<nav>
    <aside>
        <img src="../assets/logo.png" alt="" />
    </aside>
    <ul>
        <li>
            <a tabindex="0" [routerLink]="'/hello-world'" routerLinkActive="active" ariaCurrentWhenActive="page">Welcome</a>
        </li>
        <li>
            <a tabindex="0" [routerLink]="'/employees'" routerLinkActive="active" ariaCurrentWhenActive="page">Employees</a>
        </li>
    </ul>
</nav>
<main>
    <!-- The routed views render in the <router-outlet>-->
    <router-outlet></router-outlet>
</main>

After the necessary code changes, your UI may look like something below:

Learn Angular Day 04 - Routing Modules and Navigation in Angular Learn Angular Day 04 - Routing Modules and Navigation in Angular

Share this blog on:

Deepak Jain, Full-stack Developer, Blogger and Tech Consultant

About Author

Deepak Jain is an experienced professional full-stack developer, UI/UX designer, ex-startup entrepreneur, passionately writes blog on technology, startups, business ideas. He also shares his own life experiences and creates awesome inspiring stories from the lives of people. Check out full profile