This content is available in Italian only
Content:
Language:
Mastering Angular Components
Un video corso di approfondimento sulla creazione di componenti "riusabili" e UI dinamiche
Realizzato con Angular v.19 (2025)
In questo corso:
1
Organizza e progetta applicazioni "component-based"
2
Crea componenti riutilizzabili e UI dinamiche
3
Applica i pattern, le strategie e le API più recenti del framework
4
Utilizza TypeScript in modo intensivo per creare componenti robusti e generici
5
Impara ad integrare librerie di terze parti "non-Angular"
6
Presenta, documenta e scrivi i test di Componenti con Storybook e Cypress
PROMO: in regalo il mini corso "Angular Migration Guide"
# A chi è rivolto
Il corso parte dai concetti base e progressivamente affronta concetti sempre più complessi. È quindi adatto a:
-
Angular Beginners: un corso fondamentale per chi utilizza Angular da poco tempo e vuole fare un salto di qualità in brevissimo tempo ottenendo delle competenze sopra la media.
-
Angular Experts: sviluppatori che giù utilizzano Angular ma desiderano aggiornarsi alle ultimissime versioni del framework, apprendere nuovi pattern e sicuramente qualche nuovo trick.
-
Sei già studente del mio corso Angular Evolution : questo corso è perfetto per proseguire il tuo percorso di studio e approfondimento sul framework. Se ti è piaciuto il video corso "Angular Evolution", questo lo amerai!
ARGOMENTI
# Components Fundamentals v.19
Nei primi capitoli analizziamo le più recenti API del framework (v.19) per la creazione di componenti solidi e allo stesso tempo flessibili tramite la creazione di un'applicazione CRUD.
- Utilizza le più recenti API del framework creando applicazioni Angular Zoneless di ultima generazione
- Signals: Signal Inputs,
computed,effecte i più recentilinkedSignal. - Comunicazione Lato Server: crea una semplice applicazione con le tipiche operazioni CRUD
- Reactive e Template-Driven Forms: utilizza i Reactive Forms e analizza le differenze con i Template Forms in connubio con le più recenti API:
input,outputemodel. - Gestione stato e side effect tramite servizi e il meccanismo di Dependency Injection
- Control Flow Syntax: applica le più recenti sintassi per creare template dinamici e migliorare leggibilità e performance.
- e molto altro...
L'obiettivo di questa parte del corso è quello di fornire una veloce panoramica sulle principali funzionalità offerte dal framework sfruttando le API più recenti ed essere pronti per la parte successiva in cui si effettua un totale refactoring.
# Refactoring
Per creare applicazioni davvero professionali e manutenibili, non basta scrivere codice funzionante!
-
Refactoring Completo: comprendi il processo di refactoring di un progetto, applicando un approccio orientato alla qualità e creando codice leggibile, riutilizzabile e manutenibile
-
Isolamento dei Componenti: impara a separare componenti presentazionali da quelli che invece hanno il compito di gestire stato e side effect
-
Nuovi Pattern e Best Practices: , segui le più recenti best practices e pattern per l'organizzazione di UI (User Interface) e business logic
-
Prestazioni: crea componenti performanti che utilizzano la Change Detection
onPushe sviluppa applicazioni Angular Zoneless di prossima generazione
# Reusable Components & Dynamic UI
Impara a progettare componenti riutilizzabili e ben isolati.
Partiamo da semplici componenti e passo dopo passo gestiamo casistiche sempre più complesse e particolari, non solo con lo scopo di creare codice riutilizzabile ma anche quello di usare le più recenti API del framework e comprenderne il funzionamento.
- Esploriamo l’importanza della separazione dei compiti e del design modulare, creando componenti con interfacce semplici e intuitive.
- Componenti compositi, generici e riutilizzabili (tipici di ogni UIKIT): Card, TabBar, Placeholders, Maps, Accordion, Typography, Charts e molto altro.
- Utilizziamo i pattern e le funzionalità più recenti del framework: Signal inputs,
computed,effect,linkedSignal,modele binding bidirezionale,resourceAPI (experimental in Angular v.19) e molte altre API - Creiamo istanze di componenti a runtime e generiamo UI dinamiche, sfruttando molte API meno note come
ViewContainerRef,ngComponentOutlet,ng-templateengTemplateOutlet. - Signal Queries: gestire DOM e la comunicazione tra componenti con
viewChild,viewChildrenecontentChildren
# 3rd Party Integration
Integra librerie di terze parti "non Angular", sviluppate
originariamente in JavaScript o TypeScript.
- Esempi di integrazione di librerie come ThreeJS, ChartJS, e Mappe interattive: il processo potrà essere poi facilmente replicato con qualunque altra libreria installata con
npmo tramite CDN. - Effettuiamo il porting di librerie JavaScript in progetti Angular con un processo step by step, partendo dalla documentazione ufficiale e risolvendo passo passo i diversi problemi che si presentano durante il processo di integrazione
- Creiamo component wrapper per isolare le librerie e poterle riutilizzare facilmente in progetti Angular
- Risolviamo problematiche dovute all'integrazione di librerie originariamente non scritte per Angular, alcune delle quali, non tipizzate direttamente dai maintainer.
# Angular & Storybook
Un intero capitolo dedicato a Storybook, strumento fantastico per:
1
Presentare i nostri componenti in tutte le loro varianti
2
Documentare componenti con Storybook, CompoDoc e JSDoc
3
Simulare azioni e interazioni dell'utente
4
Testare componenti (utilizzando Jest e Testing Library)
Uno strumento fantastico per sviluppatori, designer e utilizzatori dei componenti.
Guarda il video introduttivo:
# Component Testing con Cypress
Anche se i test non sono il focus principale del corso, daremo un po' di spazio anche al test di componenti isolati in Cypress:
1
Creare test in isolamento
2
Testare input e content projection
3
Utilizzo di "spie" per il test di eventi
4
Mocking
Se sei interessato ai test E2E e al component testing in Cypress potrebbe interessarti il mio video corso in italiano (del 2024) interamente dedicato all'argomento e disponibile sul mio sito web personale
# TypeScript Avanzato
Per creare componenti flessibili, generici e allo stesso tempo robusti, faremo ampio uso di TypeScript:
1
Union Types, Literal Types e moltissime "utility types"
2
Type Guards, Narrowing, Type Predicate e discriminated Unions
3
Generics Types
4
Info su Strict Mode, gestione
null, undefined, casting as vs satisfies, diversi trick e casi d'uso5
E moltissime altre funzionalità fornite dalle più recenti versioni del linguaggio
# Aggiornato alla versione 19 di Angular
Il corso è stato scritto e registrato sfruttando le API più recenti del framework (v.19) uscite tra dicembre 2024 e gennaio 2025, ma riceverà numerosi aggiornamenti con:
1
Nuovi esempi di componenti, casi d'uso e pattern
2
Nuovi Tools e strumenti
3
Aggiornamenti nuove API
# Interactive Code PlayGrounds
Ogni video è corredato da code playground interattivi grazie ai quali puoi immediatamente provare l'esempio senza la necessità di creare un progetto in locale.
In pochi secondi potrai sperimentare, creare varianti dell'esercizio o salvarti il codice sorgente per poterlo consultare successivamente o, semplicemente, per conservare un elenco di snippet riutilizzabili che potrai sfruttare in futuro.
<Practice>
Avvia il playground cliccando su Play e clicca su Preview per vedere il risultato
src/app.component.ts
src/shared/title.component.ts
Click or in the editor to practice
# BONUS: Angular Migration Guide
I primi studenti del corso riceveranno in regalo il mini video corso "Angular Migration Guide ".
1
Una guida step by step per migrare progetti modulari (
ngModule) creati in Angular v.16 a Standalone applications (v.19)2
Utilizzare i tool di migrazione della CLI
3
Integra le più recenti API del framework
4
da applicazioni ZoneJS a Zoneless
# Requisiti
Per comprendere i contenuti di questo corso è preferibile avere già una minima conoscenza del framework e delle sue recenti API:
1
Gestione template Angular dinamici e nuova Control Flow Syntax:
@if, @for e @switch2
Conoscenza base di Signals, computed ed effects
3
Essere in grado di creare un servizio
forRoot in Angular e utilizzare il funzionamento base del motore di Dependency Injection4
Comunicazione lato server con
HttpClientNel corso facciamo un utilizzo intenso di TypeScript.
Perciò potrebbe interessarti anche il nostro cookbook su TypeScript in cui si approfondisce il linguaggio.
Non hai mai utilizzato Angular?
Se non hai mai utilizzato Angular è probabile che questo non sia il corso più adatto da cui partire.
-
Potresti valutare l'acquisto del mio video corso Angular Evolution , in cui partiamo dalle fondamenta del framework utilizzando le funzionalità più recenti. Il corso è stato registrato utilizzando Angular v.17 (aggiornato alla v.19), in italiano, ed è disponibile sul mio sito personale nella mia precedente piattaforma di erogazione video corsi.
-
Iniziare a studiare dal nostro libro online di esercizi sul framework, Angular Cookbook: the basics , disponibile gratuitamente su questo sito e aggiornato alla versione 19 del framework. Troverai molti snippet interattivi e consigli utili per apprendere le basi del framework. Disponibile in lingua inglese.
8.5+
Ore di
lezione
lezione
90+
Video
Tutorials
Tutorials
100+
Interactive
Snippets
Snippets
Chapters
Component Fundamentals (53:27)
Le basi per la creazione di componenti: signal input, output, content projection
Creare un'applicazione CRUD (40:11)
Impara ad organizzare le tue view in Container e Presentational components
Refactoring (38:37)
Approccio component based, gestione stato, ottimizzazioni, best practices
Reusable Components (2:48:11)
Esploriamo le più recenti API del framework creando diversi componenti riutilizzabili
Signal Queries (21:35)
Reference agli elementi del DOM e a componenti
Dynamic Components (01:08:11)
Creare istanze di componenti in modo dinamico
3rd Party Integration (71:17)
Sviluppo di componenti custom con API di terze parti
Angular & Storybook (43:05)
Presentare, documentare e testare componenti
Component Testing in Cypress (21:40)
Testare componenti in isolamento
Fabio Biondi
Fabio Biondi is Google Developer Expert in Angular and Microsoft MVP.
He is a freelance Front-End trainer, speaker, content creator and community manager
He is a freelance Front-End trainer, speaker, content creator and community manager
# Vuoi saperne di più sul corso?
Erano anni che avevo nel cassetto questo video corso!
Finora avevo svolto parte di queste lezioni solo durante le mie sessioni di formazione dal vivo / remoto (fin dai tempi di Angular 6-7 e costantemente aggiornato alle ultime release) e già da diversi mesi pensavo di proporre questo materiale in un nuovo video corso.
Ho atteso l'uscita di Angular v.19, così ho avuto l'occasione di riscriverlo totalmente usando le più recenti funzionalità del framework ed essere certo che il materiale prodotto fosse valido per un discreto periodo di tempo anche dopo la pubblicazione.
Tra l'altro, io stesso ho imparato molto durante la preparazione del materiale: nuovi pattern, API e trick che ovviamente ho poi inserito al suo interno.
Dopo anni di formazione e gestione di community tech, ho capito che moltissimi sviluppatori, soprattutto principianti, si fermano alle basi e:
1
non si rendono minimamente conto di quante funzionalità un framework come Angular possa offrire
2
scrivono codice di scarsa qualità, poco flessibile e decisamente non manutenibile
Ho quindi voluto creare un corso per permettere a chiunque di fare un salto di qualità notevole sull'utilizzo di Angular, soprattutto se paragonato alla conoscenza media.
Centinaia di studenti hanno apprezzato i miei video corsi su Angular, dal primo "Angular Fundamentals" al più recente "Angular Evolution", e anche sui corsi più avanzati, RxJS ed NGRX, ho ricevuto moltissimi feedback positivi.
Era quindi giunto il momento di sfornare qualcosa di nuovo che potesse aiutare chiunque a migliorare le proprie competenze sul framework e applicarle subito nei propri progetti.
Ho finalmente una nuova piattaforma dove posso pubblicare lezioni con un mix di video, informazioni tecniche e soprattutto inserire snippet con playground interattivi, tramite i quali potrai sperimentare e provare il codice direttamente sotto ogni video.
Non solo coding...
Nel corso troverai moltissimi trick che ho imparato in questi anni (e negli ultimi mesi).
Ci tengo a sottolineare però che non faremo solo uso di API ma:
1
analizziamo sia casi d'uso comuni che molto particolari nella creazione di componenti tipici di ogni UIKIT
2
impariamo ad astrarre e creare codice riutilizzabile
3
vediamo come approcciarsi alla gestione di errori e problemi che si presentano quotidianamente e li risolviamo passo passo
4
effettuiamo il refactoring di parti di applicazioni
5
documentiamo e testiamo componenti
6
impariamo a sfruttare TypeScript, scrivendo codice solido e allo stesso tempo flessibile
ALCUNI ESEMPI
Di seguito alcuni degli esempi che troverai all'interno del video corso.
Tuttavia quello che vedrai è solo il risultato finale.
La parte più interessate è la comprensione di come si sia arrivati a questi risultati.
La creazione di decine di componenti è infatti solo la scusa per apprendere pattern, strategie e API (meno note) del framework, in modo da poter applicare le conoscenze acquisite nei propri progetti in casi d'uso differenti e anche più complessi.
# Component Based Approach
Imparerai ad organizzare le tue pagine in componenti creando un'applicazione CRUD completa sfruttando le più recenti API del framework:
- Signals Inputs e Resource API: sviluppo più reattivo ed efficiente con le più recenti API dei signals:
signal,input,computed,linkedSignal,model,effect - Reactive e Template-Driven Forms: utilizziamo i Reactive e i Template driven forms
- Control Flow Syntax: applicheremo le più recenti sintassi e direttive dei template per migliorare leggibilità e performance.
- Container vs Presenter components: impariamo ad organizzare le applicazioni con "smart" e "dumb" components.
- Dependency Injection: sfruttiamo la dependency injection e i servizi per organizzare business logic e stato applicativo.
- E molto altro ...
src/app.component.ts
# Reusable Components
Moltissimi video sono dedicati alla creazione di componenti riutilizzabili, uno degli aspetti fondamentali che è necessario padroneggiare non solo in progetti sviluppati in Angular ma con qualunque framework front-end di ultima generazione.
Progettiamo componenti flessibili, modulari e semplici da utilizzare, in grado di adattarsi a diversi contesti e requisiti di business.
Creemo componenti per la gestione del layout, typography, contenitori, mappe, placeholders e molto altro.
# Composite Components
I Composite Components rappresentano una pietra miliare nella progettazione modulare e riutilizzabile di interfacce utente complesse.
Creiamo diversi componenti composti, cioè contenitori e strutture che coordinano il funzionamento di altri componenti figli.
Questi pattern ti permetteranno di creare layout flessibili e soluzioni altamente configurabili, mantenendo al contempo un codice:
1
leggibile
2
manutenibile
3
semplice da (ri)utilizzare
src/app.component.ts
# Compound Components
I Compound Components rappresentano un pattern potente e flessibile per costruire interfacce modulabili e facili da estendere.
Grazie a questo approccio, puoi creare sistemi di UI avanzati mantenendo un’architettura solida, intuitiva e configurabile.
Metteremo in pratica questo pattern sia tramite la creazione di componenti che di direttive, analizzando pro e contro di entrambe le strategie.
# Generic Components
Progettare componenti generici e riutilizzabili, capaci di lavorare con modelli di dati differenti.
Grazie alla potenza dei Generics di TypeScript, creeremo componenti versatili che si adattano a qualsiasi tipo di dato fornendo un'API chiara e tipizzata.
1
Comprendere il ruolo dei Generics nei componenti Angular.
2
Imparare a definire proprietà e metodi generici per supportare diversi modelli di dati.
3
Creare componenti altamente riutilizzabili e configurabili.
# Build dynamic UI
Componenti flessibili e dinamici utilizzando alcune delle API più potenti di Angular, tra cui
ngComponentOutlet, ViewContainerRef e ngTemplateOutlet.Questi strumenti ci consentono di creare interfacce utente dinamiche in cui il contenuto e i comportamenti possono essere determinati a runtime.
# Signal Queries
Un capitolo interamente dedicato ai Signal Queries e alle strategie offerte dalla più recente versione di Angular per interagire con il DOM e i componenti figli.
Esploreremo strumenti come
viewChild, viewChildren, e contentChildren, mostrando come questi possano essere combinati con le nuove API reattive di Angular per costruire comportamenti avanzati come un sistema di gestione dinamica di componenti figli.Mettiamo in pratica i concetti creando **componenti wrapper per l'integrazione di librerie esterne come ThreeJS, ChartJS e Leaflet Map
# Flexible Components
Creiamo componenti il cui layout può essere stabilito dal parent tramite l'utilizzo di
ngTemplateOutlet.Esploreremo come un componente può accettare modelli esterni (
ng-template) per personalizzare il rendering degli elementi, mantenendo al contempo una struttura generica e versatile.# 3rd party integration
1
Impariamo ad integrare librerie di terze parti, scritte in vanilla JavaScript o TypeScript, in applicazioni Angular.
2
Affrontiamo passo-passo i diversi problemi di integrazione e compatibilità di librerie come ThreeJS (3D), ChartJS (Grafici) e Leaflet (Mappe Interattive)
3
Creiamo componenti riutilizzabili e wrapper di librerie per non dover necessariamente dipendere da componenti Angular di terze parti, spesso non mantenuti e aggiornati
# StoryBook: Documentare e Testare componenti
e molto altro...
Start today for free!
Create a LearnByDo.ing account for free to see all the protected content, get exclusive material, join giveaways, and use all the platform’s features
