Programación Modular

No tienes acceso a esta clase

¡Continúa aprendiendo! Únete y comienza a potenciar tu carrera

Si ya tienes una cuenta,

Recursos

Para activar las técnicas de Lazy Loading y CodeSplitting en Angular tienes que construir tus aplicaciones de forma modular.

Cuáles son los módulos en Angular

Por defecto, Angular posee un solo módulo en el archivo app.module.ts. Todos tus componentes, servicios, pipe, etc. se importan aquí. Utiliza un decorador llamado @ngModule() con un aspecto similar al siguiente:

// app.module.ts
@NgModule({
  imports: [],         // Imports de otros módulos.
  declarations: [],    // Imports de los componentes del módulo.
  exports: [],         // Exports de componentes u otros para ser utilizados en otros módulos.
  providers: [],       // Inyección de servicios.
  bootstrap: []        // Import del componente principal de la aplicación.
})
export class AppModule { }

Al modularizar una aplicación, cada módulo tendrá sus componentes exclusivos, servicios o los archivos que fuesen a necesitar.

Tipos de Módulos en Angular

Podemos identificar varios tipos de módulos. El AppModule es el módulo raíz que da inicio a tu aplicación. Existen los Routing Modules para la definición de rutas.

El Shared Module que posee servicios o componentes compartidos por toda la aplicación. El Feature/Domain Module que son módulos propios de tu aplicación.

De esta manera, Angular construye un ecosistema de módulos, pudiendo dividir una APP en N partes para optimizar el rendimiento y mantener un orden en el código fuente para que sea comprensible y escalable.

Contribución creada por: Kevin Fiorentino.

Aportes 8

Preguntas 1

Ordenar por:

¿Quieres ver más aportes, preguntas y respuestas de la comunidad?

o inicia sesión.

Luis Eduardo Cardozo

hace 2 años

Root Module: modulo por defecto de angluar
Core Module: son servicios que pueden ser usados en diferentes módulos y componentes recordar que los servicios que se inyecta en el provideIn : ‘root’ se puede usar en cualquier parte.
Routing Module: son módulos especiales que declaran un enrutamiento de la aplicación
Feature Domain Module:son los módulos específicos del negocio
Shared Module:Se usan para componentes pipes y directivas que se quieran usar en toda la aplicación

alberto ayala rodriguez

hace 2 años

el tema de modularizar una aplicación me gusta mucho, porqué delega responsabilidades a cada módulo y no centraliza todas la responsabilidad dentro del appModulo o bueno, así es como lo miro yo ❄

Andres López

hace un año

Cada Módulo en Angular tiene asociados features y componentes específicos. A estos se les conoce como feature modules, pues están asociados a una funcionalidad específica.
Angular define los Módulos con el decorador @ngModule.
- imports → Importar a otros módulos.
- providers → Permiten inyectar servicios o interceptors al módulo.
- declarations → Definen los componentes, pipes y directivas que va a usar el módulo.
- exports → Permiten compartir características con los otros módulos.
- bootstrap → Es el componente de inicio. Por lo general solo lo tiene el módulo principal.
Nota: los servicios que tengan provideIn: root se pueden usar en cualquier módulo.

Jimmy Buriticá Londoño

hace 2 años

La programación modular

La programación modular es un paradigma de programación que consiste en dividir un programa en módulos o subprogramas con el fin de hacerlo más legible y manejable.

Mario Andrés Rincón Nossa

hace un año

< @NgModule({
  providers?: Provider[]
  declarations?: Array<Type<any> | any[]>
  imports?: Array<Type<any> | ModuleWithProviders | any[]>
  exports?: Array<Type<any> | any[]>
  entryComponents?: Array<Type<any> | any[]>
  bootstrap?: Array<Type<any> | any[]>
  schemas?: Array<SchemaMetadata | any[]>
  id?: string
})>

Providers – Una lista de proveedores de inyección de dependencia (DI) y define el conjunto de objetos inyectables que están disponibles en el inyector de este módulo.
Declarations - Una lista de clases declarables, componentes, directivas y tuberías que pertenecen a este módulo. El compilador arroja un error si se intenta declarar la misma clase en varios módulos.
Imports - Una lista de módulos y se utiliza para importar los módulos de apoyo como FormsModule, RouterModule, CommonModule, o cualquier otro módulo de características personalizadas.
Exports - Una lista de componentes declarables, directivas, tuberías y módulos que un módulo de importación puede utilizar dentro de una plantilla de cualquier componente.
EntryComponents - Una lista de componentes que deben ser compilados cuando se define este módulo. Por defecto, una aplicación Angular siempre tiene al menos un componente de entrada, el componente raíz, AppComponent.
Un componente bootstrap es un componente de entrada que Angular carga en el DOM durante el lanzamiento de la aplicación y otros componentes raíz cargados dinámicamente en los componentes de entrada.
Bootstrap – Una lista de componentes que son automáticamente bootstrapped y los componentes listados serán añadidos automáticamente a entryComponents.
Schemas - Define un esquema que permitirá cualquier elemento y propiedad no-Angular.
Id – El Id utilizado para identificar los módulos en getModuleFactory. Si se deja sin definir, el NgModule no se registrará con getModuleFactory.