Corso di formazione Angular 17

Introduzione ad Angular 17

• Cos'è Angular?
• Angular vs React vs Vue
• Panoramica sulle funzionalità e sull'architettura di Angular 17
• Configurazione dell'ambiente di sviluppo

Primi Passi

• Creare un nuovo progetto Angular 17 utilizzando Angular CLI
• Esplorare la struttura del progetto e i file
• Eseguire e servire l'applicazione
• Mostrare dati utilizzando interpolazione ed espressioni

Componenti

• Comprendere il ruolo dei componenti in Angular 17
• Creare e utilizzare componenti
• Passare dati tra componenti utilizzando input e output
• Utilizzare gli hook del ciclo di vita dei componenti

Directive

• Comprendere la differenza tra direttive strutturali e direttive di attributo
• Creare e utilizzare direttive integrate come ngIf, ngFor, ngSwitch, ecc.
• Creare e utilizzare direttive personalizzate

Pipe

• Comprendere lo scopo delle pipe in Angular 17
• Creare e utilizzare pipe integrate come date, currency, json, ecc.
• Creare e utilizzare pipe personalizzate

Servizi

• Comprendere il ruolo dei servizi in Angular 17
• Creare e utilizzare servizi
• Iniettare dipendenze utilizzando provider

Moduli

• Comprendere il ruolo dei moduli in Angular 17
• Creare e utilizzare moduli
• Importare ed esportare moduli

Legame dei Dati (Data Binding)

• Comprendere la differenza tra data binding unidirezionale e bidirezionale
• Creare e utilizzare binding di proprietà, binding di eventi e sintassi banana-in-a-box
• Utilizzare variabili di riferimento del template

Routing

• Comprendere il ruolo del routing in Angular 17
• Creare e configurare rotte
• Navigare tra le rotte utilizzando routerLink e router.navigate()
• Utilizzare parametri di rotta, parametri di query e frammenti

Moduli (Forms)

• Comprendere la differenza tra moduli guidati da template e moduli reattivi
• Creare e validare moduli utilizzando controlli del modulo, gruppi di moduli, array di moduli, ecc.
• Utilizzare validatori integrati come required, minLength, maxLength, ecc.
• Creare e utilizzare validatori personalizzati

Client HTTP

• Comprendere il ruolo del client HTTP in Angular 17
• Creare e utilizzare richieste HTTP per comunicare con i servizi backend
• Utilizzare osservabili per gestire flussi di dati asincroni
• Utilizzare intercettori per modificare o gestire richieste o risposte HTTP

Nuovo Flusso di Controllo Dichiarativo

• Spiegare la nuova sintassi dei blocchi di controllo del template e come semplifica attività comuni come il rendering condizionale, i cicli e la gestione delle collezioni vuote
• Fornire esempi di utilizzo dei nuovi blocchi, come @if, @else, @switch, @case, @default, @for e @empty
• Confrontare la nuova sintassi con quella precedente, come *ngIf, *ngSwitch e *ngFor
• Menzionare come i nuovi blocchi di controllo supportino le applicazioni senza zona (zoneless) con segnali

Blocchi di Caricamento Differito

• Spiegare il concetto di caricamento differito e come possa migliorare le prestazioni e l'esperienza utente delle applicazioni web
• Introdurre il nuovo blocco di controllo @defer che abilita il caricamento pigro (lazy-loading) del contenuto del blocco e delle sue dipendenze
• Fornire esempi di utilizzo del blocco @defer per diversi scenari, come il caricamento di componenti, direttive, pipe, animazioni e stili
• Menzionare come il blocco @defer funzioni con la nuova API di transizione delle viste

API di Transizione delle Viste

• Spiegare lo scopo e i vantaggi dell'API di transizione delle viste, che consente agli sviluppatori di personalizzare le animazioni e le transizioni tra le viste
• Introdurre la nuova direttiva withViewTransitions che abilita l'uso dell'API di transizione delle viste
• Fornire esempi di utilizzo della direttiva withViewTransitions con diversi tipi di transizione, come dissolvenza, scivolamento, zoom e rotazione
• Menzionare come l'API di transizione delle viste funzioni con il router di Angular e la cronologia del browser

Altre Funzionalità e Miglioramenti

• Riassumere brevemente alcune delle altre funzionalità e miglioramenti offerti da Angular 17, come:
• Supporto per la trasmissione di @Component.styles come stringa
• Il codice delle animazioni di Angular è a carico pigro (lazy-loadable)
• Supporto per TypeScript 5.2
• L'API di base dei segnali (signals) è ora stabile
• Il supporto per Node.js v16 è stato rimosso e la versione minima supportata è v18.13.0
• Esbuild sarà il builder predefinito e il server di sviluppo predefinito utilizzerà Vite