Immagine descrittiva del post

Se sei arrivato qui, sarai interessato a conoscere come funziona il routing in Angular.

In questo articolo ti mostrerò come navigare tra le pagine di un’applicazione Angular utilizzando la libreria Angular Routing.

 

Aggiungere Angular Routing in un progetto Angular

In un altro post ti ho fatto vedere come creare un’applicazione Angular utilizzando Angular CLI, scegliendo di includere Angular routing quando ci è stato chiesto durante la creazione. Cosi facendo, ci ritroviamo il file app-routing.module.ts all’interno della cartella app: è qui, in particolare nella costante routes, che andremo a definire le rotte della nostra applicazione.

Cartella file e codice di esempio
app-routing.module.ts

Nel caso in cui non hai già la libreria all’interno del progetto, non ti preoccupare, nel prossimo capitolo ti spiegherò come aggiungere manualmente Angular routing. Se, al contrario, è già presente nella tua applicazione, puoi tranquillamente saltare il prossimo capitolo andando subito a creare una nuova rotta.

 

Aggiungere Angular Routing dopo la creazione del progetto

Per utilizzare Angular routing è necessario avere installato la dipendenza @angular/router.

Nel caso non si è scelto di utilizzare Angular routing durante la creazione del progetto, occorre aggiungerlo manualmente utilizzando npm, con il comando npm i @angular/router –save in riferimento a questa pagina.

Se l’installazione precedente è andata a buon fine, troverai la dipendenza nel file package.json come nell’immagine, a meno della versione che potrebbe variare.

Sreenshot di esempio
package.json

Messa a punto la dipendenza, iniziamo ad integrare Angular routing nell’applicazione, e quindi dobbiamo creare il modulo AppRoutingModule all’interno del file app-routing.module.ts, come visto all’inizio dell’articolo.

Non dimenticare di importare il modulo in AppModule!

Codice di esempio
app.module.ts

Un altro punto fondamentale è l’utilizzo della direttiva , senza la quale non potresti visualizzare il contenuto delle rotte. Assicuriamoci di inserire la direttiva nel file app.component.html, il punto di ingresso dell’applicazione.

Codice di esempio
app.component.html

Riepilogando, abbiamo:

  1. installato la dipendenza @angular/router
  2. aggiunto il file app-routing.module.ts e importato il modulo in app.module.ts
  3. aggiunta la direttiva in app.component.html

Non resta che iniziare ad usare Angular routing. Continua a leggere.

 

Aggiungere una rotta in Angular

Nel caso più semplice, si associa ad una rotta una path di destinazione e un componente da caricare.

 

#1 Creare un nuovo componente

Andiamo quindi a creare un nuovo componente user utilizzando la CLI.

ng g c user

Lo script precedente genera una cartella user con all’interno i file che rappresentano il nuovo componente user.component.*.

Quando si utilizza un nuovo componente, questo deve essere aggiunto alle declarations del modulo che lo utilizza. Con lo script generate appena visto la dichiarazione del componente verrà aggiunta in automatico al modulo, in questo caso app.module.ts.

 

#2 Definiamo la rotta user

A questo punto possiamo creare una rotta con path “user” e component UserComponent. Quando navigheremo all’indirizzo /user verrà visualizzato il contenuto del componente User.

Per semplicità, rimuoviamo tutto il codice presente in app.component.html lasciando solo la direttiva.

Codice di esempio
app-routing.module.ts
 

Navigare tra le pagine di un'applicazione Angular utilizzando Angular Routing

Per accedere alle altre pagine dell’applicazione possiamo utilizzare dei pulsanti. Per definire questo comportamento abbiamo sostanzialmente due scelte:

  • utilizzare routerLink direttamente nel tag html del pulsante
  • richiamare un metodo definito all’interno del file .ts tramite <button (click)=”..”>, utilizzando l’oggetto Router.

Vediamo con un esempio come implementare le due modalità.

 

Utilizzare la classe Router

La classe Router fa parte della libreria @angular/router, e permette, tra le altre cose, la navigazione verso le altre rotte.

In questo esempio utilizzeremo il metodo navigate di Router per “navigare” verso la pagina User.

Come visto per il componente User, creiamo un nuovo componente Home da cui poter navigare verso User, e viceversa.

ng g c home

Nel file home.component.html inseriamo il pulsante “Go to User” che andrà a chiamare il metodo goToUser definito in HomeComponent come in figura.

Allo stesso tempo definiamo la rotta per il componente Home associata alla path base “/” e aggiungiamola al file app-routing.module.ts. In questo modo, quando avviamo l’applicazione, visualizzeremo Home come pagina iniziale.

<button (click)="goToUser()">Go to User</button>
 

Utilizzare la direttiva routerLink

Se per navigare dalla pagina home alla pagina user abbiamo utilizzato la classe Router e un button, nel componente User, invece, andiamo ad utilizzare la direttiva routerLink applicata al tag a per navigare verso home da user.

L’unica modifica da fare in questo caso è sul file user.component.html aggiungendo la seguente riga di codice.

<a routerLink="/">Go to Home</a>

Cosa fare ora?

Hai appena visto un semplice esempio di routing in Angular. Vista la sua semplicità, non dovrebbero esservi stati problemi nel seguire l’implementazione.

Angular Routing non è solo questo.. Esistono altre funzionalità di cui parlo (o parlerò) in altri post, li trovi tutti in questa pagina. Se vuoi rimanere aggiornato sulle nuove pubblicazioni ti invito a seguire la pagina Facebook del sito.

Nel frattempo, puoi dare un’occhiata all’articolo che mostra un esempio di applicazione Angular completo in cui troverai alcune delle funzionalità riguardanti il routing in Angular e molto altro. Ti consiglio di leggerlo. A riguardo, ho reso disponibile tutto il codice che troverai nell’esempio su GitHub a questo indirizzo.

Link di riferimento:

No comment yet, add your voice below!


Add a Comment

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *