Come funziona il routing in Ionic 6

 

Una parte fondamentale dello sviluppo di app Ionic è configurare il routing e garantire una navigazione fluida tra le pagine.

 

In questo articolo andiamo ad analizzare le differenze e diversi esempi di come sfruttare il routing in Ionic!

 

Cos’è

 

Per spiegarne il funzionamento, facciamo riferimento agli strumenti messi a disposizione da Angular come l’oggetto Router, anche se molto dipende dalla tecnologia che usiamo insieme a Ionic.

 

Angular fornisce il modulo RouterModule che contiene tutti gli strumenti di cui avremo bisogno per configurare la nostra applicazione in modo tale da mostrare una diversa view a seconda dell’indirizzo digitato nella barra del browser.

 

Come funziona

 

Prima di continuare con la spiegazione, apriamo però un momento il file index.html presente nella cartella src di una qualsiasi app in Ionic, di cui qui riportiamo un esempio:

 

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Ionic App</title>

  <base href="/" />

  <meta name="color-scheme" content="light dark" />
  <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
  <meta name="format-detection" content="telephone=no" />
  <meta name="msapplication-tap-highlight" content="no" />

  <link rel="icon" type="image/png" href="assets/icon/favicon.png" />

  <!-- add to homescreen for ios -->
  <meta name="apple-mobile-web-app-capable" content="yes" />
  <meta name="apple-mobile-web-app-status-bar-style" content="black" />
</head>

<body>
  <app-root></app-root>
</body>

</html>

 

Come possiamo notare dal frammento di codice riportato sopra, immediatamente dopo l’elemento <title> è presente un elemento <base href=”/”> avente un attributo href impostato al valore ‘/’.

 

Con questa proprietà andiamo ad indicare l’URL di base rispetto al quale sono relativi tutti i path utilizzati dell’applicazione e si tratta di un elemento necessario.

 

Infatti nelle versioni di Angular successive alla 2 la strategia predefinita per comporre le route prende il nome contenuto in PathLocationStrategy e si avvale della History API per gestirne lo storico, ossia il meccanismo con cui gestire lo storico della sessione del browser.

 

Se avessimo cambiato il valore dell’attributo href dell’elemento <base>, per esempio <base href=”/la-mia-app”>, la pagina iniziale della nostra applicazione sarebbe stata mostrata partendo dall’indirizzo http://localhost:4200/la-mia-app/.

 

Questo significa di conseguenza che tutti gli altri percorsi sarebbero stati automaticamente costruiti a partire dalla base fornita, e quindi per esempio http://localhost:4200/la-mia-app/my-route.

 

Esempi

 

Creazione di una nuova pagina

 

Quando aggiungi una nuova pagina al tuo progetto Ionic, questa viene automaticamente aggiunta alla configurazione di routing all’interno di app-routing.module.ts, come visibile nella penultima riga della seguente immagine:

 

Esempio di creazione di una pagina in Ionic
Esempio di creazione di una pagina in Ionic

 

Questo significa che potremo utilizzare la route definita all’interno del file di routing in qualsiasi altra pagina per navigarne il contenuto.

 

Utilizzo di una pagina esistente

 

Puoi utilizzare la stessa pagina in più posizioni assicurandoti che esista un percorso per essa da tali posizioni.

 

Ad esempio, se desideri che la pagina “Dettaglio” sia accessibile all’interno di Tab1 della tua applicazione e Tab2, devi avere una dichiarazione del path /detail nel router del file app-routing.module.ts sia per Tab1 che per Tab2.

 

import { NgModule } from '@angular/core'; 
import { RouterModule, Routes } from '@angular/router'; 
const routes: Routes =
 [ { path: 'detail', component: DetailPage},
{ path: 'tab1', component: Tab1Component},
...

 

Utilizzare routerLink

 

Quando cerchiamo di andare verso un’altra pagina tramite un pulsante o un qualsiasi altro elemento, possiamo utilizzare la proprietà routerLink specificando la pagina o il percorso che deve portarci ad una pagina diversa.

 

Se questa istruzione non funzionasse e generasse un errore, assicurarati che il modulo RouterModule sia incluso nel modulo delle tue pagine!

 

Nell’esempio seguente, analizziamo un caso d’uso e facciamo in modo che l’utente venga rimandato alla pagina detail di un prodotto (e lo specifichiamo grazie all’ID dell’oggetto) quando clicca sull’elemento ion-item.

 

<ion-item
  [routerLink]="'/detail/' + item.id"
  routerDirection="forward"
></ion-item>

 

In questo modo, avvieremo DetailPage e le forniremo un parametro id route, che potremo anche utilizzare all’interno del componente.

 

Questo è in qualche modo molto vantaggioso perché significa che non è sempre necessario impostare un’associazione di eventi e coinvolgere il NavController ogni volta che si desidera passare a un’altra pagina fornendo dei dati.

 

Si noti inoltre che sempre nell’esempio forniamo un routerDirection per indicare se si tratta di una navigazione in avanti o indietro in modo che l’animazione di transizione dello schermo possa essere applicata correttamente.

 

Se questo non viene fornito, Ionic indovinerà quale animazione dovrebbe utilizzare, ma è meglio essere espliciti.

 

Analizziamo ora il file app-routing.module.ts:

 

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

const routes: Routes = [
  {
    path: '',
    component: HomeComponent
  },
 {
    path: 'saldi',
    component: SaldiComponent
  },
  {
    path: 'sconti',
    redirectTo: SaldiComponent
  },
  {
    path: 'not-authorized',
    component: UnauthorizedComponent,
  },
  {
    path: 'not-found',
    component: ErrorComponent,
  },
  {
    path: '**',
    redirectTo: '/not-found',
    data: {
      title: 'Pagina non trovata'
    }
  }
];

@NgModule({
  imports: [
    RouterModule.forRoot(routes)
  ],
  exports: [
    RouterModule
  ],
  declarations: []
})
export class AppRoutingModule { }

 

Ciascun oggetto ha una proprietà path pari al percorso in corrispondenza del quale vogliamo venga mostrato un certo componente che indichiamo con la proprietà component.

 

Nell’esempio ci sono poi degli oggetti leggermente diversi dagli altri. Notate infatti che nell’ultimo oggetto dell’array abbiamo assegnato il simbolo ‘**’ alla proprietà path.

 

Si tratta della cosiddetta wildcard route, una sorta di percorso jolly che intercetta qualsiasi URL.

 

È bene sottolineare una proprietà importante da tenere in mente quando si definisce l’oggetto Routes: infatti l’ordine in cui vengono inseriti i diversi oggetti di tipo Route nell’array è rilevante!

 

Il Router di Angular, dovendo decidere quale componente mostrare in corrispondenza di un certo percorso, inizia a scorrere l’array dal primo oggetto e si ferma non appena ne trova uno con una proprietà ‘path‘ che corrispone al percorso.

 

Per questo motivo è necessario inserire l’oggetto avente la wildcard route come proprietà path alla fine dell’array altrimenti verrebbero individuati tutti i percorsi e verrebbe sempre mostrato il componente PageNotFoundComponent.

 

Abbiamo poi usato nel file di routing un altro oggetto con una proprietà redirectTo che fa in modo di redirigere il browser all’indirizzo con percorso pari a ‘/saldi‘ ogni volta che si accede al percorso ‘/sconti‘.

 

Utilizzo di Router

 

Per navigare in modo programmatico attraverso le diverse pagine, è possibile utilizzare il Router standard di Angular nelle tue pagine e chiamando uno di questi metodi:

 

...
this.router.navigateByUrl('/login');
this.router.navigate(['/detail', { id: itemId }]);
...

 

Il primo naviga in maniera puntuale verso una pagina ed è l’equivalente di routerLink, ma questo può essere utilizzato all’interno del file *.ts.

 

Per poterlo questa modalità di routing in Ionic, è necessario importarlo nel constructor del componente/servizio che utilizziamo!

 

class MyComponent {
   constructor(router: Router) {
      this.router.navigateByUrl(...);
   }
}

 

La funzione navigate permette invece di creare un nuovo URL applicando quanto passato nell’array, con la possibilità di aggiungere dei parametri extra, come l’ID che viaggerà insieme all’indirizzo della route e potrà essere utilizzato nel componente di destinazione.

 

Utilizzo di NavController

 

Il modo migliore per navigare a livello di codice in un’applicazione Ionic o Angular è utilizzare NavController.

 

Questo è in realtà abbastanza simile al modo in cui avresti utilizzato il routerLink per navigare da una pagina all’altra specificando la direzione, tranne per il fatto che ora hai tutto all’interno di uno di questi metodi, come mostrato di seguito:

 

this.navCtrl.navigateForward('/my-route');

this.navCtrl.navigateBack('/my-route');

this.navCtrl.navigateRoot('/my-route');

 

Il vantaggio dell’utilizzo di NavController per navigare è che consente di specificare una “direzione” per la navigazione attraverso la funzione, che aiuterà <ion-router-outlet> di Ionic a visualizzare correttamente la transizione della pagina.

 

Che viaggio quello nel mondo dei router!

 

Risorse utili

 

Ti potrebbe piacere anche…

Condividi la tua opinione