creareapp angularAngular 4: Cosa sono i decoratori

I decoratori in Angular 4, sono un caratteristica molto interessante del linguaggio JavaScript, e Angular ne fa un uso molto massiccio, al fine di rendere la scrittura di applicazioni più semplice e di facile manutenzione.

Ultimo aggiornamento: 3 giorni fa

I decoratori (Decorator), sono una caratteristica, di prossima implementazione, del linguaggio JavaScript. Allo stato attuale, l'utilizzo al di fuori del framework Angular non è così frequente, ma all'interno di esso è una delle caratteristiche principali, estremamente utilizzata. Fortunatamente il concetto abbinato è semplice da imparare e spesso è sufficiente dare uno sguardo a qualche esempio e a come sono utilizzati per impratichirsi senza troppa difficoltà.

In questo breve tutorial, entreremo nei dettagli delle caratteristiche di questo elemento, e come si possa utilizzare all'interno di Angular.

Le origini dei decoratori

I decoratori non sono una caratteristica propria di Angular anche se, come dicevo, quest'ultimo è stato il primo framework ad utilizzarli e a renderli noti al pubblico intero. I decoratori infatti sono un elemento caratteristico del linguaggio JavaScript. Non fanno parte ancora delle specifiche dello standard ECMAScript 2016 (detto ES7) , ma delle attuali specifiche in fase di proposta. Questo significa che potrebbero diventare un elemento della futura versione di JavScript o  successive. Fortunatamente è possibile compilare i propri programmi adattandoli alle versioni precedenti dello standard JavaScript (ES5), quella attualmente utilizzata dai browser, sfruttando o TypeScript o Babel.

Alle origini, i decoratori sono stati proposti in contemporanea sia dalle team di Angular sia da Yehuda Kats, uno dei creatori di EmberJS. Sebbene le due idee fossero leggermente diverse, decisero di collaborare e definire così una proposta da aggiungere alle future versioni di JavaScript.

L'implementazione

Vediamo allora come si possono implementare i decoratori, giusto per avere un'idea del perché sono così importanti e potenti per lo sviluppo di una applicazione.
I decoratori, come suggerisce lo stesso nome, non sono altro che dei metadati con cui "adornare" gli elementi JavaScript che seguono i decoratori. Il caso più semplice e più noto a chi sviluppa applicazioni per Angular, è l'elemento "Component", visto in un tutorial precedente, che presenta un decoratore per decorare una classe.

Qui sotto puoi vederne un esempio. L'elemento @Component è applicato al codice che lo segue ossia alla classe, perché questa è la prima cosa che appare subito dopo.

È chiaro che noi possiamo decorare più classi contemporaneamente.

@Component({  
  selector: 'mia-app',  
  template: '<h1>{{title}}</h1>'  
})  
export class AppComponent {  
  title = 'Elenco Foto';  
}

Ora vediamo nel dettaglio la possibile implementazione dei decoratori. La cosa importante per noi da capire è come i decoratori possono avere un effetto sul codice. Questo accade perché il risultato finale dell'uso di un decoratore è una funzione che riceve come parametro d'ingresso l'elemento JavaScript che deve essere decorato e ogni altro parametro passato.

Nell'esempio precedente usato per decorare la classe, riceverà due parametri, la classe AppComponent, e l'oggetto configuration che ha incluso la proprietà del selettore e del template. Nella realtà le cose sono un po' più complesse ma lo scopo dell'articolo è fare chiarezza sull'uso di questi, e non capire come incrementare il proprio decoratore.

Nel caso del decoratore della classe, questo evidenzia la classe con alcune proprietà aggiuntive che permettono al framework Angular di riconoscere la classe come un componente e di capire che il selettore e il template sono specifiche del componente. Come avrai capito quindi il decoratore non è altro che una semplice funzione.

Come dicevo in precedenza è possibile decorare altri elementi oltre la classe. Allo stato attuale ci sono delle proposte per usare decoratori per la proprietà di una classe, i metodi e le "function expression" ossia una funzione definita all'interno di una espressione. Puoi vedere l'attuale proposta collegandoti a questo link.

@NgModule

Un altro decoratore molto utilizzato è @NGModule. Anche questo fa parte dei decoratori applicati ad una classe, che informano Angular che quella specifica classe è in realtà un modulo. I moduli non sono altro che degli elementi, che possono essere componenti, servizi, direttive, "pipes", il cui scopo è quello di raggruppare insieme pezzi della nostra applicazione. Esistono diverse tipologie di moduli, a partire da quello dell'applicazione principale, detto RootModule, fino ad arrivare a quelle predefiniti all'interno di angular, tra i quali "BrowserModule", "FormModule" e molti altri (vedi Material Design, Ionic, AngularFire) che inizieremo a vedere nei prossimi tutorial.

Con il tempo ti sarà chiaro che ogni applicazione Angular, non è altro che una collezione di moduli, a partire da quello d'origine che viene chiamato "RootModule".

NB: Non devi confondere il concetto di modulo in Angular, con lo stesso concetto in JavaScript, perchè sono due cose completamente diverse. Per approfondire il concetto di moduli JavaScript, clicca qui

Qui sotto, ad esempio, puoi vedere la tipica impostazione del modulo principale di un'applicazione Angular e alcune delle caratteristiche che deve avere, rispetto alla classica definzione di un modulo in Angular:

@NgModule({  
  imports: [ BrowserModule ],  
  declarations: [ MiaPrimaAppComponent, MenuComponent, BodyComponent, MioPipe, MiaDirettiva ],  
  providers: [ MioService ],  
  bootstrap: [ MiaPrimaAppComponent ]  
})  
export class AppModule {
}
  • Il modulo root viene chiamato per convenzione "AppModule", ed è salvato con il nome app.module.ts all'interno della cartella app
  • All'interno della lista proprietà del decoratore (metadata), non devi usare la proprietà "exports", che invece puoi usare in altri moduli
  • Ci deve essere sempre un solo modulo radice "root module" per applicazione
  • Il modulo radice, deve sempre importare il modulo "BrowserModule" che permette di esportare alcuni elementi importanti (direttive) come Ngif, Ngfor
  • All'interno della proprietà "declaration", inserirai tutti i componenti usati nell'applicazione
  • All'interno della proprietà "bootstrap", inserirai il nome del componente che dovrà essere caricato per primo.

Il codice sopra, lo dovrai poi completare con le righe per includere le librerie effettive, ma questo ormai viene fatto in automatico dalla maggior parte degli ide.

@Input e @Output

Il successivo più comune decoratore che incontrerai all'interno di un'applicazione Angular è costituito dalle coppie di decoratori @Input e @Output. Questi vengono definiti come decoratori di proprietà, e sono utilizzati per evidenziare una specifica proprietà di un componente/classe, come una proprietà di ingresso o di uscita.

Una proprietà ingresso, permette di passare delle informazioni da un componente padre ai componenti figli. Abbiamo già parlato di questi aspetti in uno dei precedenti tutorial quando è stato visto il ruolo del componente.

Nel caso invece di una proprietà di uscita, questa permette al componente figlio di lanciare un evento che è catturato dal padre componente, in modo che si instauri una comunicazione tra figlio e padre al fine di rilevare eventi importanti da segnalare oltre che avere la possibilità di ritornare dei dati nel messaggio.

Ecco un esempio di ciascuno. Con questo codice, il nome sarà settato dal componente padre e il componente padre, potrà mettersi in ascolto e rispondere non appena un determinato elemento è selezionato.

export class ListaAttivita {  
  @Input() nome;  
  @Output() selezionato;  
}

@Injectable

L'ultimo decoratore che vedremo in questo tutorial è rappresentato da @Injector. Siamo anche qui in presenza di un decoratore per una classe il quale utilizzato con "Services", permettendoti di utilizzare il "Dependecy Injector" per passare dipendenze nel servizio. Esattamente come i decoratori di input e output, non prende dei parametri. Vediamo ad un semplice esempio:

@Injectable()  
export class ListaService{  
}

Questo caso abbiamo evidenziato "ListaService", in modo tale che possiamo iniettare altri servizi al suo interno utilizzando Angular "Dependecy Injector"

Questi sono i principali decoratori che puoi sfruttare all'interno di Angular.

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 4.5/5 basato su 88 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.