Una delle caratteristiche maggiormente apprezzate di Angular, anche nella versione 1.x, è il supporto dei template. Essi sono porzioni di codice HTML eventualmente integrati con elementi sintattici specifici che definiscono l'aspetto grafico di un componente.
La possibilità di definire la dinamicità di porzioni dell'interfaccia Web con un approccio dichiarativo è uno degli aspetti maggiormente apprezzati dagli sviluppatori Angular. Tra l'altro la definizione dei template è una delle funzionalità che maggiormente affascina chi si avvicina per al prima volta ad Angular, dal momento che è possibile definire comportamenti dinamici senza scrivere una riga di codice JavaScript.
Tuttavia, la semplicità dei template spesso si scontra con la difficoltà di comprendere bene le sottili differenze sintattiche ed il funzionamento interno di Angular. Con la versione 2 del framework sono state introdotte alcune novità nella sintassi che consentono una semplificazione del codice ed una uniformità concettuale.
Vediamo in questa sezione quali sono le novità principali.
Semplificazione sintattica
Abbiamo già avuto modo di apprezzare le novità nella sintassi dei template HTML parlando dei componenti. Abbiamo visto l'utilizzo dei diversi tipi di parentesi ed il loro significato. Ricapitoliamoli brevemente:
Doppie graffe {{}}, l'interpolazione
Le doppie parantesi graffe {{}} rappresentano una espressione di interpolazione composta da stringhe ed espressioni Angular, come nel seguente esempio:
<p>Il titolo dell'articolo è <b>{{titolo}}</b></p>Angular valuta l'espressione tra le doppie parentesi graffe e sostituisce il risultato all'interno del contenuto dell'elemento o del componente.
Parentesi quadre []
Un attributo tra parentesi quadre [] indica che il risultato dell'espressione assegnata all'attributo deve essere mappata alla corrispondente proprietà del componente o dell'elemento sottostante:
<articolo [articolo]="myArticolo"></articolo>Abbiamo visto che questo rappresenta l'approccio standard per passare dati ad un componente.
Parentesi tonde ()
Un attributo tra parentesi tonde () indica che l'espressione assegnata all'attributo deve essere eseguita al verificarsi dell'evento corrispondente
<button (click)="incrementaApprezzamenti()" >Mi piace</button>In questo caso, in corrispondenza del verificarsi dell'evento click sarà eseguito il metodo incrementaApprezzamenti().
Binding delle proprietà
A parte l'espressione di interpolazione, l'introduzione dell'uso delle parentesi quadre e tonde sembrano apparentemente di poco conto: sembrerebbe essenzialmente una pura semplificazione sintattica. In realtà esse rappresentano una completa revisione della gestione dei template.
Consideriamo l'uso delle parentesi quadre intorno ad un attributo. Abbiamo detto che esse fanno in modo che la relativa espressione sia valutata da Angular ed assegnata alla proprietà dell'elemento o del componente sottostante.
Per comprendere bene, è opportuno rimarcare la distinzione tra attributo e proprietà in un elemento HTML ed in un componente Web.
Un attributo è il mezzo sintattico che ci consente di passare un valore ad un elemento HTML. Il valore assegnato ad un attributo è sempre di tipo stringa.
Una proprietà è invece relativa all'oggetto del DOM sottostante all'elemento HTML e può essere di tipo diverso, esattamente come ogni proprietà di un oggetto JavaScript.
In genere ad ogni attributo HTML corrisponde una proprietà dell'oggetto del DOM. Ad esempio, all'attributo src dell'elemento HTML <img> corrisponde l'omonima proprietà dell'oggetto HTMLImageElement. Quindi, se abbiamo il seguente markup:
<img src="images/myPhoto.jpg"/>il valore "images/myPhoto.jpg" si rifletterà sulla corrispondente proprietà src dell'HTMLImageElement. Supponiamo invece di voler fare in modo che l'immagine da assegnare all'attributo src sia dinamica e possa dipendere da una elaborazione, come ad esempio dal risultato di una funzione. Se proviamo a scrivere un markup analogo al seguente otteniamo il fallimento del caricamento dell'immagine:
<img src="getImmagine()"/>Infatti, dal momento che un attributo accetta soltanto valori di tipo stringa, il valore che sarà assegnato alla proprietà src dell'HTMLImageElement corrispondente sarà la stringa "getImmagine()", che evidentemente non è il nome dell'immagine da visualizzare.
Per risolvere il problema, in Angular 2 è sufficiente racchiudere l'attributo src in parantesi quadre:
<img [src]="getImmagine()"/>Questo accorgimento fa sì che la stringa "getImmagine()" venga prima valutata dal framework ed il suo risultato venga quindi assegnato alla proprietà src dell'HTMLImageElement corrispondente. Ciò aggiunge grande dinamicità all'HTML.
In Angular 1.x potevamo ottenere lo stesso effetto sfruttando la direttiva ng-src e per estendere questo comportamento su altri attributi o su attributi non standard dovevamo ricorrere alla creazione di una direttiva ad-hoc. In Angular 2 è sufficiente racchiudere qualsiasi attributo tra parentesi quadre per ottenere la valutazione dell'espressione specificata per l'attributo prima dell'assegnamento alla proprietà corrispondente.
C'è da dire inoltre che le parentesi quadre sono una semplificazione sintattica per attributi della forma bind-<nomeAttributo>. In altre parole, i seguenti markup sono equivalenti:
<img [src]="getImmagine()"/><img bind-src="getImmagine()"/>Mentre l'uso delle parentesi rende il codice meno prolisso, l'uso degli attributi nella forma bind-<nomeAttributo> può tornare utile quando abbiamo a che fare con preprocessori che non supportano la prima sintassi.
Binding degli eventi
Anche nella gestione degli eventi con Angular 2 assistiamo ad una semplificazione della gestione interna. Come abbiamo già visto, all'interno di un template possiamo racchiudere tra parentesi tonde l'attributo che rappresenta un evento:
<button (click)="incrementaApprezzamenti()" >Mi piace</button>Angular creerà un gestore per l'evento che eseguirà l'espressione assegnata. Questo meccanismo generico per la gestione degli eventi supera la necessità in Angular 1.x di creare direttive specifiche per gestire eventi personalizzati. Grazie a questo approccio si apre la strada a una maggiore integrazione di Angular con altre librerie e si riduce notevolmente il numero di direttive predefinite come ng-click, ng-change, ng-focus, ecc. che diventano ormai superflue.
Come per il binding delle proprietà, anche per gli eventi abbiamo una sintassi estesa, detta anche canonica. In questo caso possiamo specificare un evento con un attributo della forma on-<nomeEvento>. Pertanto i seguenti markup sono equivalenti:
<button (click)="incrementaApprezzamenti()" >Mi piace</button>
<button on-click="incrementaApprezzamenti()" >Mi piace</button>