Angular: Arquitectura del Framework
En este articulo aprenderemos un poco sobre la arquitectura de Angular y abordaremos a modo global los Módulos, Componentes y Servicios.
Angular es una plataforma y framework utilizado para escribir aplicaciones web en HTML y Typescript. Esta cuenta con diferentes librerías; muchas son parte del Core y son necesarias para el funcionamiento correcto de nuestras aplicaciones, y otras son opcionales.
Para crear nuestras aplicaciones con Angular, generamos templates con HTML y controlamos estos mismos templates con lógica creada en nuestros componentes, que serán exportados como clases. Así mismo, agregamos lógica en nuestros servicios para manejar la data que nuestra aplicación tendrá y finalmente “encapsulamos” nuestros componentes y servicios en módulos o NgModules.
Después iniciamos nuestra aplicación mediante el bootstraping de nuestro root module. Angular toma el control y muestra contenido en el explorador, reaccionando a la interacción de los usuarios que utilicen la app de acuerdo a las instrucciones que le dimos en nuestra lógica (código).
Por supuesto hay mucho más detrás de esto. Podemos analizar cada uno de los actores en nuestra aplicación.
Modulos 📦
Un módulo o NgModule declara un contexto de compilación para un conjunto de componentes. Un NgModule puede asociar sus componentes con código relacionado, como servicios, para formar unidades funcionales.
Cada aplicación generada con Angular cuenta con un root module o modulo de raíz llamado convencionalmente AppModule, el cual provee el mecanismo de arranque que inicia nuestra aplicación. Una aplicación generalmente contiene varios módulos funcionales.
Como en Javascript (y en muchos lenguajes con programación funcional), un módulo puede importar funcionalidades de otros módulos, y exportar sus propias funcionalidades.
Una buena práctica es crear diferentes módulos para tu aplicación y organizar tu código de manera funcional, para poder crear aplicaciones ordenadas cuando son complejas y escalables. Además, de esta forma podremos sacar provecho a lazy loading — consiste en cargar solo los módulos que sean necesarios — y así mejorar el rendimiento de nuestra aplicación.
Componentes ⛓
Cada aplicación de Angular tiene al menos un componente. Al igual que el root module, existe el root component que conecta una jerarquía de componentes con el DOM. Cada componente define una clase que contiene data y lógica, y está vinculada a nuestro template HTML.
Templates, directivas y data binding
Un template es una mezcla de HTML con Angular markup — tags personalizados de Angular — . Las directivas de un template proveen lógica de programación, y hacen un data binding (enlaza la lógica que contiene la data de tu aplicación) con las vistas.
Hay dos tipos de data-binding:
- Event binding o enlace de eventos, que responden a la interacción del usuario al modificar algún input en la aplicación, actualizando la data.
- Property binding o enlace de propiedades, que permite agregar valores modificados desde nuestra data, a nuestro HTML.
Antes de que se muestre una vista, Angular evalúa las directivas y resuelve la sintaxis del data binding en el template para modificar los elementos HTML y el DOM, según los datos y la lógica de nuestra aplicación. Angular cuenta con two-way data binding, que significa que los cambios en el DOM también se reflejan en nuestra data.
Servicios e Inyección de Dependencias 💉
Toda la data o lógica que no está asociada directamente a una vista y que quieres utilizar en diferentes partes de tu aplicación y entre diferentes componentes, puede ser escrita en un servicio. Tal como un componente, los servicios son exportados como clases. Los servicios cuentan con el decorator @Injectable() que provee metadata que permite que tus servicios sean inyectados en componentes como dependencias.
Dependency injection o Inyección de Dependencias te permite manejar las clases de tus componentes de forma ligera y eficiente. No obtienen datos del servidor, validan los user input o logs directamente en la consola; delegan la obtención de datos a los servicios.
Estos fueron algunos conceptos básicos sobre los principales bloques de arquitectura de una aplicación en Angular. El siguiente diagrama muestra cómo se relacionan estas piezas básicas.
Te recomiendo seguir la documentación oficial de Angular para familiarizarte más sobre los componentes fundamentales de una aplicación.
