creareapp angularCiclo di vita di un'app Angular

In questo articolo vedremo la lista di eventi che viene emessa durante il caricamento di un componente, direttiva, o il cambio di un elemento di un form.

Ultimo aggiornamento: 3 giorni fa

Il caricamento di un'app Angular, presuppone il caricamento di N componenti, ognuno dei quali ha precisi "stati"  durante il ciclo di vita dell'intera app.

Ognuno di questi stati lo puoi pensare come alle fermate di un autobus, da un capolinea all'altro. Durante il percorso, io posso entrare nell'autobus, in diversi momenti corrispondenti alle diverse fermate. Nel caso di un'app Angular, tutto è gestito in automatico, e queste "fermate" sono predefinite e ci permettono di entrare o agganciarci a diversi stati di esecuzione di un'app.

Sappiamo infatti dai capitoli precedenti, che il cuore di ogni componente è costituito dal corpo della classe stessa, dove si inserisce la logica del componente. Come ogni classe, ci sarà il costruttore, dove per convenzione ed efficienza, si inizializzano le eventuali proprietà del componente.

Il costruttore quindi è proprio il primo elemento che viene richiamato all'atto del caricamento del componente.

Questo è il motivo per cui, nel caso il componente dovesse dipendere da altri elementi, si sfrutta il costruttore per "iniettano" le dipendenze.

Ad esempio, quando un componente o service ha la necessità di comunicare con la rete, dovremo iniettare nel costruttore un service di nome http, grazie al quale potremo accedere ad una serie di metodi della libreria Http, utili per dialogare con la rete.

Ecco allora la lista degli eventi principali, che nel corso dello sviluppo di un'app, potrai sfruttare per effettuare degli interventi sui dati o sulla logica gestita dal componente. E' chiaro che per poterli utilizzare, dovrai implementarli nel costruttore del componente che necessita di "agganciarsi" a tali eventi, e includerli  nel componente richiamandoli dalla libreria @angular/core

ngOnInit
Il metodo ngOnInit del componente è chiamato subito dopo l'esecuzione del costruttore e prima che venga emesso ngOnChanges, per la prima volta. Può essere sfruttato per inizializzare alcune proprietà da usare all'interno del componente o eseguire altre tipologie di azioni, tipicamente la chiamata a metodi di un service per operazioni di scambio dati con la rete. All'interno del corpo della classe del componente, dovrai usare la notazione:

class MioComponente implement ngOnInit {
  constructor() {}
  ngOnInit() {
   // Definisco qui le azioni da fare dopo la chiamata del costruttore
  }
}

NB: Viene sempre chiamato una sola volta.

ngOnChanges
Quando un componente deve ricevere dei dati di ingresso, ci viene in aiuto ngOnChanges per segnalare tutte le volte che il valore di un ingresso subisce una modifica. Il metodo prende un parametro in ingresso, che è un oggetto, il quale descrive le variazioni della proprietà di input in dettaglio, ad esempio:

{"valore1":{"previousValue":"","currentValue":"Test"}}

In questo caso, la proprietà di ingresso ha nome "valore1" e cambia dalla stringa vuota "", al valore "Test".

ngDoCheck

ngDoCheck viene attivato ogni volta che le proprietà di ingresso di un componente o una direttiva vengono controllati. È possibile utilizzare questo aggancio del ciclo di vita per estendere il controllo con la tua logica di controllo personalizzata.

ngAfterContentInit

ngAfterContentInit viene chiamato dopo ngOnInit quando il contenuto di un componente o una direttiva è stato inizializzato.

ngAfterContentChecked

Chiamato dopo ogni verifica del contenuto del componente o di una direttiva.

ngAfterViewInit

Chiamato dopo ngAfterContentInit quando la vista del componente è stata inizializzata. Si applica solo a componenti.

ngAfterViewChecked

Chiamato dopo ogni verifica della vista di un componente. Si applica solo componenti.

ngOnDestroy

L'ultimo metodo che viene chiamato nel ciclo di vita di un componente, appena prima che l'istanza del componente sia finalmente distrutta.

Novità

Non farti scappare il nuovo libro: "Angular 100% Operativo", in offerta su Amazon. Più di 200 pagine, con tutto il percorso per creare una WebAPP e imparare Angular in un quarto del tempo. Prenotalo cliccando l'immagine qui sotto:

Corso Angular 4 100% Operativo

Ti è servito il breve tutorial? Condividilo ADESSO sui social! Grazie :-)

Categoria:

Voto 3.9/5 basato su 95 Recensioni
© 2013-2017 CreareAPP.com - Tutti i diritti riservati. Tutorial e WebCAMP per creare app in Android e iOS
NB: Tutti i marchi citati sono di proprietà dei rispettivi proprietari. Android is a trademark of Google Inc.