Corso Angular in italiano

Corso Angular

Angular è una piattaforma e un framework per costruire applicazioni web a pagina singola (SPA) usando HTML e TypeScript. È sviluppato e mantenuto da Google.

Perché scegliere Angular?

• 🏗️ Framework completo: routing, form, HTTP e testing già inclusi
• 📐 Struttura solida: ideale per applicazioni grandi ed enterprise
• 🔷 TypeScript: tipizzazione statica che previene molti errori
• ⚡ Reattività moderna: con i Signals e il change detection ottimizzato

Un componente Angular

Angular usa TypeScript e si compila con la Angular CLI. Nel pannello laterale trovi i link per provare il codice online su StackBlitz.

Introduzione ad Angular

Angular è stato creato da Google nel 2016 (la riscrittura completa di AngularJS del 2010). Oggi è uno dei framework frontend più usati nelle grandi aziende.

Concetti fondamentali

• Componenti: i mattoni dell'interfaccia utente
• Template: l'HTML con la sintassi Angular
• Direttive: estendono l'HTML con comportamenti
• Servizi: logica riutilizzabile e condivisa
• Dependency Injection: gestione automatica delle dipendenze
• Moduli / Standalone: organizzazione del codice

Angular vs AngularJS

Prerequisiti

• Conoscenza di HTML e CSS
• Basi di JavaScript e TypeScript
• Concetti di programmazione a oggetti

Iniziare con Angular

Per sviluppare con Angular servono Node.js e la Angular CLI.

Installazione

Crea un nuovo progetto

Il comando ng serve avvia il server di sviluppo su http://localhost:4200 con ricarica automatica.

Struttura del progetto

La Prima App Angular

Creiamo un semplice componente che mostra un saluto dinamico.

Il componente

Il punto di ingresso (main.ts)

Standalone Components

Dalle versioni recenti, Angular usa i componenti standalone: non serve più dichiararli in un NgModule. Si importano direttamente dove servono, semplificando la struttura del progetto.

Template in Angular

Il template è l'HTML del componente arricchito con la sintassi Angular.

Interpolazione

Template inline vs file esterno

Espressioni nei template

Nei template puoi usare espressioni, ma non istruzioni complesse:

Componenti Angular

I componenti sono i blocchi fondamentali di un'app Angular. Ognuno controlla una porzione di schermo.

Anatomia di un componente

Usare un componente in un altro

Generare un componente con la CLI

Data Binding in Angular

Il data binding sincronizza i dati tra la classe del componente e il template. Angular offre quattro tipi.

1. Interpolazione (classe → template)

2. Property binding (classe → template)

3. Event binding (template → classe)

4. Two-way binding (bidirezionale)

La sintassi [(ngModel)] è chiamata "banana in a box" 🍌📦: combina property binding [ ] ed event binding ( ).

Direttive Angular

Le direttive estendono o modificano gli elementi HTML. Ci sono tre tipi.

Direttive strutturali (cambiano il DOM)

Direttive di attributo (cambiano l'aspetto)

Direttive personalizzate

Eventi in Angular

Angular gestisce gli eventi del DOM con la sintassi event binding (evento).

Eventi comuni

L'oggetto $event

Key events specifici

Rendering Condizionale

Angular permette di mostrare contenuto in base a condizioni.

*ngIf

*ngIf con else

Nuovo control flow @if (Angular 17+)

[hidden] vs *ngIf

Liste in Angular

Per renderizzare liste si usa la direttiva *ngFor.

*ngFor di base

Con indice e variabili

trackBy per le performance

Nuovo control flow @for (Angular 17+)

Form in Angular

Angular offre due approcci ai form: Template-driven e Reactive.

Template-driven (con ngModel)

Reactive Forms (più potenti)

Usa i Reactive Forms per form complessi con validazione avanzata.

Routing in Angular

Il Router gestisce la navigazione tra le viste in una SPA.

Configurazione delle rotte

Router outlet e link

Navigazione da codice

Leggere i parametri

Servizi e Dependency Injection

I servizi contengono logica riutilizzabile (es. accesso ai dati). La Dependency Injection (DI) li fornisce automaticamente ai componenti.

Creare un servizio

Iniettare un servizio in un componente

Generare un servizio con la CLI

HTTP Client in Angular

L'HttpClient permette di comunicare con API e server remoti.

Configurazione (main.ts)

Richiesta GET

POST, PUT, DELETE

Le richieste HTTP restituiscono Observable (RxJS): ci si iscrive con .subscribe().

Pipe in Angular

Le pipe trasformano i dati direttamente nel template, con la sintassi valore | pipe.

Pipe integrate

Concatenare pipe

Pipe personalizzata

Lifecycle Hooks

I lifecycle hooks sono metodi chiamati da Angular in momenti precisi della vita del componente.

I principali hook

Esempio

ngOnInit è l'hook più usato: è il posto giusto per caricare i dati iniziali (es. chiamate HTTP).

Styling in Angular

Angular incapsula gli stili: i CSS di un componente valgono solo per quel componente.

Stili del componente

File di stile esterno

Binding dinamico di classi e stili

View Encapsulation

Per impostazione predefinita Angular usa ViewEncapsulation.Emulated: aggiunge attributi unici per isolare i CSS, evitando conflitti tra componenti.

App Bootstrap

Il bootstrap è il processo che avvia l'applicazione Angular.

main.ts — il punto di ingresso

app.config.ts — configurazione

index.html

Con i componenti standalone, bootstrapApplication() ha sostituito il vecchio approccio basato su NgModule e platformBrowserDynamic().

Control Flow (Angular 17+)

Dalla versione 17, Angular introduce un nuovo control flow integrato nel template, più leggibile delle direttive *ngIf e *ngFor.

@if / @else

@for

L'espressione track è obbligatoria e migliora le performance.

@switch

Vantaggi

• Sintassi più chiara e vicina a JavaScript
• Migliori performance (non servono direttive)
• track ed @empty integrati

Signals

I Signals (Angular 16+) sono il nuovo sistema di reattività: contenitori di valori che notificano automaticamente i cambiamenti.

Creare e leggere un signal

Signal in un componente

Computed signals

I Signals rendono il change detection molto più efficiente.

Change Detection

Il change detection è il meccanismo con cui Angular aggiorna il DOM quando i dati cambiano.

Come funziona

Angular controlla i componenti e, se rileva cambiamenti nei dati, aggiorna la vista. Di default usa la strategia Default, che controlla tutto l'albero dei componenti.

Strategia OnPush

Con OnPush, Angular controlla il componente solo quando:

• Cambia un riferimento di un @Input
• Si verifica un evento nel componente
• Cambia un Signal usato nel template

Controllo manuale

OnPush + Signals è la combinazione consigliata per le massime performance.

Componenti Dinamici

I componenti dinamici vengono creati e inseriti a runtime, non in modo statico nel template.

Con NgComponentOutlet

Con ViewContainerRef

Utili per modali, widget configurabili e contenuti caricati in base ai dati.

Dependency Injection Avanzata

La DI di Angular è molto flessibile e supporta token, provider personalizzati e gerarchie.

InjectionToken

Tipi di provider

Iniettare con inject()

DI gerarchica

Un provider definito in un componente è disponibile solo per quel componente e i suoi figli, sovrascrivendo eventuali provider di livello superiore.

Router Avanzato

Funzionalità avanzate del Router per app complesse.

Lazy loading

Il lazy loading carica il codice solo quando serve, riducendo il bundle iniziale.

Route Guards

Resolver (precarica dati)

Query params

HTTP Interceptors

Gli interceptor intercettano tutte le richieste e risposte HTTP, ideali per autenticazione, logging e gestione errori.

Creare un interceptor (funzionale)

Registrare l'interceptor

Interceptor per gestione errori

Gli interceptor si eseguono in ordine per ogni richiesta uscente.

Form Avanzati

I Reactive Forms permettono validazione complessa, form dinamici e controllo totale.

FormBuilder e validatori

Mostrare gli errori

FormArray (campi dinamici)

Validatore personalizzato

State Management

La gestione dello stato centralizza i dati condivisi tra componenti.

Stato con un servizio + Signals

Usare lo store

Librerie dedicate

Per app molto grandi si usano librerie come NgRx (pattern Redux) o NGXS. Per la maggior parte dei casi, un servizio con Signals è sufficiente.

Animazioni in Angular

Angular offre un sistema di animazioni dichiarativo basato su stati e transizioni.

Configurazione

Definire un'animazione

Animazioni di lista

Con query() e stagger() si animano gli elementi di una lista in sequenza, per effetti fluidi all'ingresso.

Testing in Angular

Angular include strumenti per i test: Jasmine (framework) e Karma o Vitest (test runner).

Test di un componente

Test di un servizio

Eseguire i test

Si usano anche end-to-end test con strumenti come Playwright o Cypress.

Sicurezza in Angular

Angular include protezioni integrate contro le vulnerabilità web più comuni.

Protezione XSS automatica

innerHTML e sanitizzazione

Buone pratiche di sicurezza

• ✅ Non usare bypassSecurityTrust... su input non fidati
• ✅ Validare sempre i dati lato server (non solo nel client)
• ✅ Usare HttpClient che protegge da XSRF/CSRF
• ✅ Usare la Content Security Policy (CSP)
• ✅ Mantenere Angular e le dipendenze aggiornate

Protezione XSRF

SSR e Hydration

Il Server-Side Rendering (SSR) genera l'HTML sul server, migliorando SEO e velocità di caricamento iniziale.

Aggiungere SSR a un progetto

Questo configura il rendering lato server con un server Express.

Vantaggi dell'SSR

• 🔍 SEO migliore: i motori di ricerca vedono l'HTML completo
• ⚡ First Contentful Paint più veloce
• 📱 Performance su dispositivi lenti

Hydration

La hydration è il processo con cui Angular "riprende" sul client l'HTML generato dal server, senza ricostruirlo da zero.

Incremental Hydration (Angular 19+)

L'SSR con hydration combina i vantaggi del rendering server (SEO, velocità) con l'interattività di una SPA.

Conclusione

Complimenti! 🎉 Hai completato il corso di Angular completo e gratuito in italiano: dai componenti e il data binding, al routing e i servizi, fino a RxJS, lazy loading, SSR e le ultime funzionalità di Angular 17+. Ora hai le basi per costruire applicazioni enterprise-grade.

Il modo migliore per consolidare Angular è costruire un progetto reale: crea una SPA con routing, chiamate HTTP e gestione dello stato. Rifai gli esempi, esplora la documentazione ufficiale e sperimenta con Angular Material.

E ora?

Hai già una solida base in TypeScript: il passo successivo naturale è approfondire React per confrontare i due approcci ai framework moderni, oppure tornare a esplorare tutti gli altri corsi disponibili. Se vuoi un percorso guidato personalizzato, posso seguirti con ripetizioni di informatica in presenza a Roma.