No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Programaci贸n Modular

11/25
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.

  • 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 : 鈥榬oot鈥 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

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 鉂

  • 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.

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.

< @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.

[https://www.code-sample.com/2018/04/modules-ngmodule-angular-4-5-6.html]

M谩s info sobre los m贸dulos de Angular馃榿
y ac谩

Me encanta este tema!

Recommended readings:

More info about NgModules: here
More info about types of NgModules and guidelines for creating them: here

Los _providers _ son clases de tipo @Injectable que servir谩n para los artefactos (components, directives, pipes) que se coloquen en declarations, adem谩s tambi茅n quedaran disponibles para aquellos otros m贸dulos que importen este m贸dulo que los contiene