Una delle funzionalità più importanti introdotte all’interno di Angular 2 è la possibilità di reagire ai cambiamenti ovvero 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.
Il cambiamento di stato dell’applicazione può essere causato essenzialmente da tre elementi:
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.
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”.
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.
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.