La navigazione nelle app Ionic 2

Ionic 2 introduce un meccanismo molto intuitivo nella gestione del routing, cioè la navigazione tra le view di un'app. Questo meccanismo è basato sulla metafora dello stack su cui vengono accumulate e tolte le viste man mano che si naviga nell'applicazione secondo il classico approccio Last In First Out.

In sostanza, partendo dalla root page della nostra applicazione, che abbiamo specificato tramite l'attributo root del componente <ion-nav>, quando ci spostiamo verso un'altra view mettiamo in cima allo stack la nuova view, mentre quando torniamo indietro togliamo la view che si trova in cima allo stack e la mostriamo all'utente quella sottostante.

Tornare indietro sì, ma non sempre

Questo meccanismo è molto comodo quando si vuole mantenere la storia delle view visitate ed avere la possibilità di tornare indietro, come ad esempio quando si ha una gerarchia di view.

In alcune situazioni si potrebbe voler visualizzare una view senza mantenere la storia delle altre view visitate. Un esempio potrebbe essere il passaggio dalla schermata di login di un'applicazione alla pagina principale: una volta autenticati non è opportuno consentire nuovamente l'accesso alla schermata di login, a meno che non sia scaduta la sessione o l'utente si sia disconnesso dall'applicazione.

In questi casi è possibile impostare una nuova root page per la nostra applicazione.

root page != root component

Attenzione a non confondere però il root component dell'applicazione con la sua root page.

• Il root component di un'applicazione rappresenta il componente iniziale della gerarchia di componenti di cui è composta un'applicazione Angular 2. Una volta definito, il root component non può essere cambiato a runtime.
• La root page è un concetto di Ionic 2 e rappresenta la pagina iniziale dello stack di navigazione. Essa può essere cambiata durante l'esecuzione dell'applicazione quando non si vuole mantenere la storia della navigazione tra le view.

Per fissare i concetti e vedere in pratica come funziona il modello di navigazione proposto da Ionic 2 vediamo come implementare la visualizzazione dei dettagli di una notizia nella nostra applicazione d'esempio.

Creare una pagina: ionic generate

Per prima cosa creiamo una nuova pagina che avrà il compito di visualizzare i dettagli di una notizia. Facciamolo utilizzando il comando ionic generate, come mostrato di seguito:

ionic generate page newsPage

Il risultato dell'esecuzione di questo comando sarà la creazione di una cartella news-page sotto la cartella pages con i tre file che compongono la pagina Ionic: news-page.ts, news-page.html e news-page.scss.

NavController, push e pop. Introdurre la navigazione

Per il momento lasciamo questi file così come sono stati generati ed occupiamoci della navigazione dalla home page che contiene l'elenco delle notizie alla pagina di dettaglio della singola notizia.

In particolare, modifichiamo il componente NewsHeadline per gestire opportunamente il clic sul pulsante Leggi:

import {Component, Input} from '@angular/core';
import {News} from './news'; 
import {NewsPage} from '../../pages/news-page/news-page';
import { NavController } from 'ionic-angular'; 
@Component({
	selector: 'news-headline',
    	template: `
<ion-item>
    <ion-thumbnail item-left>
      <img src="{{news.imagePreviewUrl}}">
    </ion-thumbnail>
    <h2>{{news.title}}</h2>
    <p>{{news.date | date: 'dd/MM/yyyy'}}</p>
    <button clear item-right (click)="goToNews()">Leggi</button>
</ion-item>`
})
export class NewsHeadline {
    @Input()
    news: News; 
    constructor(public navCtrl: NavController) {} 
	goToNews() {
		this.navCtrl.push(NewsPage);
	}
}

Osservando il codice notiamo l'importazione della pagina NewsPage e del servizio Ionic NavController. Questo servizio abilita la navigazione tra le view dell'applicazione consentendoci di gestire lo stack a cui abbiamo accennato prima. Per renderlo disponibile all'interno del componente NewsHeadline è stato passato al costruttore e dichiarato pubblico.

Abbiamo poi definito il metodo gotoNews() che utilizza il metodo push() di NavController per mettere in cima allo stack di navigazione la pagina NewsPage. L'effetto è quello di mettere in primo piano la view implementata dalla pagina NewsPage. Non ci resta, quindi, che associare all'evento clic sul pulsante Leggi la chiamata al metodo gotoNews().

Grazie a questa implementazione, quando l'utente clicca sul pulsante Leggi, la pagina NewsPage viene posta in cima allo stack di navigazione per l'esecuzione del metodo push() del servizio NavController.

Anche se implementata a livello rudimentale, Ionic agevola la navigazione tra le pagine inserendo automaticamente nella nuova pagina la possibilità di tornare indietro, come mostrato dalla seguente immagine:

Vediamo infatti in alto a sinistra la freccia che offre la possibilità di ritornare alla home page da cui siamo partiti. Il tutto è automaticamente gestito dal componente <ion-navbar> posto in cima al markup della pagina NewsPage nel codice generato da Ionic CLI. Cliccando sulla freccia, Ionic rimuove dalla cima dello stack la pagina corrente visualizzando nuovamente quella di provenienza. Se volessimo tornare indietro tramite codice, avremmo potuto eseguire il metodo pop() di NavController.

In sintesi, i metodi push() e pop() di NavController ci consentono di gestire lo stack di navigazione in maniera molto semplice.

SetRoot, impostare una root page

Come abbiamo detto prima, se volessimo passare ad una pagina specifica senza mantenere la storia della navigazione, occorrerebbe impostare una nuova root page. In questo caso possiamo utilizzare il metodo setRoot() di NavController come mostrato dal seguente esempio:

goToNews() {
	this.navCtrl.setRoot(NewsPage);
}

Allo stato attuale della nostra implementazione, quando clicchiamo sul pulsante Leggi vediamo sempre la stessa view indipendentemente dalla notizia su cui abbiamo cliccato. Naturalmente quello che vogliamo è che cliccando sull'headline di una notizia passiamo ad una view che ci permetta di leggere l'intero contenuto della notizia stessa. Per ottenere questo effettueremo alcune modifiche al codice con lo scopo di passare alla pagina NewsPage la notizia correntemente selezionata, in modo che possa essere visualizzata.

Per passare la notizia corrente alla NewsPage quando l'utente clicca sul pulsante Leggi modifichiamo il relativo markup come segue:

<button clear item-right (click)="goToNews(news)">Leggi</button>

In questo caso abbiamo passato al metodo goToNews() l'istanza della notizia corrente news. Questo parametro sarà preso in carico dal metodo e passato alla pagina PageNews tramite il metodo push().

Ai parametri del metodo push dedichiamo la prossima puntata.