• Passa alla navigazione primaria
  • Passa al contenuto principale
  • Passa alla barra laterale primaria
  • Passa al piè di pagina
Glue Labs

Glue Labs

Trasformiamo le tue idee in prodotti digitali di successo!

  • HOME
  • SOLUZIONI
  • NEWS
  • PRODOTTI
  • CONTATTI
  • CASE STUDY

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.

Continua la lettura

  1. Le novità di Angular 14

Categoria: Articoli Tags: Angular 2, change detection, corso, dom, virtual dom, web application

Barra laterale primaria

Cosa facciamo

  • Content Strategy
  • E-Commerce
  • Formazione avanzata Web, Mobile & Cloud
  • IoT – Sviluppo e Integrazione
  • Micro Live Learning(MLL) Web, Mobile & Cloud
  • Project Management Prince2
  • PushAPE
  • Sicurezza ICT
  • Software Aziendali
  • Sviluppo Mobile App
  • Sviluppo, Supporto, Assistenza Tecnica e Hosting Google Cloud
  • System Integration
  • Web Application
  • Web Design

Contatti

Scrivici dal form di contatto

Tel +39 06 56549766
Fax +39 06 21122581
Mail: info@glue-labs.com
Pec: gluelabs@legalmail.it

Dove siamo

Roma: Piazza Don Sturzo 15
Milano: Via Lazzaretto 19
Torino: Via San Domenico 28
Altamura: Via Maggio 1648 24

"*" indica i campi obbligatori

Nome*
Questo sito è protetto da reCAPTCHA e si applicano le Normative sulla Privacy e i Termini di Servizio di Google.
Inviando i tuoi dati accetti le condizioni sulla Privacy. Li useremo per rispondere alle tue domande e richieste.
Consenso*
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Siamo parte di

La nostra Agenzia di Marketing

Footer

Partnership



Rimaniamo in contatto

Iscriviti alla nostra newsletter

Nome
Questo campo serve per la convalida e dovrebbe essere lasciato inalterato.

Soluzioni

  • Integrazione di Spreaker API con WordPress e Web Application
  • Revisione, validazione, attestazione e Relazione Tecnica su Ricerca & Sviluppo e Innovazione Tecnologica
  • Migrazione da ASP.NET Web Forms e Visual Basic ad Angular Web Application
  • Corso Angular 15
  • Supporto ed Integrazione di SPID e CIE con OpenID Connect
  • Consulenza e Assessment pre-formazione
  • Integrazione con le API di OpenAI e ChatGPT
  • Corso Firebase
  • Corso Cucumber per Javascript
  • Supporto ed Assistenza nell’implementazione ed utilizzo dei Kit di Designers Italia

Articoli

  • Vonage Proactive Connect: una piattaforma per il marketing automation
  • Le 4 metriche principali delle Performance del DevOps
  • Come trasformare una Web Application in una Mobile App: Capacitor di Ionic
  • Moodle per essere compliant con gli obblighi formativi in ambito sicurezza sul lavoro
  • Perchè adottare il modello One Concern(o Application) One Container
  • Perchè utilizzare la WebAR
  • Le 3 ragioni per implementare un chatbot nella tua azienda
  • I 5 fattori che impattano sulla reliability delle applicazioni
  • Le 10 innovazioni che modificheranno i servizi IT nel 2023
  • DevSusOps: sviluppare per la sostenibilità del software e delle architetture IT

Le nostre sedi

  • Roma, Piazza Don Sturzo 15
  • Milano, Via Lazzaretto 19
  • Torino, Via San Domenico 28
  • Altamura, Via Maggio 1648 24

Contatti

  • Tel. +39 06 87811067
  • Fax +39 06 99335373
  • glue-labs@legalmail.it
  • info@glue-labs.com
  • Facebook
  • LinkedIn
  • Twitter

Scarica app da App StoreScarica app da Play Store


Glue Labs © 2011–2023 | Copyright | Privacy Policy | Company Info | Cookie Policy | Gestione Cookies

Gestisci Consenso Cookie
Usiamo cookie per ottimizzare il nostro sito web ed i nostri servizi.
Funzionale Sempre attivo
La conservazione tecnica o l'accesso sono strettamente necessari al fine legittimo di consentire la fruizione di uno specifico servizio esplicitamente richiesto dall'abbonato o dall'utente, o al solo fine di effettuare la trasmissione di una comunicazione su una rete di comunicazione elettronica.
Preferenze
The technical storage or access is necessary for the legitimate purpose of storing preferences that are not requested by the subscriber or user.
Statistiche
L'archiviazione tecnica o l'accesso che viene utilizzato esclusivamente a fini statistici anonimi. Senza un mandato di comparizione, il rispetto volontario da parte del tuo provider di servizi Internet o registrazioni aggiuntive da parte di terzi, le informazioni archiviate o recuperate solo per questo scopo non possono essere generalmente utilizzate per identificarti. The technical storage or access that is used exclusively for anonymous statistical purposes. Without a subpoena, voluntary compliance on the part of your Internet Service Provider, or additional records from a third party, information stored or retrieved for this purpose alone cannot usually be used to identify you.
Marketing
L'archiviazione tecnica o l'accesso è necessario per creare profili utente per inviare pubblicità o per tracciare l'utente su un sito Web o su più siti Web per scopi di marketing simili.
Gestisci opzioni Gestisci servizi Gestisci fornitori Per saperne di più su questi scopi
Gestisci preferenze
{title} {title} {title}