Come funziona il routing in Ionic 6

  • Di
  • 2022-04-28 - 6 minuti
banner

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.webp" />

  <!-- 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 è presente un elemento 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 , per esempio , 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},
...

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

Post correlati

Partners

Community, aziende e persone che supportano attivamente il blog

Logo di Codemotion
Logo di GrUSP
Logo di Python Milano
Logo di Schrodinger Hat
Logo di Python Biella Group
Logo di Fuzzy Brains
Logo di Django Girls
Logo di Improove
Logo del libro open source

Iscriviti alla newsletter

Per non perderti gli ultimi articoli e per vincere biglietti e gadget TheRedCode

Riceverai una volta al mese (o anche meno) gli articoli più interessanti pubblicati sul blog, e potrai provare a vincere un biglietto per uno dei prossimi eventi!

Andiamo!