Corso di front-end con Angular

Lezione 1 • Moduli Angular e avvio dell'applicazione

Spiega gli NgModule, l'AppModule radice e come Angular avvia l'applicazione. Fornisce il contesto strutturale necessario prima di costruire i componenti.

Lezione 2 • Elementi essenziali di TypeScript per Angular

Introduce tipi, interfacce e decoratori TypeScript necessari per scrivere codice Angular con sicurezza. Collega la conoscenza di JavaScript all'ecosistema tipizzato di Angular.

Lezione 3 • Introduzione al framework Angular

Illustra il ruolo di Angular nello sviluppo front-end moderno e la sua architettura ispirata al pattern MVC. Stabilisce la base concettuale per tutti gli argomenti successivi del framework.

Lezione 4 • Configurazione dell'ambiente di sviluppo

Installa e configura Node.js, npm e l'Angular CLI. Garantisce che ogni studente disponga di uno spazio di lavoro locale coerente e riproducibile.

Lezione 1 • Direttive strutturali integrate

Applica *ngIf, *ngFor e *ngSwitch per controllare dinamicamente la struttura del DOM. Dimostra come le direttive estendono l'espressività dei template.

Lezione 2 • Property binding ed event binding

Insegna il flusso di dati unidirezionale tramite property binding e la gestione degli eventi utente tramite event binding. Collega la logica del componente agli elementi del DOM e alle interazioni dell'utente.

Lezione 3 • Sintassi dei template ed espressioni

Illustra il linguaggio delle espressioni dei template di Angular, la navigazione sicura e le variabili di riferimento del template. Consente il rendering dinamico dei contenuti all'interno delle viste dei componenti.

Lezione 4 • Hook del ciclo di vita dei componenti

Esplora la sequenza completa degli hook del ciclo di vita, da ngOnInit a ngOnDestroy. Insegna quando e perché utilizzare ciascun hook per l'inizializzazione e la pulizia.

Lezione 1 • Query ViewChild e ContentChild

Accede alle istanze dei componenti figli e al contenuto proiettato a livello di codice tramite query. Consente un coordinamento avanzato dei componenti oltre il binding dei template.

Lezione 2 • Comunicazione padre-figlio con @Input

Utilizza @Input per passare i dati verso il basso nell'albero dei componenti e convalida l'input con i setter. Stabilisce il modello primario di flusso dati verso il basso in Angular.

Lezione 3 • Costruzione di direttive strutturali personalizzate

Implementa direttive strutturali utilizzando TemplateRef e ViewContainerRef per manipolare il DOM. Estende la capacità degli studenti di creare logica di layout riutilizzabile.

Lezione 4 • Costruzione di direttive di attributo personalizzate

Crea direttive che modificano l'aspetto o il comportamento dell'elemento host senza cambiare la struttura del DOM. Rafforza il modello di direttiva introdotto nel Capitolo 2.

Lezione 1 • Creazione e fornitura di servizi Angular

Genera servizi con la CLI e li registra a livello di modulo, componente o radice. Stabilisce il livello di servizio come sede della logica condivisa.

Lezione 2 • Client HTTP e integrazione API REST

Configura HttpClientModule ed esegue richieste GET, POST, PUT e DELETE. Collega il livello di servizio a fonti di dati back-end reali.

Lezione 3 • Gestione degli errori e intercettori HTTP

Implementa la gestione globale degli errori con catchError e la trasformazione di richieste/risposte con gli intercettori. Produce modelli di comunicazione HTTP pronti per la produzione.

Lezione 4 • Approfondimento sulla dependency injection

Esplora la gerarchia DI, i token di iniezione e i tipi di provider. Consente un controllo granulare su come le dipendenze vengono risolte nell'app.

Lezione 1 • Route guard e controllo degli accessi

Implementa le guard CanActivate, CanDeactivate e CanLoad per proteggere le route. Integra autenticazione e autorizzazione nel livello di navigazione.

Lezione 2 • Lazy loading e route resolver

Suddivide l'app in moduli di funzionalità caricati su richiesta e pre-recupera i dati con i resolver. Migliora le prestazioni di caricamento iniziale e l'esperienza utente.

Lezione 3 • Route nidificate e outlet con nome

Struttura le route figlie sotto le route padre e utilizza gli outlet con nome per viste ausiliarie. Supporta requisiti di layout complessi in applicazioni di grandi dimensioni.

Lezione 4 • Configurazione del router e navigazione di base

Configura il RouterModule con le definizioni delle route e aggiunge router-outlet e routerLink. Stabilisce le fondamenta per tutte le funzionalità di navigazione.

Lezione 1 • Form dinamici con FormArray

Utilizza FormArray per aggiungere e rimuovere controlli di form a runtime per dati di lunghezza variabile. Gestisce scenari reali come voci ripetute.

Lezione 2 • Validatori e convalida personalizzata

Applica validatori sincroni e asincroni e crea funzioni di convalida personalizzate riutilizzabili. Garantisce l'integrità dei dati prima dell'invio.

Lezione 3 • Invio dei form e gestione dello stato

Gestisce l'invio, il reset e lo stato dirty/touched del form per offrire un'UX curata. Collega i dati del form alle chiamate di servizio introdotte nel Capitolo 4.

Lezione 4 • Form template-driven

Utilizza ngForm, ngModel e validatori integrati per costruire form in modo dichiarativo nel template. Introduce i concetti dei form con un overhead TypeScript minimo.

Lezione 1 • NgRx Entity e DevTools

Semplifica la gestione delle raccolte con NgRx Entity e ispeziona lo stato con Redux DevTools. Accelera lo sviluppo e il debug di funzionalità con uso intensivo dello store.

Lezione 2 • Introduzione allo Store NgRx

Installa NgRx e definisce azioni, reducer e lo store per una sezione di funzionalità. Stabilisce il pattern Redux all'interno dell'ecosistema Angular.

Lezione 3 • Stato basato su servizi con BehaviorSubject

Archivia e condivide lo stato tra i componenti utilizzando BehaviorSubject in un servizio. Fornisce una soluzione di stato leggera prima di introdurre NgRx.

Lezione 4 • NgRx Effects per effetti collaterali

Gestisce operazioni asincrone come le chiamate HTTP al di fuori dei reducer utilizzando NgRx Effects. Mantiene puri i reducer e centralizza la logica degli effetti collaterali.

Lezione 1 • Strategie di deployment e integrazione CI/CD

Distribuisce le build Angular su hosting statico e integra pipeline automatizzate per la consegna continua. Chiude il ciclo di vita dello sviluppo dal codice alla produzione.

Lezione 2 • Unit testing di componenti e servizi

Scrive unit test con Jasmine e TestBed per componenti, servizi e pipe. Convalida le singole unità in isolamento prima dell'integrazione.

Lezione 3 • Ottimizzazione del bundle e configurazione della build

Configura build di produzione, tree shaking e caricamento differenziale per dimensioni ottimali del bundle. Prepara l'app per i vincoli di deployment nel mondo reale.

Lezione 4 • Test end-to-end con Cypress

Automatizza il test dei flussi utente con Cypress per convalidare il comportamento completo dell'applicazione. Complementa gli unit test con scenari realistici basati sul browser.