Back to top

Angular 2 Change Detection – Capire il funzionamento

State change, change detector e component in un'unica funzionalità

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.

Casi di Successo

Il leader mondiale in sistemi di controllo di impianti refrigeranti, umidificazione e aereazione presente in 75 paesi usa le nostre soluzioni Web Application e System Integration per selezionare le componenti industriali e fornire documentazione tecnica in ambiente controllato e sicuro.

Inizia ora il tuo progetto

CONTATTI

Scrivici dal form di contatto

Tel +39 06 87811067
Fax +39 06 99335373

Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it

Dove Siamo
Roma: Piazza Don Sturzo 15
Padova: Via Savonarola 217
Milano: Viale Monza 345
Torino: Via Nizza 262

Nome*

E-mail*

Telefono ( per un rapido contatto)

Come possiamo aiutarti?

Altro che vuoi dirci?

Inviando la tua richiesta accetti le condizioni sulla privacy. Useremo i tuoi dati per rispondere alle tue domande e richieste.

TOP