Módulos

Las aplicaciones en Angular son modulares, gracias a que incluye su propio sistema para definir módulos (Angular Modules o NgModules). Los módulos de Angular permiten agrupar un conjunto de código utilizado en un ámbito concreto de la aplicación, o una funcionalidad específica.

Se definen mediante el decorador @NgModule, el cual recibe un conjunto de metadatos para definir el módulo, estos son:

• declarations: Las vistas que pertenecen a tu módulo. Hay 3 tipos de clases de tipo vista: componentes, directivas y pipes.

• imports: Otros módulos cuyas clases exportadas son requeridas por templates de componentes de este módulo.

• entryComponents: Componentes utilizados solamente en las plantillas.

• providers: Los proveedores de contenidos que utiliza el módulo.

• bootstrap: Define la vista raíz. Utilizado solo por el root module.

Toda aplicación de Angular tiene al menos un módulo de Angular, el módulo principal (o root module). Por convenio se le llama AppModule y se encuentra en el archivo app.module.ts. La clase AppModule sirve para cargar la aplicación e indicar todas sus dependencias. Como el resto de módulos, se declara con el decorador @NgModule. El código por defecto que incluye el módulo principal sería el siguiente:

import { BrowserModule } from '@angular/platform-browser';
import { ErrorHandler, NgModule } from '@angular/core';
import { IonicApp, IonicErrorHandler, IonicModule } from 'ionic-angular';
import { SplashScreen } from '@ionic-native/splash-screen';
import { StatusBar } from '@ionic-native/status-bar';

import { MyApp } from './app.component';
import { HomePage } from '../pages/home/home';

@NgModule({
  declarations: [
    MyApp,
    HomePage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp)
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    HomePage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    {provide: ErrorHandler, useClass: IonicErrorHandler}
  ]
})
export class AppModule {}