Módulos en Angular

Módulos, enrutamiento y navegación en Angular (I)

Es probable que hayas escuchado el término “módulos” en más de una ocasión. En este artículo, vamos a desmitificar qué son los módulos y por qué son esenciales para construir aplicaciones en Angular.

¿Qué es un módulo en Angular?

Imagina un módulo en Angular como un contenedor para organizar las características y funcionalidades de tu aplicación. Es como una caja de herramientas que contiene todas las herramientas (componentes, servicios, directivas y más) que necesitas para construir tu aplicación. Los módulos te ayudan a manejar la complejidad de tu aplicación dividiéndola en partes más pequeñas y manejables.

Photo by Ruslan Bardash on Unsplash

Imagina que estás construyendo una casa. En lugar de tratar de construir toda la casa de una vez, la dividirías en habitaciones, cada una con un propósito específico. De manera similar, en Angular, los módulos nos ayudan a descomponer nuestra aplicación en áreas funcionales más pequeñas. Esto hace que el desarrollo y el mantenimiento sean más organizados y eficientes.

¿Cómo se estructura un Módulo?

• Decorador NgModule: En Angular, creas un módulo utilizando el decorador @NgModule. Es como poner una etiqueta en una caja para identificar su contenido.
• Declaraciones: Dentro de un módulo, declaras los componentes, directivas y pipes que le pertenecen. Estas son las herramientas en tu caja de herramientas.
• Imports: Puedes importar otros módulos a tu módulo, lo que hace que su funcionalidad esté disponible. Es como tomar prestada la caja de herramientas de un vecino.
• Providers: Los módulos pueden proporcionar servicios que pueden usarse en toda la aplicación. Los servicios son como ayudantes que realizan tareas específicas.
• Exports: Los módulos también pueden exponer elementos, generalmente componentes. Esto es como exponer en una mesa las herramientas que tus vecinos pueden utilizar.

Veamos un ejemplo:

my-module.module.ts

Este módulo declara que tiene el componente MyComponent, que importa los módulos CommonModule (funciones y componentes básicos de Angular) y HttpClientModule, también necesita el servicio CartService, además, este módulo exporta el componente MyComponent para que pueda ser utilizado desde el exterior.

¿Cómo se crea un módulo?

Para crear un módulo en Angular lo recomendable es hacerlo mediante el CLI ejecutando el siguiente comando:

ng g m nombre-del-modulo

Esto nos crea una carpeta con el nombre del módulo y en su interior nuestro archivo nombre-del-modulo.module.ts

Protip: si un componente pertenece a este módulo es importante que se cree dentro de esta carpeta, de esta manera el CLI de Angular es capaz de reconocer que este componente pertenece al módulo y automáticamente, con la creación del componente, actualiza el módulo para declarar este componente.