Un'applicazione Angular 2 è una composizione gerarchica di componenti, come abbiamo detto all'inizio di questa guida, ma l'unica applicazione che abbiamo visto finora è stata quella creata da Angular-CLI che prevede un solo componente, il root component AppComponent. Come facciamo a creare la gerarchia a cui accennavamo?
Prendiamo come punto di partenza il componente ArticoloComponent di cui abbiamo appena definito la struttura tramite Angular-CLI e procediamo per gradi nel tentativo di vedere come comporre più componenti.
Per prima cosa definiamo in un modulo articolo.ts una classe che descriva la struttura di un articolo, come la seguente:
export class Articolo {
titolo:string;
autore:string;
testo:string;
}Come possiamo vedere dal codice, la struttura del nostro articolo è composta dal titolo, dal nome dell'autore e dal testo dell'articolo. La classe viene resa disponibile all'esterno del modulo tramite la parola chiave export.
Modifichiamo quindi il codice generato da Angular-CLI per il nostro ArticoloComponent come mostrato di seguito:
import { Component } from '@angular/core';
import { Articolo } from './articolo'
@Component({
selector: 'articolo',
templateUrl: 'articolo.component.html',
styleUrls: ['articolo.component.css']
})
export class ArticoloComponent {
articolo: Articolo;
constructor() {
this.articolo = {
titolo: "Creare componenti Angular 2",
autore: "Mario Rossi",
testo: "Creare componenti con Angular 2 è molto semplice."
};
}
}Abbiamo importato la classe Articolo in questo modulo e l'abbiamo utilizzata per definire il tipo della proprietà articolo della classe ArticoloComponent. Nel costruttore abbiamo quindi inizializzato la proprietà con un esempio di oggetto letterale che ha la struttura prevista dalla nostra classe Articolo.
Adattiamo quindi il markup del template associato al nostro componente come nel seguente esempio:
<h3>{{articolo.titolo}}</h3>
<i>{{articolo.autore}}</i><br/>
<p>
{{articolo.testo}}
</p>Nel markup abbiamo inserito all'interno degli opportuni tag i tre valori della proprietà articolo.
Con queste modifiche abbiamo predisposto il nostro componente alla visualizzazione dei dati dell'oggetto assegnato alla proprietà articolo.
Ora che abbiamo definito il nostro componente ArticoloComponent, come facciamo ad agganciarlo al root component della nostra applicazione in modo da creare la gerarchia di componenti desiderata?
La soluzione è abbastanza semplice: occorre innanzitutto importare il componente all'interno del modulo Angular della nostra applicazione e inserirlo nelle dichiarazioni, come mostrato dal seguente codice:
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { ArticoloComponent } from './articolo';
import { AppComponent } from './app.component';
@NgModule({
imports: [ BrowserModule ],
declarations: [ AppComponent, ArticoloComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }A questo punto il componente risulterà disponibile all'interno del modulo ed utilizzabile in tutti i componenti definiti al suo interno. Pertanto potremo semplicemente modificare il markup del root component della nostra applicazione come mostrato di seguito:
<h1>{{title}}</h1>
<articolo></articolo>Non abbiamo fatto altro che aggiungere in fondo al markup esistente i tag di apertura e chiusura associati al componente ArticoloComponent.
Il risultato di quanto fatto finora è mostrato dalla seguente figura:
