Arquitectura de aplicaciones Angular 2
(Basado en Architecture Overview, Angular.io)
El siguiente diagrama muestra la estructura básica de una aplicación de Angular 2:
(TutorialsPoint: Angular 2 - Architecture)
Se puede observar la estructura de una aplicación compuesta de un solo módulo que contiene a su vez un único componente. Una aplicación real tendría uno o más módulos, cada uno compuesto de múltiples componentes.
Se identifican los principales componentes de una aplicación Angular:
Módulos
La estructura de una aplicación Angular esta dividida en módulos, cada uno de los cuales contiene características funcionales propias de un aspecto de la solución, en otras palabras un dominio específico de aplicación.
Toda aplicación Angular debe contener al menos un módulo, el módulo raíz, llamado por convención AppModule.
Una aplicación Angular es ejecutada cuando se referencia el módulo raíz AppModule en el archivo main.ts:
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app.module';
platformBrowserDynamic().bootstrapModule(AppModule);
Componentes
Un componente controla una sección de la interfaz de usuario llamada vista.
Por ejemplo las siguientes vistas, de una aplicación típica, son controladas por componentes:
- Vista principal con menús de navegación.
- La lista de tarjetas de un cliente.
- La vista de detalle de una tarjeta.
La lógica de un componente de aplicación se define dentro de una clase de TypeScript. La clase interactúa con la vista a través de sus propiedades y métodos.
Plantillas
Es el diseño de la interfaz de usuario en lenguaje HTML. Además de los elementos típicos de HTML, contiene directivas de Angular que definen su comportamiento. Se usa la sintaxis de Angular con comandos como *ngFor,{{hero.name}},(click),[hero].
Servicios
Los servicios son una categoría amplia que contempla cualquier valor, función o característica que pueda necesitar la aplicación.
Algunos ejemplos son:
- Servicios de autenticación
- Servicios de datos
- Bus de mensajes
- Configuración de aplicación
A continuación un ejemplo de servicio asincrónico que usa el concepto Promise para recuperación de datos. Este servicio depende de los servicios backend y logger, que son inyectados por Angular en tiempo de ejecución:
export class HeroService {
private heroes: Hero[] = [];
constructor(
private backend: BackendService,
private logger: Logger) { }
getHeroes() {
this.backend.getAll(Hero).then( (heroes: Hero[]) => {
this.logger.log(`Fetched ${heroes.length} heroes.`);
this.heroes.push(...heroes); // fill cache
});
return this.heroes;
}
}
En general, se considera una buena práctica que los componentes de Angular permitan la interacción con el usuario y nada más. Un buen componente debe enlazar las propiedades y métodos con la vista, y delegar la lógica no trivial de la aplicación a los servicios.
Inyección de dependencias
La inyección de dependencias es el mecanismo usado por Angular para proveer a una nueva instancia de una clase con todos los servicios o dependencias que esta requiera.
En Angular, las dependencias de un componente se definen dentro de los parámetros del constructor de la clase. Por ejemplo el siguiente componente define una dependencia en el servicio backend:
constructor(private backend: HeroService) { }
Angular mantiene un contenedor global de instancias de servicio que han sido previamente creados. Si un servicio es requerido y no se encuentra en el contenedor, este es creado como una nueva instancia y retornado para ser usado por el componente que lo requiere.
Un servicio debe cumplir las siguientes condiciones para ser incluido en el administrador de inyección de Angular:
- Registrar el servicio como proveedor (sección Providers) en el módulo raíz ApModule.
Opcionalmente, el servicio se puede registrar como proveedor (sección Providers) del componente donde será inyectado.
Adicionar el decorador @Injectable a la clase del servicio.
Por último se debe declarar la dependencia de un servicio en particular dentro del constructor del componente que lo requiere.