Una delle funzionalità più importanti introdotte all’interno di Angular 2 è la possibilità di reagire ai cambiamenti ovvero Change Detection.
Cos’è il Change Detection
L’obiettivo principale del Change Detection è prendere un componente di un programma e renderlo in qualche modo visibile all’utente attraverso la User Interface. Questo componente potrebbe essere qualsiasi cosa: un oggetto, un array, una stringa..ecc. In buona sostanza il Change Detection effettua il rendering del componente magari attraverso un input o un form o altri elementi del Document Object Model (DOM).
La parte importante è questo cambiamento o rendering deve avvenire in runtime, vale a dire mentre sto visualizzando la pagina web. L’approccio usato per es. da ReactJS è effettuare il rendering solo delle differenze tra il nuovo stato e lo stato precedente del DOM: questo approccio viene chiamato VirtualDOM.
Cosa causa il cambiamento
Il cambiamento di stato dell’applicazione può essere causato essenzialmente da tre elementi:
- Eventi: click sul link, submit su un form, ecc…
- XHR (XML Http Request): recupero di dati da un server remoto
- Timers : per es. setTimeou( ), setInterval( )
Come è possibile notare, tutti gli elementi sopra indicati sono asincroni e ciò ci porta ad affermare che, in linea di massima, ogni operazione asincrona può comportare un cambiamento di stato. Qui arriva il momento di informare Angular di aggiornare la UI.
Chi notifica Angular 2
Angular ci permette di utilizzare le use API native! Non ci sono metodi che dobbiamo chiamare affinchè Angular venga informato su un update nel DOM. In Angular 2 esistono le Zone : nel codice sorgente esiste un elemento chiamato ApplicationRef che è in ascolto sull’evento NgZones onTurnDone. Quando questo evento viene generato, viene eseguita la funzione tick( ) che essenzialmente fornisce il “change detection”.
Come avviene il Change Detection
In Angular 2 ogni componente ha un proprio “change detector”, questo è un fatto rilevante in quanto ci permette di controllare, individualmente per ogni componente, il come ed il quando la change detection deve avvenire.
Nella fattispecie, visto che un’applicazione Angular 2 consiste di un albero di componenti, possiamo affermare che avremo anche un albero di change detector che diventa, di fatto, un flusso dall’alto al basso.
In questa maniera otteniamo un flusso unidirezionale che è precidibile, a differenza di un flusso ciclico, e permette di conoscere in ogni momento quale componente ha notato il cambiamento.
Un’ultima caratteristica del Change Detection in Angular 2 è che questo è stabile dopo ogni attivazione e rimane contestualizzato al componente eliminando effetti domino.
Glue Labs e Angular 2
Esperti in Angular 2, sviluppiamo Web Application e SaaS anche in Cloud ed eroghiamo Corsi di Formazione su Angular 2. Contattaci subito per maggiori informazioni.
