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 le rotte in Angular

Per realizzare una nuova pagina in un’applicazione Angular, accessibile tramite URL, si definisce una nuova rotta. Questa, in configurazione base, dovrà specificare una path di accesso e un componente, come vedrai tra poco.

Il file di configurazione delle rotte base dell’applicazione è app-routing.module.ts. È qui che dovrai definire le pagine principali della tua applicazione.

 

#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>
 

Cambiare pagina tramite variabile path

Per passare ad una pagina che identifica una risorsa, ad esempio il dettaglio di un utente identificato tramite id univoco, puoi realizzare una path dinamica per la tua rotta. Questa, sarà composta da un parametro variabile passato dalla pagina di provenienza.

path: 'user/:id'

In questo caso, il parametro id (seguito da : ) assumerà un valore specificato.

Vediamo allora come fare a passare il parametro id alla rotta, visualizzando la nuova pagina.

Come visto poco fa, è possibile navigare tra le pagine (rotte) di un’applicazione Angular utilizzando l’oggetto Router oppure la direttiva routerLink. Di seguito, la nuova implementazione per entrambe le modalità.

<a [routerLink]="['/user', 1]">Go to Home</a>

In generale, è possibile passare “pezzi” di URL all’interno delle parentesi [.., ..]. Ad esempio, la path ‘user/:id/code/:code’ puo essere raggiunta da [‘user’, variabileId, ‘code’, variabileCode].

Importante è specificare le parentesi [ ] intorno alla direttiva routerLink, indicando cosi che stiamo utilizzando dei parametri. Le parentesi “[ ]” all’interno della stringa a destra di = indicano, invece, che stiamo utilizzando una lista (array) di elementi che compongono la path.

Ad esempio, avremmo potuto scrivere [routerLink]=”user.id” per una path con solo ‘:id’.

Per la classe Router:

this.router.navigate(['/user', 1]);
 

Leggere i parametri dalla URL

Una volta passato un parametro tramite variabile path, specificando quindi in modo univoco una URL, dall’altra parte, potremmo aver bisogno di leggere tale parametro, ad esempio, per caricare dal server la risorsa specifica.

L’oggetto da utilizzare è ActivatedRoute della libreria.

constructor(
    private readonly route: ActivatedRoute
) { 
    this.route.params.subscribe(params => {
        if (params.id) {
            // utilizza params.id
        }
    }
}
 

Cosa fare ora?

In questo articolo hai visto come utilizzare Angular Routing per la navigazione, nel modo più semplice possibile.

Esistono, ovviamente, altre funzionalità sul routing di Angular come, ad esempio, il caricamento dei componenti lazy loading, il caricamento di risorse prima dell’attivazione della rotta (resolve), piuttosto che l’utilizzo di guardie o gerarchie di rotte.

Ho realizzato un esempio di applicazione Angular completo con alcune di queste funzionalità oltre a quanto visto in questo articolo. A riguardo, ho reso disponibile tutto il codice che troverai nell’esempio su GitHub a questo indirizzo.

Link di riferimento:

Recommended Posts

No comment yet, add your voice below!


Add a Comment

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