Start with Angular Modules

I am back with Angular and today I was reading about the Angular Modules it 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 to share or encapsulate, business logic, components, pipes, services and help 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 3 main areas when I said areas mean features or modules of my app, every module will have his own scope and keep it private but also export some component or feature.

• Users: list and create users
• Ads: list all ads and expose a top ad.
• Welcome: main area.

A normal 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 and it makes 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.

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 full control over his scope and context like routing, services, pipes, or components.

Users Module.

The user module has 2 components the user-list and user-create, the user module has ownership about his routing

Using angular-cli g for generate, m module, user/user --flat set the directory and --flat to skip create an extra 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 his routing and exports the AdsTopComponent to be used 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 just import these modules and our code looks clean and split.

The app.module only need import the Ads and User modules and get access to every functionality provide by them.

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, only need to go or edit his module without impact 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