# Introduzione
In questa lezione troverai un breve riassunto delle proprietà principali disponibili nel decoratore
@Component.La maggior parte delle funzionalità descritte saranno spesso applicate e descritte durante il corso.
Tuttavia ritengo possa risultare utile una veloce panoramica prima di iniziare il videocorso, soprattutto perché il materiale è aggiornato ad Angular 19 con riferimenti e confronti tra applicazioni ZoneJS e Zoneless.
# Requisiti
Per poter comprendere i contenuti di questo video corso è preferibile avere già una minima conoscenza del framework e della 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
HttpClientNon hai mai utilizzato Angular?
Se non hai mai utilizzato Angular forse non è il corso più adatto.
-
Potresti valutare l'acquisto del mio video corso Angular Evolution , in cui partiamo dalle fondamenta per l'utilizzo del framework sfruttando le più recenti funzionalità. Il video corso è stato registrato, in italiano, con Angular v.17 (aggiornato alla v.19) 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.
Nel corso facciamo un utilizzo intenso di TypeScript.
Perciò potrebbe interessarti anche il nostro cookbook su TypeScript in cui si approfondisce il linguaggio.
# 1. Component selector
Uno dei punti di forza di Angular è la capacità di poter utilizzare una vasta gamma di selettori per i componenti.
L'utilizzo dei componenti e di specifici selettori non solo incrementano la modularità del nostro codice, ma rendono anche l’applicazione più mantenibile grazie ad un codice più espressivo.
Con i selettori, Angular ci permette di decidere con precisione dove e come i nostri componenti possono essere integrati.
Ecco alcuni tipi di selettori chiave che ogni sviluppatore Angular dovrebbe conoscere:
- Elemento: Istanzia il componente come elemento
- Attributo: Permette di applicare componenti come attributi HTML
- Classe: Ideale per applicare il componente in modo simile ai selettori CSS.
- Selettori Contestuali: Specifici per contesti d’uso particolari e ben definiti
- Selettori Combinati: È possibile applicare molteplici selettori per massimizzare la versatilità.
<Practice>
Sotto ogni video troverai il codice sorgente con cui potrai interagire avviando i playground interattivi tramite il tasto Play e cliccando successivamente su Preview o Both per vedere l'output.
Click or in the editor to practice
# 2. template
È possibile definire il template HTML direttamente all'interno del componente oppure in un file esterno.
Per quanto mi riguarda preferisco da sempre inserire tutto, logica, template e CSS, in un unico file per ridurre il numero di file del progetto.
Se un template HTML diventa molto lungo e poco leggibile, il mio consiglio è piuttosto quello di valutare una suddivisione in più componenti.
src/app.component.ts
PLAY
SNIPPET 1/2
src/app.component.ts
SNIPPET 2/2
src/app.component.html
# 3. Style
Esistono diversi approcci per includere i fogli di stile nei componenti Angular, alcuni dei quali disponibili solo nelle più recenti versioni del framework.
Vediamo un riepilogo delle diverse possibilità:
-
Stili Inline: Gli stili sono definiti direttamente nel decoratore del componente utilizzando una stringa.
-
Stili Inline (array): Permette di definire gli stili come array di stringhe, creando un diverso elemento HTML per ogni elemento dell'array
-
File CSS Esterno (singolo o array): Gli stili vengono definiti in un file
.cssseparato e collegati al componente tramite un array passato astyleUrlso un singolo file astyleUrl
Nel video applichiamo i vari approcci e analizziamo il risultato ottenuto ispezionando il DOM.
src/app.component.ts
src/app.component.ts
PLAY
SNIPPET 1/2
src/app.component.ts
SNIPPET 2/2
src/app.component.css
# 4. View Encapsulation
In Angular, la
ViewEncapsulation è un meccanismo per controllare come gli stili vengono applicati ai componenti:- Emulated (Default): gli stili sono adattati al componente utilizzando una combinazione di attributi aggiunti agli elementi DOM, fornendo un incapsulamento di stile.
- None: Non viene applicato alcun incapsulamento, il che significa che gli stili possono influenzare l'intera applicazione, in modo simile agli stili globali.
- ShadowDom: Utilizza Shadow Dom , fornendo un vero incapsulamento dove gli stili sono limitati al template del componente e grazie al quale il componente stesso non può essere influenzato da fattori esterni
Ogni modalità di incapsulamento offre diversi livelli di isolamento dello stile ed è scelta in base ai requisiti specifici e alle considerazioni sul supporto del browser.
Nel video seguente analizzeremo tutte le modalità di incapsulamento ed ispezioneremo il DOM generato dopo il processo di compilazione per comprendere esattamente cosa accade dietro le quinte.
# 5. host
La proprietà
host in Angular è utilizzata all'interno del decoratore @Component per definire attributi e listener di eventi direttamente sull'elemento DOM che ospita il componente.Questa proprietà permette di impostare classi CSS o listener ad eventi come il
click, senza bisogno di accedere manualmente al DOM all'interno del template ed evitando quindi la necessità di aggiungere elementi HTML addizionali al template.Nel video vedremo come effettuare la migrazione da un componente che include classi e listener su un
div wrapper ad uno che utilizza invece la proprietà host.src/shared/demo.component.ts
src/app.component.ts
src/shared/demo.component.ts
src/app.component.ts
# 6. animations
Le
animations in Angular offrono un modo strutturato e dichiarativo per aggiungere effetti di transizione e animazioni agli elementi dei template.Angular fornisce un modulo specifico,
@angular/animations, che include operatori e funzioni per definire e controllare le animazioni utilizzando un'API facile da usare che ricalca quasi fedelmente l'approccio nativo.L'esempio proposto (una semplice animazione fadeIn) è volutamente molto semplice ma nel video corso svilupperemo alcuni componenti in cui l'utilizzo di
animations risulterà davvero molto comodo rispetto all'utilizzo di CSS nativo.Nello script seguente...
Per vedere l'animazione nuovamente puoi effettuare il refresh dell'intera applicazione in modo che il componente sia nuovamente istanziato e l'animazione venga, quindi, riproposta
src/shared/demo.component.ts
src/app.component.ts
src/main.ts
Le cose si complicano...
I seguenti video su "Dependency Injection /
providers" e "Change Detection Strategies" potrebbero risultare un po' più complicati se ancora non hai molta esperienza con il framework.
Non preoccuparti. È normale!
Sono concetti un po' più articolati che necessitano di approfondimenti.# 7. providers
L'array
providers consente di definire le regole per l'iniezione di una dipendenza (DI) direttamente in un componente.
Infatti, quando si dichiara un servizio nell'array providers di un componente, Angular crea una nuova istanza di quel servizio ogni volta che il componente viene istanziato.In questo modo è possibile istanziare un numero arbitrario di componenti, ognuno dei quali creerà una propria istanza del servizio e che potrà poi iniettare al suo interno o nei suoi componenti figli.
src/shared/demo.component.ts
src/app.component.ts
src/services/example.service.ts
# 8. changeDetection in ZoneJS e Zoneless applications
In questo video analizziamo velocemente le differenze tra un'applicazione che utilizza ZoneJS per il meccanismo di Change Detection e le più recenti applicazioni Zoneless.
In entrambi i casi vedremo come le applicazioni si comportano sia con che senza l'utilizzo dei Signals e di come alcune strategie possano decisamente migliorare le prestazioni del componente e, di conseguenza, dell'intera applicazione.
Nell'esempio:
1
Un componente utilizza
onPush come ChangeDetectionStrategy e inietta un servizio2
Immaginiamo che una proprietà del servizio, ad es.
value, sia aggiornata da un altro componente3
Il componente "onPush" effettua quindi il rendering e mostrerà il valore aggiornato?
Nel video dimostro il funzionamento, con e senza l'utilizzo dei signal, sia in applicazioni ZoneJS che Zoneless
src/shared/demo.component.ts
src/app.component.ts
src/services/example.service.ts
src/shared/demo.component.ts
src/app.component.ts
src/services/example.service.ts
src/shared/demo.component.ts
src/app.component.ts
src/services/example.service.ts
