Angular
Tutorial Angular: Desarrollo de módulos Angular
Angular módulos: organización y uso. Aprende a organizar y usar módulos en Angular con ejemplos prácticos y detallados.
Aprende Angular y certifícateLos módulos son un componente fundamental en la arquitectura de Angular, actuando como contenedores que agrupan componentes, directivas, pipes y servicios relacionados para formar unidades funcionales cohesivas.
Importancia de los módulos
Los módulos son fundamentales en Angular por varias razones:
1. Organización del código: Permiten una mejor estructuración y organización del código fuente.
2. Reutilización: Facilitan la reutilización de componentes y servicios en diferentes partes de una aplicación o incluso entre diferentes aplicaciones.
3. Lazy loading: Posibilitan la carga diferida de partes de una aplicación para mejorar el rendimiento.
4. Encapsulación: Ayudan a encapsular características y funcionalidades en bloques de código independientes.
5. Optimización de compilación: Permiten una compilación más eficiente mediante la agrupación lógica de componentes.
Creación de módulos
Para crear un módulo en Angular, se utiliza el comando de Angular CLI:
ng generate module MiModulo
Este comando genera un archivo .module.ts
que contendrá la definición del módulo.
Estructura de un módulo
Un módulo en Angular se define mediante el decorador @NgModule
. Este decorador acepta un objeto de metadatos que describe cómo se debe compilar el módulo y qué elementos incluye.
Ejemplo de un módulo básico:
// task.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { TaskListComponent } from './task-list/task-list.component';
import { TaskDetailComponent } from './task-detail/task-detail.component';
import { TaskService } from './task.service';
@NgModule({
declarations: [
TaskListComponent,
TaskDetailComponent
],
imports: [
CommonModule
],
exports: [
TaskListComponent
],
providers: [
TaskService
]
})
export class TaskModule { }
En este ejemplo, TaskModule
agrupa los componentes TaskListComponent
y TaskDetailComponent
, así como el servicio TaskService
. El módulo también importa el módulo CommonModule
, que proporciona directivas y funcionalidades comunes.
Secciones de un módulo
Un módulo típicamente contiene las siguientes secciones:
1. Declarations: Lista de componentes, directivas y pipes pertenecientes al módulo.
2. Imports: Otros módulos cuyas exportaciones son necesarias para los componentes de este módulo.
3. Exports: Componentes, directivas y pipes que deben estar disponibles para otros módulos.
4. Providers: Servicios que el módulo contribuye a la colección global de servicios.
Ejemplo de módulo con secciones
// feature.module.ts
import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FeatureComponent } from './feature.component';
import { FeatureService } from './feature.service';
@NgModule({
declarations: [FeatureComponent],
imports: [CommonModule],
providers: [FeatureService],
exports: [FeatureComponent]
})
export class FeatureModule { }
Módulo raíz (AppModule)
El módulo principal de una aplicación Angular se conoce como AppModule. Este módulo se crea automáticamente al iniciar un nuevo proyecto y es responsable de arrancar la aplicación. Es importante mencionar que este funcionamiento es en versiones de Angular 16 y anteriores.
Ejemplo de AppModule
:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TaskModule } from './task/task.module';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
TaskModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
En este ejemplo, AppModule
importa tanto el módulo BrowserModule
como el módulo personalizado TaskModule
. También define el componente raíz AppComponent
y establece que este componente se utilizará como punto de inicio para la aplicación.
Eliminación del módulo raíz (AppModule) en Angular 17+
En Angular 17 y versiones posteriores, el módulo raíz (AppModule
) ya no se crea por defecto en los nuevos proyectos. En lugar de depender de un módulo raíz, Angular ha avanzado hacia el uso de componentes independientes (standalone components) y la nueva sintaxis de control de flujo.
Ejemplo de configuración sin módulo raíz:
import { bootstrapApplication } from '@angular/platform-browser';
import { AppComponent } from './app.component';
import { TaskComponent } from './task/task.component';
bootstrapApplication(AppComponent, {
providers: [
importProvidersFrom(BrowserModule),
importProvidersFrom(TaskComponent)
]
});
En este ejemplo, se utiliza bootstrapApplication
para arrancar la aplicación directamente con AppComponent
y se importan los proveedores necesarios, eliminando así la necesidad de un módulo raíz tradicional.
Importación y exportación de módulos
Los módulos pueden importar funcionalidades de otros módulos y también pueden exportar funcionalidades a otros módulos.
Ejemplo de importación y exportación
// app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FeatureModule } from './feature/feature.module'; // Importación del módulo
import { AppComponent } from './app.component';
@NgModule({
declarations: [AppComponent],
imports: [
BrowserModule,
FeatureModule // Uso del módulo importado
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Lazy Loading
Angular permite configurar lazy loading mediante el enrutador de la aplicación, cargando módulos solo cuando son necesarios. Esto mejora significativamente el rendimiento inicial de la aplicación al cargar solo lo necesario.
// app-routing.module.ts
import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: 'tasks', loadChildren: () => import('./task/task.module').then(m => m.TaskModule) },
{ path: 'users', loadChildren: () => import('./user/user.module').then(m => m.UserModule) }
];
@NgModule({
imports: [RouterModule.forRoot(routes)],
exports: [RouterModule]
})
export class AppRoutingModule { }
Otras lecciones de Angular
Accede a todas las lecciones de Angular y aprende con ejemplos prácticos de código y ejercicios de programación con IDE web sin instalar nada.
Instalación Angular
Introducción Y Entorno
Comandos Angular Cli
Introducción Y Entorno
Desarrollo De Componentes Angular
Componentes
Data Binding En Angular
Componentes
Ciclo De Vida De Componentes En Angular
Componentes
Comunicación Entre Componentes Angular
Componentes
Ejercicios de programación de Angular
Evalúa tus conocimientos de esta lección Desarrollo de módulos Angular con nuestros retos de programación de tipo Test, Puzzle, Código y Proyecto con VSCode, guiados por IA.