Cómo usar módulos de Angular para estructurar tu aplicación con éxito

Estoy de vuelta con Angular, y hoy estuve leyendo sobre los módulos de Angular, los cuales nos ayudan a encapsular y compartir nuestro código entre aplicaciones.

Si has trabajado con Java o .NET, es similar a una librería donde puedes mantener cierta funcionalidad como privada o pública.

Los módulos de Angular ayudan a compartir o encapsular lógica de negocio, componentes, pipes y servicios, permitiéndonos mantener nuestro app.module liviano y dividir el código en áreas con responsabilidades claras.

Cómo modularizar una aplicación de Angular

Mi ejemplo es simple. Mi aplicación contiene tres áreas principales. Cuando hablo de áreas, me refiero a funcionalidades (features) o módulos de mi app. Cada módulo tendrá su propio alcance, mantendrá su lógica privada y exportará solo los componentes o partes necesarias.

• Users: listar y crear usuarios.

• Ads: listar todos los anuncios y exponer un anuncio destacado (top ad).

• Welcome: área principal de bienvenida.

En una aplicación estándar, solemos crear esta lista de componentes y registrar cada uno dentro del app.module. Esto funciona, pero hace que el app.module termine acumulando demasiadas responsabilidades.

En cambio, al usar módulos de Angular, podemos dividir nuestro código, facilitando su mantenimiento y permitiéndonos compartirlo con otras aplicaciones.

Creando mi aplicación

Angular CLI nos ayuda a generar componentes, servicios, pipes y también módulos.

El primer paso es crear la aplicación y el componente de bienvenida, el cual quedará registrado en el app.module.

ng new banking

El componente de bienvenida

Los componentes se generan con Angular CLI usando ng g c mycomponent, donde la CLI entiende g para generar y c para componente. 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

El app.module solo contiene el componente de bienvenida y el módulo de rutas con la ruta hacia él.

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 { }

El app.module solo se encarga del componente de bienvenida y de su enrutamiento, nada más.

Cada nuevo módulo tiene control total sobre su propio alcance y contexto, como rutas, servicios, pipes o componentes.

Users Module

El módulo de usuarios tiene dos componentes: user-list y user-detail. Este módulo es dueño de su propio enrutamiento.

Usamos Angular CLI con g para generar, m para módulo, users/user --flat para indicar la ruta (y --flat para no crear una carpeta adicional para el módulo) y -m app para registrarlo en el módulo principal:

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

El user.module solo importa el módulo de rutas para su navegación, pero no necesita exportar nada más.

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

El módulo de anuncios encapsula todo lo relacionado con publicidad, de forma similar al módulo de usuarios. Este módulo expone el componente AdsTopComponent para que pueda ser utilizado en cualquier aplicación.

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

El módulo de anuncios tiene su propio enrutamiento y exporta AdsTopComponent para cualquier aplicación que importe 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 { }

Cómo queda el app.module

El app.module ya no necesita saber nada sobre cada componente ni sobre cómo funciona su enrutamiento interno; simplemente importamos estos módulos y nuestro código queda limpio y ordenado.

El app.module solo necesita importar los módulos AdsModule y UsersModule para tener acceso a toda la funcionalidad que proporcionan.

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 {}

Si alguien necesita trabajar en los módulos de usuarios o anuncios, solo tiene que ir a su respectivo módulo y editarlo sin afectar a los demás.

Espero que esto te sirva como un buen punto de partida para comenzar a organizar tu código con módulos en Angular.

¡Gracias!

Foto de Mark König en Unsplash