Come funziona Angular?

Angular funziona come framework per creare applicazioni a pagina singola (SPA). I suoi componenti chiave e principi:

• Modularità: Le applicazioni sono costruite a partire da moduli. @NgModule definisce quali componenti, servizi e altri elementi appartengono al modulo.
• Componenti: I blocchi di costruzione principali delle applicazioni Angular. Ogni componente consiste in un template (HTML), una classe TypeScript (logica) e stili (CSS). Il decoratore Component li collega.
• Binding dei dati (Data Binding): Angular garantisce la connessione tra i dati nella classe del componente e la vista nel template. Esistono binding unidirezionali (property binding, interpolazione) e bidirezionali (ngModel).
• Direttive: Modificano il comportamento o l'aspetto degli elementi DOM. Possono essere strutturali (*ngIf, *ngFor) o attributive (ngClass, ngStyle).
• Servizi: Classi che contengono logica utilizzabile da più componenti. Sono usati per ottenere dati, logica di business, ecc.
• Iniezione delle dipendenze (Dependency Injection): Meccanismo tramite il quale Angular fornisce servizi ai componenti o ad altri servizi. Rende il codice più flessibile e testabile.
• Routing: Permette di navigare tra diverse viste (componenti) dell'applicazione senza ricaricare la pagina. È definito tramite RouterModule e la configurazione delle rotte.
• Ciclo di vita del componente: Serie di eventi che avvengono dalla creazione alla distruzione del componente. Angular fornisce hook (metodi) che possono essere implementati per eseguire azioni in fasi specifiche (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.
• Templates: HTML con extensiones de Angular para la vinculación de datos, directivas y expresiones.
• RxJS: Angular utiliza 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. Bootstrap: @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' // Servicio 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 e HTML in JavaScript durante il processo di build (compilazione AOT di default), migliorando le prestazioni.