Angular 7 | Arquitectura

Angular es una plataforma o marco para crear aplicaciones basadas en clientes en HTML y TypeScript. Está escrito en TypeScript. Implementa funciones principales y opcionales como un conjunto de bibliotecas de TypeScript que se importan a las aplicaciones. Angular consta de tres cosas principales que son módulos, componentes y enrutamiento.

ngModules o módulos son bloques de construcción básicos de aplicaciones angulares. Una aplicación angular está definida por un conjunto de ngModules. Es importante que cada aplicación tenga un módulo raíz. Los componentes definen vistas, que son conjuntos de elementos de pantalla entre los que Angular puede elegir y modificar de acuerdo con la lógica y los datos del programa. Es importante tener al menos un componente en cada aplicación llamado componente raíz. Los componentes utilizan servicios para comunicarse y compartir datos entre sí. El enrutamiento incluye la vinculación de múltiples componentes entre sí para navegar a diferentes componentes.

Módulos:

Un NgModule declara un contexto de compilación para un conjunto de componentes dedicado a un dominio de aplicación, un flujo de trabajo o un conjunto de capacidades estrechamente relacionado. Un NgModule puede asociar sus componentes con código relacionado, como servicios, para formar unidades funcionales. Cada aplicación angular siempre tiene un módulo conocido como módulo raíz, llamado Appmodule en la aplicación. 
 

Podemos importar funcionalidades de otros módulos y permitir que otros módulos las exporten y utilicen mediante enrutamiento (RouterModule). Al hacer varios módulos podemos dividir la funcionalidad y permite la reutilización del código. Además, la creación de módulos reduce la carga de módulos de carga, ya que se cargan solo bajo demanda, esta característica hace que Angular sea de naturaleza robusta. 

Componentes:

Cada aplicación angular tiene al menos 1 componente conocido como componente raíz que conecta una jerarquía de componentes con el modelo de objeto de documento de página (DOM). Cada componente define una clase que contiene el inicio de sesión en formato TypeScript y la vista de la página en plantilla HTML. 
 

Tenemos tres cosas que forman parte de un componente. 
 

1. Plantillas: 
   Las plantillas HTML tienen el aspecto de cómo se verá la página. La lógica de la plantilla proporcionada por las directivas y la vinculación de los datos de la aplicación con el DOM de la página se realiza mediante el enlace. El enlace de datos es de dos tipos, uno es el enlace de eventos (cambios en función de los eventos) y el otro es el enlace de propiedades (cambios en función de los datos de la aplicación). 
    
2. Servicios e inyección de dependencias: 
   Por inyección de dependencias entendemos permitir el acceso al servicio suscribiéndolo. Actúa como delegado del servicio. 
    
3. Enlace de datos: 
   el enlace en angular es de dos tipos: 
   • Vinculación de eventos: la 
     vinculación de eventos se utiliza para capturar eventos en el extremo del usuario en la aplicación y responder a ellos en el entorno de destino mediante la actualización de los datos de la aplicación. Por ejemplo, cambiar el color del botón cada vez que el usuario hace clic en él. El evento vinculó el evento onclick. 

      

   • Vinculación de propiedades: la 
     vinculación de propiedades se utiliza para pasar datos de la clase de componente y facilita la interpolación de valores que se calculan desde la aplicación de vuelta al HTML. Por ejemplo, hacer un botón de cambio de color de alternancia en el que el botón vuelve a cambiar su color a la normalidad cada segundo clic. En este caso, la plantilla tomará los datos de la aplicación y buscará si el cambio es 1 o 0 (puede ser verdadero o falso), este tipo de vinculación es vinculación de propiedad. 
      

Metadatos de la clase de componente:

Metadatos significa datos sobre datos. Se compone de información interna de los datos proporcionados. En el caso de los componentes, los metadatos de una clase de componente se componen de 2 elementos básicos: – 
 

1. Los metadatos de una clase de componente tienen una plantilla que define una vista. Una plantilla combina HTML ordinario con directivas y enlaces de Angular que permiten a Angular modificar el HTML antes de presentarlo en la pantalla. 
    
2. Los metadatos para una clase de servicio consisten en información que Angular necesita para que esté disponible para los componentes a través de la inyección de dependencia (DI).

Para una mejor comprensión, puede consultar el diagrama que se muestra a continuación: 
 

Enrutamiento:

El NgModule de Angular Router proporciona un servicio que le permite definir una ruta de navegación entre los diferentes estados de la aplicación y ver jerarquías en su aplicación. 
 

El enrutador asigna rutas similares a URL a otros componentes en lugar de páginas. Cuando un usuario realiza una acción, como hacer clic en un enlace, el enrutador intercepta el comportamiento del navegador y muestra u oculta las jerarquías de los componentes. Permite la función de carga bajo demanda, lo que hace que la aplicación sea robusta. 

Al igual que las páginas web, el enrutador también registra actividades en el navegador y, por lo tanto, el botón de avance y retroceso funciona en caso de enrutamiento. 
 

Trabajo de enrutamiento:

El enrutador asigna rutas similares a URL a vistas en lugar de páginas. Cada vez que se realiza alguna acción, como hacer clic en un enlace a otra página en el navegador, el enrutador intercepta el comportamiento del navegador y muestra u oculta las jerarquías de vista. 

Si el enrutador encuentra que el estado actual de la aplicación requiere una funcionalidad particular, y el módulo que lo define no se ha cargado, el enrutador puede realizar una carga diferida del módulo a pedido, lo que hace que la aplicación sea robusta por naturaleza.

El enrutador interpreta la URL de un enlace de acuerdo con las reglas de navegación y el estado de los datos de su aplicación. El enrutador registra la actividad en el historial del navegador, por lo que los botones de avance y retroceso también funcionan. 

Para definir las reglas de navegación, las rutas de navegación están vinculadas a los componentes. Una ruta utiliza una sintaxis similar a una URL para integrar los datos del programa.