Arquitectura Modular en Angular
Para experimentar de manera segura con módulos, se debe crear una copia del proyecto existente. Estos cambios son solo para práctica y no afectarán el proyecto original. En capítulos posteriores, el enfoque volverá a la construcción de aplicaciones utilizando componentes independientes.
Creación de un módulo para el TaskComponent
Este paso consiste en crear un módulo para el TaskComponent. El módulo declarará el componente, una directiva relacionada y un pipe.
Para generar un módulo en Angular, existe un comando específico en la CLI:
Ahora que el archivo task.module.ts ha sido creado dentro de la carpeta task, podemos implementarlo
task-module.ts
El array exports en @NgModule especifica qué componentes, directivas o pipes deben estar disponibles para otros módulos que importen este módulo. En este caso, TaskComponent puede ser utilizado fuera de TaskModule.
Este módulo declara el TaskComponent, su directiva asociada y un pipe personalizado. Importa CommonModule para habilitar directivas estructurales como *ngIf y *ngFor. El TaskComponent se exporta para que pueda ser reutilizado en otros módulos.
Creación de un módulo para TaskListComponent
En este paso, se creará un módulo para el TaskListComponent. Cree un nuevo módulo en la carpeta task-list:
Ahora que el archivo task-list.module.ts ha sido creado dentro de la carpeta task-list, podemos implementarlo
task-list-module.ts
Este módulo declara TaskListComponent, responsable de renderizar una lista de tareas. Importa TaskModule para acceder al componente de tarea y FormsModule para funcionalidades como formularios de creación de tareas. El componente se exporta para que pueda ser utilizado en otros módulos.
Creación del módulo raíz
En este paso, se definirá el módulo principal que actúa como punto de inicio de toda la aplicación.
Cada aplicación Angular necesita un módulo raíz que indique a Angular cómo iniciar la aplicación. Este módulo reúne todas las piezas necesarias: funcionalidades integradas de Angular, módulos personalizados y el componente raíz.
Crear un nuevo módulo en la carpeta app:
La opción --flat indica al Angular CLI que cree el archivo del módulo sin generar una carpeta separada.
app-module.ts
Este módulo funciona como el punto de entrada de la aplicación. Importa BrowserModule, que es necesario para ejecutar Angular en el navegador, y TaskListModule, que contiene la funcionalidad principal para la gestión de tareas. El AppComponent se establece como el componente raíz para iniciar la aplicación.
Configuración del punto de entrada
Este paso actualiza el punto de entrada de la aplicación para iniciarla utilizando el módulo raíz en lugar de un componente independiente.
Abre main.ts y reemplaza su contenido con lo siguiente:
main.ts
Este código inicia la aplicación utilizando AppModule. Esta configuración ilustra la arquitectura modular: la aplicación se divide en módulos, cada uno encapsulando sus propios componentes, directivas, pipes, servicios y más.
La arquitectura modular en Angular ayuda a organizar la aplicación en bloques lógicos, haciendo que el código sea escalable, bien estructurado y reutilizable.
¡Gracias por tus comentarios!
Pregunte a AI
Pregunte a AI
Pregunte lo que quiera o pruebe una de las preguntas sugeridas para comenzar nuestra charla
Awesome!
Completion rate improved to 3.13Arquitectura Modular en Angular
Desliza para mostrar el menú
Para experimentar de manera segura con módulos, se debe crear una copia del proyecto existente. Estos cambios son solo para práctica y no afectarán el proyecto original. En capítulos posteriores, el enfoque volverá a la construcción de aplicaciones utilizando componentes independientes.
Creación de un módulo para el TaskComponent
Este paso consiste en crear un módulo para el TaskComponent. El módulo declarará el componente, una directiva relacionada y un pipe.
Para generar un módulo en Angular, existe un comando específico en la CLI:
Ahora que el archivo task.module.ts ha sido creado dentro de la carpeta task, podemos implementarlo
task-module.ts
El array exports en @NgModule especifica qué componentes, directivas o pipes deben estar disponibles para otros módulos que importen este módulo. En este caso, TaskComponent puede ser utilizado fuera de TaskModule.
Este módulo declara el TaskComponent, su directiva asociada y un pipe personalizado. Importa CommonModule para habilitar directivas estructurales como *ngIf y *ngFor. El TaskComponent se exporta para que pueda ser reutilizado en otros módulos.
Creación de un módulo para TaskListComponent
En este paso, se creará un módulo para el TaskListComponent. Cree un nuevo módulo en la carpeta task-list:
Ahora que el archivo task-list.module.ts ha sido creado dentro de la carpeta task-list, podemos implementarlo
task-list-module.ts
Este módulo declara TaskListComponent, responsable de renderizar una lista de tareas. Importa TaskModule para acceder al componente de tarea y FormsModule para funcionalidades como formularios de creación de tareas. El componente se exporta para que pueda ser utilizado en otros módulos.
Creación del módulo raíz
En este paso, se definirá el módulo principal que actúa como punto de inicio de toda la aplicación.
Cada aplicación Angular necesita un módulo raíz que indique a Angular cómo iniciar la aplicación. Este módulo reúne todas las piezas necesarias: funcionalidades integradas de Angular, módulos personalizados y el componente raíz.
Crear un nuevo módulo en la carpeta app:
La opción --flat indica al Angular CLI que cree el archivo del módulo sin generar una carpeta separada.
app-module.ts
Este módulo funciona como el punto de entrada de la aplicación. Importa BrowserModule, que es necesario para ejecutar Angular en el navegador, y TaskListModule, que contiene la funcionalidad principal para la gestión de tareas. El AppComponent se establece como el componente raíz para iniciar la aplicación.
Configuración del punto de entrada
Este paso actualiza el punto de entrada de la aplicación para iniciarla utilizando el módulo raíz en lugar de un componente independiente.
Abre main.ts y reemplaza su contenido con lo siguiente:
main.ts
Este código inicia la aplicación utilizando AppModule. Esta configuración ilustra la arquitectura modular: la aplicación se divide en módulos, cada uno encapsulando sus propios componentes, directivas, pipes, servicios y más.
La arquitectura modular en Angular ayuda a organizar la aplicación en bloques lógicos, haciendo que el código sea escalable, bien estructurado y reutilizable.
¡Gracias por tus comentarios!
