Creare un component

Nella lezione precedente è rimasta in sospeso la definizione del component associato al path:'home' nel file di routing, completiamo questo passaggio in modo da non avere errori nella nostra applicazione.

Generiamo quindi il component, potremmo eseguire questa operazione manualmente creando i file necessari uno a uno, oppure, modalità decisamente più veloce, possiamo procedere tramite linea di comando sfruttando la CLI. L'istruzione per la creazione del component sarà:

ng g component prodotti/read-products

Questo comando creerà dentro la cartella prodotti una cartella read-products e dentro questa 4 file:

• La classe con la definizione del component.
• Il template.
• Il foglio di stile.
• Un file ts per gli unit test.

Tutti questi file avranno come nome read-products.component e l'estensione relativa al tipo di file.

Oltre alla creazione dei file, il component viene registrato nell'App module e sarà quindi importato e aggiunto alla lista delle declaration. Andremo poi a modificare manualmente il file di routing importando il component anche in questo modulo in modo che possa essere utilizzato:

import {ReadProductsComponent} from './products/read-products/read-products.component';

A questo punto il file di routing è completo e pronto per l'uso.

Ora possiamo concentrarci sul nuovo component. Un component è una classe TypeScript che viene esportata in un modulo. Normalmente viene arricchita, decorata, da un template HTML e, se necessario, da un foglio di stile. Per chi ha lavorato con Angular 1.x il concetto più simile è quello di una direttiva con un template e un controller, ora invece il concetto di controller non esiste più: al posto di scope e controller abbiamo il solo component.

Lo scopo di questo component sarà mostrare la lista dei prodotti e il pulsante per inserirne di nuovi, possiamo quindi preparare l'HTML allo scopo e testare il funzionamento. Per risolvere velocemente il problema dell'estetica ci appoggeremo al CSS di Bootstrap: per fare questo apriamo index.html e aggiungiamo la riga:

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">

Ora invece apriamo il file read-products.component.html e inseriamo la parte statica dell'HTML della pagina: ricordiamo che sarà una porzione di markup che verrà montato con una richiesta asincrona dopo il router-outlet che abbiamo nel component home dell'applicazione:

<article>
<div class="row m-b-18px">
 <div class="col-md-12">
   <a routerLink="/create" class='btn btn-primary pull-right'>
     <span class='glyphicon glyphicon-plus'></span> Crea Prodotto
   </a>
 </div>
</div>
<div class="row">
 <div class="col-md-12">
   <table class='table table-hover table-responsive table-bordered'>
     <tr>
       <th>Prodotto</th>
       <th>Prezzo</th>
       <th>Descrizione</th>
       <th>Categoria</th>
       <th>Azioni</th>
     </tr>
   </table>
 </div>
</div>
</article>

Il primo blocco di codice contiene il link, non ancora gestito dal routing, alla creazione di un nuovo prodotto, in questo caso è da notare l'attributo routerLink al posto del classico href: si tratta di una direttiva di Angular gestita dal modulo Router che semplifica la costruzione dei link quando entra in gioco il passaggio dei parametri con tutte le problematiche connesse.

La seconda porzione di codice contiene l'intestazione della tabella dove andremo a visualizzare i record: è una classica tabella HTML formattata con le classi di Bootstrap.

Possiamo testare il funzionamento del codice prodotto fino qui: portiamoci all'interno della cartella contenente il frontend del nostro progetto e digitiamo ng serve. Questo comando come prima cosa esegue il transpile dei file TypeScript in file JavaScript in base alla configurazione che abbiamo impostato.

Quindi vedremo comparire nel progetto dei file *.js e, avviando il Web server sulla porta 4200, potremo digitare nel browser l'URL:

http://localhost:4200