Gestione del routing

Iniziamo a personalizzare il nostro front-end. Cercheremo, in piccolo, di sviluppare una vera e propria SPA (Single Page Application) con tutte le caratteristiche tipiche del nostro framework: i contenuti da caricare saranno decisi in base al routing e le chiamate al backend verranno effettuate tramite service che metteranno i dati a disposizione dei component.

Quindi creiamo il file per la gestione del routing e l'accesso alla pagina iniziale. Sarà un file TypeScript posizionato nella cartella /src/app che chiameremo app.routes.ts.

Il modulo per la gestione delle rotte non fa parte del core di Angular, va quindi importato separatamente. Nella costruzione dell'applicazione mediante CLI è stato scaricato nella cartella node_modules, quindi già a nostra disposizione. Ricordiamoci inoltre di verificare che nel file index.html sia presente il tag

<base href="/">

indispensabile per il funzionamento del routing.

Procediamo con l'import:

import {Routes, RouterModule} from '@angular/router';

Definiamo ora la costante routes, un oggetto di tipo Routes che abbiamo appena importato e che conterrà l'array dei path:

const routes:Routes=[];

Il primo percorso da impostare sarà:

{path:'home', component:ReadProductsComponent},

Indicheremo due valori: il path, l'URL della pagina, e il component da montare quando saremo su questo percorso, quest'ultimo al momento non è disponibile e lo creeremo fra poco. Al primo accesso però dovremo prevedere il caso del percorso vuoto e ridirigere l'utente su home:

{path:'', redirectTo:'home', pathMatch:'full'}

Quindi, se il percorso è una stringa vuota, vi sarà una redirezione su home. Quando usiamo il redirect è obbligatorio specificare il pathMatch, cioè il tipo di corrispondenza tra la stringa e l'URL chiamato che, in questo caso, deve coincidere pienamente.

Ora esportiamo il nostro oggetto per caricarlo nel modulo principale:

export const routing=RouterModule.forRoot(routes);

La costante esportata si chiamerà routing, il metodo forRoot serve appunto a creare il modulo che stiamo esportando. Nel modulo principale possiamo ora importare il modulo creato per il routing, apriamo quindi il file app.module.ts e aggiungiamo all'array dei moduli da importare, oltre a BrowserModule già presente, il nostro routing:

import {routing} from './app.routes';

Non resta che sistemare il primo component, quello creato in fase di installazione. Partendo dal template HTML, app.component.html, ripuliremo il markup da ciò che vi è di superfluo e andremo ad aggiungere il tag che servirà come segnaposto per l'iniezione dell'HTML generato dal component caricato in base al routing:

L'HTML finale del template sarà quindi:

<div class="container">
 <div class="row">
   <div class="col-md-12">
     <div class='page-header'><h1>{{title}}</h1></div>
   </div>
 </div>
 <router-outlet></router-outlet>
</div>

Per quanto riguarda la classe TypeScript avremo il seguente codice:

import { Component } from '@angular/core';

cioè importeremo il component dal core di Angular, useremo il decoratore per indicare il CSS da applicare e il template HTML appena preparato

@Component({
   templateUrl: './app.component.html',
   styleUrls: ['./app.component.css']
})

Infine esporteremo la classe assegnando la proprietà title che verà renderizzata mediante interpolazione dal template:

export class AppComponent {
   title="Lista Prodotti";
}