I am back with Angular, and today I was reading about the Angular Modules, which help us to encapsulate and share our code between apps.

If you have been working with java or .net is like a library where you can keep some functionality private or public.

Angular modules help share or encapsulate business logic, components, pipes, and services and allow us to keep our app.module light and split our code into areas with his responsibility.

How to modularize an Angular app.

My example is simple. My app contains three main areas. When I say areas mean features or modules of my app, every module will have its scope, keep it private, and export some component or part.

• Users: list and create users

• Ads: list all ads and expose a top ad.

• Welcome: main area.

In a standard app, we create this list of components, and everyone will be registered into the app.module, and it works, but the app.module will have a lot of responsibility.

But using Angular modules, we can split our code, making it easy to share or share it between other apps.

Creating my app

The Angular-cli helps us to generate components, services, pipes, and also modules.

The first step is to create the app and the welcome component, it will be registered into the app.module.

ng new banking

The welcome component

The components are generated with angular cli using ng g c mycomponent, the cli understand g generate and c component. bash ng g c welcome CREATE src/app/welcome/welcome.component.html (22 bytes) CREATE src/app/welcome/welcome.component.spec.ts (635 bytes) CREATE src/app/welcome/welcome.component.ts (280 bytes) CREATE src/app/welcome/welcome.component.scss (0 bytes) UPDATE src/app/app.module.ts (400 bytes)

App Module

The app.module only have the welcome component and router module with the route to him.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import { WelcomeComponent } from './welcome/welcome.component';

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

@NgModule({
  declarations: [
    AppComponent,
    WelcomeComponent
  ],
  imports: [
    BrowserModule,
    RouterModule.forRoot([
      { path: '**', component: WelcomeComponent}
    ]),
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

The app.module only takes care of the welcome and his routing anything else.

Every new module has complete control over its scope and context like routing, services, pipes, or components.

Users Module.

The user module has two components the user-list and user-create. The user module has ownership of his routing

Using angular-cli g for generate, m module, user/user --flat set the directory and --flat to skip create a different directory for the module and m the module registers.

ng g m users/user --flat -m app
ng g c users/user-list -m user
ng g c users/user-detail -m user

The user.module only imports the Router module for his routing navigation but doesn't need to export anything else.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { UserListComponent } from './user-list/user-list.component';
import {RouterModule} from '@angular/router';
import { UserDetailComponent } from './user-detail/user-detail.component';

@NgModule({
  declarations: [UserListComponent, UserDetailComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'users', component: UserListComponent},
      { path: 'users/:id', component: UserDetailComponent}
    ])
  ]
})
export class UsersModule { }

Ads Module

Ads module encapsulates everything about ads, a bit similar to user.module but ads. The module exposes the adstop component to be used in any app.

ng g m ads/ads --flat -m app
ng g c ads/ads-list -m ads
ng g c ads/ads-top -m ads

The ads module has its routing and exports the AdsTopComponent for any app with the AdsModule.

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { AdsListComponent } from './ads-list/ads-list.component';
import { AdsTopComponent } from './ads-top/ads-top.component';
import {RouterModule} from '@angular/router';

@NgModule({
  declarations: [AdsListComponent, AdsTopComponent],
  imports: [
    CommonModule,
    RouterModule.forChild([
      { path: 'adlist', component: AdsListComponent}
    ])
  ],
  exports: [ AdsTopComponent]
})
export class AdsModule { }

How looks the app.module

The app.module doesn't need to have anything about every component or how his routing works; import these modules, and our code looks clean and split.

The app.module only needs to import the Ads and User modules and get access to every functionality they provide.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { AppComponent } from './app.component';
import {RouterModule} from '@angular/router';
import { AdsModule } from './ads/ads.module';
import { UsersModule } from './users/users.module';
import { WelcomeComponent } from './welcome/welcome.component';

@NgModule({
  declarations: [AppComponent, WelcomeComponent],
  imports: [BrowserModule,  AdsModule, UsersModule, RouterModule.forRoot([
    { path: "**", component: WelcomeComponent }
  ])],
  providers: [],
  bootstrap: [AppComponent],
})
export class AppModule {}

If someone needs to work with user or ad modules, he only needs to go or edit his module without impacting any other modules.

Well, Hopefully, that will give you a bit of a head-start on Angular Modules.

Thanks!

Photo by Mark König on Unsplash