Nella guida angular2 italiano di oggi scopriamo cosa sono e come si implementano i componenti del framework.
I componenti sono uno degli elementi portanti che ti permetteranno di creare una qualsiasi applicazione in Angular2.
Come abbiamo visto nell’articolo Guida Angular2 introduzione al framework del futuro
“Un component non è altro che una classe che gestisce una view della nostra app. Si preoccupa di recuperare i dati da inviare alla view e gestire le interazioni dell’utente con la view.“
Il concetto è molto semplice. Basta che immagini la tua app, come a una classe di una scuola.
Ogni alunno della classe non è altro che un componente della classe, dotato di un proprio nome, di particolari caratteristiche fisiche e in grado di realizzare determinate azioni.
Soffermati un attimo a guardare lo screenshot della home di questo blog ti convincerai che anch’essa può essere pensata costituita da tanti elementi, ognuno dei quali ha uno specifico comportamento.
C’è il menu al top della pagina, una sidebar laterale e ci sono gli articoli. Ebbene in Angular2, è possibile isolare ciascun elemento di un’app, e trasformarlo in quello che prende il nome di componente. Un componente quindi è un singolo elemento dell’interfaccia UI, dotato di caratteristiche univoche e che è possibile collegare chiaramente ad altri elementi dell’interfaccia, più avanti scopriremo che un componente può avere a sua volta altri componenti che lo compongono ma non andiamo a complicarci la vita.
Dall’esempio emerge quindi che un componente deve avere tre caratteristiche fondamentali:
- Deve avere un nome identificativo
- Deve avere una rappresentazione grafica (template)
- Deve avere delle funzionalità (metodi)
Se analizziamo per esempio il menu dell’esempio sopra riportato potremmo identificare il menu del blog con un nome ad esempio “my-menu”, potremmo collegare al componente un templateHTML che ne definisce la struttura e i contenuti da visualizzare e potremmo identificare delle funzionalità/metodi che ci permettono di cambiare pagina ad esempio dato che stiamo parlando di un menu.
A livello di interfaccia potrei quindi definire l’applicazione in questo modo:
<html>
<body>
<my-menu></my-menu>
<div class="corpo">
<articoli></articoli>
</div>
</body>
</html>
Se prestate attenzione ho utilizzato tag HTML classici e altri che al contrario non esistno nell’linguaggio HTML e posso assicurarvi che nessun browser è in grado di interpretarli ma grazie a TypeScript e ad opportune librerie sono in grado di farli interpretare correttamente ed è proprio questo il modo di lavorare in Angular2.
Come si può tradurre tutto questo a livello di codice?
Creiamo un file con estensione .ts diamogli un nome significativo che indichi quello specifico componente ad esempio menu.ts , questo file conterrà la definizione di una classe che andrà a definire il menu.
Abbiamo detto che per identificare il componente, dobbiamo dargli un nome univoco che potrà essere usato all’interno del codice html della pagina principale, per richiamare il componente stesso, sotto forma di tag html personalizzato <my-menu></my-menu>.
Il codice sarà:
@Component ({
selector: 'menuapp'
})
Il termine @Component è specifico del linguaggio TypeScript e viene detto “decorator” ossia è un elemento che pemette di assegnare alla classe, specifiche caratteristiche o metadati.
Preoccupiamoci ora di come dovrà essere rappresentato graficamente il componente. Beh se stessi creando una classica pagina HTML, partirei con definire un foglio di stile associato e del codice html per la struttura. Preoccupandoci per ora solo del codice html, potrei scrivere:
<nav> <ul> <li><a>Voce di menu 1</a></li> <li><a> Voce di menu 2</a></li> <li><a> Voce di menu 3</a></li> </ul> </nav>
All’interno del nostro componente possiamo specificare la rappresentazione grafica del componente scrivendo:
@Component({
selector: 'my-menu',
template: `
<nav>
<ul>
<li><a href="">Voce di Menu 1</a></li>
<li><a href="">Voce di Menu 2</a></li>
<li><a href="">Voce di Menu 3</a></li>
</ul>
</nav>
` })
Invece di inserire il codice direttamente nel componente avrei potuto creare un file HTML e referenziarlo all’interno del componente come nell’esempio qui sotto.
@Component({
selector: 'my-menu',
template: 'my-menu.html'
})
In alcuni casi, è possibile adottare una terza rappresentazione, specifica sempre di TypeScript, che fa uso del decoratore @View, questa è una funzionalità leggermente più avanzata che ci permette di cambiare graficamente il menu in base a determinate condizioni.
@Component({
selector: 'my-menu'
})
@View({
template: my-'menu.html'
})
Arrivati a questo punto dobbiamo definire il cuore del componente, ossia le sue funzionalità. Per farlo, sapendo che ogni componente è in realtà una classe, inseriremo la definizione di questa classe, specificando un nome, es myMenuComponent.
@Component({
selector: 'my-menu',
template: 'my-menu.html'
})
class myMenuComponent {
// QUI ANDRO A DEFINIRE LE FUNZONALITA
}
In questo caso specifico, il componente non presenta alcun metodo, quindi non sarà in grado di eseguire nulla, se non, visualizzare il codice html del template associato, avrei potuto inserire tutte le regole di routing per fare in modo che il menu funzionasse ma non è lo scopo di questo tutorial vi mostrerò come creare il routing di un applicazione in una guida futura.
Spero che questo articolo ti sia piaciuto e che ti abbia chiarito le idee su cosa è effettivamente un component, se vuoi ringraziarci condividi l’articolo sui social per qualsiasi dubbio non esitare a commentare qui sotto.
Alla prossima guida 😉
Ottimo, chiaro e semplice per chi di Angular2 è agli inizi…non fermarti!