¿Cómo funciona Angular?

Angular funciona sobre una arquitectura MVC/MVVM. Utiliza componentes, enlace de datos e inyección de dependencias para construir aplicaciones web interactivas.

Conceptos principales:

• Componentes: Bloques constructivos de la aplicación, que consisten en una plantilla, una clase y estilos.
• Módulos (NgModules): Agrupan componentes relacionados, servicios y otros elementos.
• Enlace de datos: Sincroniza datos entre el modelo y la vista.
  • Enlace unidireccional: Los datos fluyen en una dirección (por ejemplo, del modelo a la vista).
  • Enlace bidireccional [()]: Los cambios en el modelo afectan a la vista y viceversa.
• Servicios: Proporcionan funcionalidades que pueden ser utilizadas por diferentes componentes (por ejemplo, trabajo con solicitudes HTTP).
• Inyección de dependencias (DI): Mecanismo para proporcionar dependencias (como servicios) a los componentes.
• Plantillas: HTML con extensiones de sintaxis Angular para mostrar datos y manejar eventos.
• Directivas: Modifican el comportamiento o la apariencia de los elementos DOM.
  • Estructurales: Añaden, eliminan o manipulan elementos DOM (por ejemplo, *ngIf, *ngFor).
  • Atributo: Cambian la apariencia o comportamiento de un elemento existente (por ejemplo, [ngClass], [ngStyle]).
• Ciclo de vida de los componentes: Conjunto de hooks que permiten ejecutar código en diferentes etapas de la vida del componente (por ejemplo, OnInit, OnDestroy).
• Zonas (NgZone): Garantizan la detección automática de cambios y la actualización de la vista en operaciones asíncronas.

Proceso de trabajo:

1. Carga: La aplicación se carga, el módulo Bootstrap inicia el componente raíz.
2. Renderizado: Angular compila las plantillas y crea la estructura DOM.
3. Enlace de datos: Se establece la conexión entre datos y vista.
4. Manejo de eventos: Los escuchadores de eventos reaccionan a las acciones del usuario.
5. Detección de cambios: La zona monitorea operaciones asíncronas.
6. Actualización de la vista: Cuando se detectan cambios, Angular actualiza las partes correspondientes del DOM.

Ejemplo de enlace bidireccional de datos:

<!-- En la plantilla -->
<input [(ngModel)]="userName">
<p>Hola, {{ userName }}!</p>

// En la clase del componente
export class MyComponent {
  userName: string = '';
}