Creare componenti con Angular-CLI

I componenti di Angular 2 altro non sono che classi TypeScript arricchite da metadati definiti tramite decoratori. La loro definizione è relativamente semplice, anche se i decoratori possono far riferimento a file esterni come il template, i fogli di stile ed eventuali altre risorse che possono complicarla. Angular-CLI ci viene incontro nella definizione di un componente mettendoci a disposizione un comando specifico: ng generate component.

Vediamo come usarlo in pratica supponendo di voler creare un componente che mi permetta di visualizzare il contenuto di un articolo. Ci posizioniamo nella cartella del nostro progetto Angular e lanciamo il seguente comando:

ng generate component articolo

Dopo qualche secondo troveremo nella cartella src/app una cartella articolo con tutto l'occorrente per partire con la definizione del nostro componente. In particolare troveremo i seguenti file:

File	Descrizione
articolo.component.ts	è il file che contiene la definizione della classe TypeScript del nostro componente
articolo.component.html	è il file che contiene il template del nostro componente
articolo.component.css	questo file è destinato a contenere l'eventuale codice CSS da applicare al componente
articolo.component.spec.ts	in questo file troviamo il codice di base per la definizione degli unit test del nostro componente
index.ts	questo file è pensato come punto unico per l'esportazione delle funzionalità del nostro componente nel caso questo fosse composto da più sotto componenti

Il file index.ts ci consente inoltre di importare il nostro componente facendo semplicemente riferimento alla cartella in cui esso è contenuto invece che al file. In altre parole, per importare il nostro componente in un modulo possiamo scrivere

import {ArticoloComponent} from './articolo'

invece di specificare

import {ArticoloComponent} from './articolo/articolo.component'

Interessante notare come nonostante noi avessimo fornito il nome articolo al comando ng generate component, Angular-CLI ha creato una classe con nome ArticoloComponent, cioè ha aggiunto il suffisso Component al nome da noi indicato.

Una volta che abbiamo a disposizione la struttura di base per il nostro componente possiamo modificare il codice a nostro piacimento.