¿Cómo funciona Angular?

Angular funciona como un marco para crear aplicaciones de una sola página (SPA). Sus componentes clave y principios:

• Modularidad: Las aplicaciones se construyen a partir de módulos. @NgModule define qué componentes, servicios y otros elementos pertenecen al módulo.
• Componentes: Los bloques de construcción principales de las aplicaciones Angular. Cada componente consta de una plantilla (HTML), una clase TypeScript (lógica) y estilos (CSS). El decorador Component los vincula.
• Vinculación de datos (Data Binding): Angular proporciona la conexión entre los datos en la clase del componente y la vista en la plantilla. Existen vinculaciones unidireccionales (propiedad, interpolación) y bidireccionales (ngModel).
• Directivas: Modifican el comportamiento o la apariencia de los elementos del DOM. Pueden ser estructurales (*ngIf, *ngFor) o atributivas (ngClass, ngStyle).
• Servicios: Clases que contienen lógica que puede ser utilizada por varios componentes. Se usan para obtener datos, lógica de negocio, etc.
• Inyección de dependencias (Dependency Injection): Mecanismo mediante el cual Angular proporciona servicios a componentes u otros servicios. Permite que el código sea más flexible y testeable.
• Enrutamiento (Routing): Permite navegar entre diferentes vistas (componentes) de la aplicación sin recargar la página. Se define mediante RouterModule y la configuración de rutas.
• Ciclo de vida del componente (Component Lifecycle): Serie de eventos que ocurren desde la creación hasta la destrucción del componente. Angular proporciona ganchos (métodos) que se pueden implementar para realizar acciones en etapas específicas (por ejemplo, ngOnInit, ngOnDestroy).
• Detección de cambios (Change Detection): Mecanismo que determina cuándo actualizar la vista (DOM) en función de cambios en los datos de la aplicación. Angular usa zonas (NgZone) para rastrear eventos asíncronos y lanzar automáticamente la detección de cambios.
• Plantillas (Templates): HTML con extensiones de Angular para vinculación de datos, directivas y expresiones.
• RxJS: Angular usa activamente la biblioteca RxJS para trabajar con datos asíncronos y flujos de eventos.

Proceso de trabajo a alto nivel:

1. Carga: El navegador carga index.html.
2. Inicio: Se inicia la raíz de la aplicación, generalmente en main.ts.
3. Arranque: @NgModule para el módulo raíz (generalmente AppModule) se carga con platform-browser.
4. Renderizado: Angular crea y renderiza los componentes, comenzando desde el raíz.
5. Vinculación de datos: Los datos de las clases de componentes se vinculan con las plantillas.
6. Detección de cambios: Angular monitorea los cambios en los datos y actualiza la vista.
7. Enrutamiento: Las transiciones entre vistas son manejadas por el enrutador.

// Ejemplo de un componente simple
import { Component } from '@angular/core';

@Component({
  selector: 'app-greet', // Nombre de la etiqueta para usar en la plantilla
  template: `<p>{{ message }}</p>`, // Plantilla del componente
  styles: ['p { color: blue; }'] // Estilos del componente
})
export class GreetComponent {
  // Lógica del componente
  message = '¡Hola desde Angular!';
}

// Ejemplo de uso de un servicio con DI
import { Injectable } from '@angular/core';

@Injectable({
  providedIn: 'root' // El servicio está disponible en el inyector raíz
})
export class DataService {
  getData(): string {
    return 'Datos del servicio';
  }
}

// En un componente que usa el servicio
import { Component, OnInit } from '@angular/core';
import { DataService } from './data.service';

@Component({
  selector: 'app-show-data',
  template: `<p>{{ serviceData }}</p>`,
})
export class ShowDataComponent implements OnInit {
  serviceData: string = '';

  constructor(private dataService: DataService) { // Inyección del servicio
  }

  ngOnInit() {
    this.serviceData = this.dataService.getData();
  }
}

Angular compila TypeScript y plantillas HTML en JavaScript durante el proceso de construcción (compilación AOT por defecto), lo que mejora el rendimiento.