Corso di sviluppo Angular

Lezione 1 • Generare il primo progetto Angular

Utilizza la Angular CLI per generare un progetto, esplorare la sua struttura file ed eseguire il server di sviluppo. Acquisisci familiarità con il layout dell'area di lavoro utilizzato durante il corso.

Lezione 2 • Configurare l'ambiente di sviluppo

Installa Node.js, npm e la Angular CLI per preparare un'area di lavoro locale. Abilita direttamente la creazione di progetti trattata nella sezione successiva.

Lezione 3 • Essenziali di TypeScript per Angular

Introduce i tipi TypeScript, le interfacce, i decoratori e i moduli come utilizzati in Angular. Garantisce che gli studenti possano leggere e scrivere codice Angular con sicurezza dal secondo capitolo in poi.

Lezione 1 • Anatomia di un componente Angular

Scompone il decoratore del componente, la classe, il template e gli stili nei loro ruoli. Stabilisce il modello mentale per ogni elemento UI costruito in questo corso.

Lezione 2 • Direttive di attributo e pipe

Applica le direttive di attributo integrate come ngClass e ngStyle, e trasforma i dati con le pipe integrate. Completa le capacità del template prima di passare ai servizi.

Lezione 3 • Direttive strutturali integrate

Tratta ngIf, ngFor e ngSwitch per il rendering condizionale e di liste nei template. Abilita la visualizzazione dinamica dei contenuti essenziale per UI reali.

Lezione 4 • Sintassi del template e data binding

Insegna l'interpolazione, il property binding, l'event binding e il two-way binding con ngModel. Connette la logica del componente al DOM per UI interattive.

Lezione 1 • Approfondimento sulla dependency injection

Esplora la gerarchia dell'injector di Angular, i token del provider e lo scope di injection. Consente un controllo preciso sull'istanziazione e la condivisione dei servizi tra i moduli.

Lezione 2 • Creare e utilizzare i servizi

Genera servizi con la CLI, incapsula la logica di business e li inietta nei componenti. Dimostra il principio di singola responsabilità nell'architettura Angular.

Lezione 3 • Comprendere gli NgModule

Spiega dichiarazioni, importazioni, esportazioni e provider nei metadati di NgModule. Stabilisce il sistema di moduli che organizza ogni applicazione Angular.

Lezione 1 • Guardie di rotta e resolver

Protegge le rotte con le guardie CanActivate e CanDeactivate e precarica i dati con Resolve. Garantisce una navigazione sicura e dati pre-caricati prima del rendering del componente.

Lezione 2 • Rotte figlie e outlet con nome

Annida le rotte figlie all'interno dei moduli di funzionalità e utilizza outlet con nome per viste ausiliarie. Supporta layout complessi come dashboard con pannelli laterali.

Lezione 3 • Caricamento lazy dei moduli di funzionalità

Suddivide l'app in moduli di funzionalità caricati in modalità lazy per ridurre la dimensione iniziale del bundle. Migliora direttamente le metriche di performance trattate nei capitoli avanzati.

Lezione 4 • Parametri di rotta e stringhe di query

Legge i segmenti di rotta dinamici e i parametri di query opzionali utilizzando ActivatedRoute. Abilita viste di dettaglio e elenchi filtrati guidati dallo stato dell'URL.

Lezione 1 • Async pipe e integrazione con il template

Si sottoscrive agli observable direttamente nei template utilizzando la async pipe, eliminando la gestione manuale delle sottoscrizioni. Riduce il codice boilerplate e previene i memory leak nei componenti.

Lezione 2 • Subject e multicasting

Utilizza Subject, BehaviorSubject e ReplaySubject per inviare valori in multicast a più sottoscrittori. Abilita pattern di stato condiviso utilizzati nella gestione dello stato basata su servizi.

Lezione 3 • Operatori RxJS fondamentali

Applica map, filter, switchMap, mergeMap e catchError per trasformare e combinare flussi. Fornisce agli studenti gli strumenti per gestire i requisiti reali di trasformazione dei dati.

Lezione 1 • Simulare HTTP nello sviluppo

Utilizza HttpClientTestingModule e API web in-memory per simulare le risposte del backend durante lo sviluppo. Disaccoppia l'avanzamento del frontend dalla disponibilità del backend.

Lezione 2 • Gestione degli errori e strategie di retry

Gestisce gli errori HTTP con gli operatori catchError, retry e retryWhen per chiamate API resilienti. Garantisce un degrado graduale e un feedback di errore facile da usare.

Lezione 3 • Intercettori HTTP

Crea intercettori per allegare token di autenticazione, registrare richieste e trasformare risposte a livello globale. Centralizza le preoccupazioni trasversali HTTP senza modificare le singole chiamate di servizio.

Lezione 4 • Configurazione di HttpClient e richieste GET

Importa HttpClientModule, inietta HttpClient ed esegue richieste GET tipizzate. Stabilisce la base per tutte le comunicazioni con il backend nell'applicazione.

Lezione 1 • Form dinamici con FormArray

Gestisce liste di controlli di lunghezza variabile utilizzando FormArray per scenari di form dinamici. Supporta casi d'uso come l'aggiunta di più indirizzi o voci.

Lezione 2 • Fondamenti dei form reattivi

Costruisce form in modo programmatico utilizzando FormControl, FormGroup e FormBuilder. Abilita una logica di form scalabile e testabile, guidata interamente dalla classe del componente.

Lezione 3 • UX e accessibilità dei form

Applica gli stati touched, dirty e pristine per controllare la visibilità degli errori e migliorare l'esperienza utente dei form. Garantisce che i form soddisfino gli standard di accessibilità con attributi ARIA appropriati.

Lezione 4 • Validatori personalizzati e validazione asincrona

Scrive validatori personalizzati sincroni e asincroni per controlli incrociati tra campi e lato server. Estende il sistema di validazione di Angular per soddisfare regole di business complesse.

Lezione 1 • Fondamenti di gestione dello stato

Implementa la gestione dello stato basata su servizi con BehaviorSubject e introduce i concetti dello store NgRx per uno stato scalabile. Prepara gli studenti a scegliere la giusta strategia di stato in base alla complessità dell'app.

Lezione 2 • Direttive e pipe personalizzati

Costruisce direttive di attributo riutilizzabili con HostListener e HostBinding, e crea pipe personalizzate pure e impure. Estende le capacità del template di Angular per esigenze specifiche del dominio.

Lezione 3 • Proiezione del contenuto e componenti dinamici

Utilizza ng-content per la proiezione a slot singolo e multiplo e crea componenti dinamicamente a runtime. Abilita componenti di libreria UI altamente flessibili e riutilizzabili.

Lezione 4 • Strategie di change detection

Confronta la change detection Default e OnPush e applica OnPush con dati immutabili e observable. Riduce significativamente i re-rendering non necessari in grandi alberi di componenti.