Naviguer entre les pages avec Ionic
Un menu ‘slide’ a été généré automatiquement à l’installation de votre application. Il vous permet déjà de naviguer entre deux pages : Hello Ionic et My first List.
Mais comment gérer le menu existant?
Les fonctionnalités du menu sont gérées par les fichiers app.html et app.component.ts du dossier /src.
Le fichier .html a plusieurs rôles :
- il créé le menu slide
- il se charge d’afficher dynamiquement tous les liens de votre menu
- il déclare le composant nav (pile de navigation)
Le fichier .ts (composant racine) sert à
- définir la premier page de votre application qui va charger le composant nav.
- il déclare aussi dans un tableau tous les liens (pages) à charger dans le menu.
- il gère la fermeture du menu et l’ouverture d’une page
Ajouter une page à la navigation
Vous allez ajouter la page contact (ContactPage) créée précédemment. Il suffit de rajouter sa référence dans le tableau de tous les liens du fichier src/ app.component.ts.
Ne pas oublier de déclarer la nouvelle page dans le fichier :
Si vous testez la navigation vous verrez bien apparaître le lien Contact. A ce stade la page contact est vide et il n’y aucun moyen de revenir sur la première page. En effet le menu ‘hamburger’ ne s’affiche pas.
Vous allez ajouter le menu ‘hamburger’ à la page. Il faut ouvrir le fichier pages/contact.html pour gérer l’interface et rajouter un bouton (button) qui contiendra l’icone ‘hamburger’ (<ion-icon..) .
<button ion-button menuToggle> <ion-icon name="menu"></ion-icon> </button>
Capture d’écran :
La page racine est redéfinie et contient la vue Contact.
La navigation dans ce cas fonctionne par substitution : en cliquant sur un lien on redéfinit la page racine dans le fichier .ts avec la méthode setRoot().
Navigation stack
Ionic propose une autre façon de naviguer qui repose sur la logique de l’empilement : la nouvelle page vient se poser sur la précédente. On créer une pile de navigation (navigation stack). A partir de la rootPage on va naviguer vers une autre page : on effectue un push dans le stack.
Voici une démonstration de mise sur la pile (push) avec la page MyFirstList :
Et voici le code de la vue dans /src/pages/list.html. Les liens, avec l’événement click associé, sont créés dynamiquement dans le contenu de la page . Les informations de chaque item sont fournies dans le paramètre item de la fonction appelée.
Pour le traitement de la page (la fichier list.ts), c‘est le composant navController qui ajoute la vue à la pile avec la méthode push().
Navigation onglet
On commence par créer une page Tabs contenant les onglets
ionic g page Tabs Detail --no-module
et on rajoute deux autres pages, pour l’exemple activities et chat :
ionic g page activities Detail --no-module
ionic g page chat Detail --no-module
La page HTML Tabs contient la liste des entrées du menu
<ion-content padding>
<ion-tabs>
<ion-tab [root]="tab1Root" tabTitle="activities" tablicon="home"></ion-tab>
<ion-tab [root]="tab2Root" tabTitle="chat" tablicon="home"></ion-tab>
</ion-tabs>
</ion-content>
La page .ts permet de lier chaque entrée à une page
import { Component } from '@angular/core';
import { NavController, NavParams } from 'ionic-angular';
import { ChatPage } from '../chat/chat';
import { ActivitiesPage } from '../activities/activities';
@Component({
selector: 'page-tabs',
templateUrl: 'tabs.html',
})
export class TabsPage {
tab1Root = ActivitiesPage;
tab2Root = ChatPage;
constructor(public navCtrl: NavController, public navParams: NavParams) {
}
ionViewDidLoad() {
console.log('ionViewDidLoad TabsPage');
}
}
Pour chaque page vous pouvez prévoir le retour à la page racine :
– du coté HTML
<ion-header>
<ion-navbar>
<button ion-button (click)="goToHome()"><ion-icon name="home"></ion-icon></button>
<ion-title>chat</ion-title>
</ion-navbar>
</ion-header>
– du coté .ts
goToHome(){
let nav = this.app.getRootNav();
nav.setRoot(HelloIonicPage);
}
.. ne pas oublier d’importer pour chaque page (activities et chat) les composants App et HelloIonicPage :
import { App, NavController, NavParams } from 'ionic-angular';
import { HelloIonicPage } from '../hello-ionic/hello-ionic';
.. et de déclarer dans le constructeur le paramètre app :
constructor(public app: App, public navCtrl: NavController, public navParams: NavParams) { }
Pour tester votre nouvelle page Tabs, n’oubliez pas de la rajouter dans votre navigation principale (voir plus haut).
Transmettre des données à une page
Lorsque vous effectuez un push, l’item sur lequel vous cliquez peut fournir à la page de destination des informations, comme c’est le cas dans notre exemple ou l’item doit fournir à la page item-details le détails à afficher.
Pour récupérer les paramètres du coté de la page détail (fichier src/pages/item-details.ts) on utilise la méthode get() du composant navParams.
Pour l’affichage de la vue (src/pages/item-details.html), c’est la propriété selectedItem définit dans le fichier .ts qui alimente le contenu dynamique de la page.
Méthode pop()
Inversement pour enlever une vue posée sur la pile on utilise la méthode pop(). Avec votre application la méthode est appelée de manière transparente lorsque vous cliquez sur le bouton retour (Back).
Note : pour afficher le bouton de retour automatiquement, il faut utilisez le composant <ion-navbar> dans la vue.
Vous pouvez personnaliser le texte du bouton de retour dans le fichier src/app/app-module.ts. Il faut transmettre la configuration ‘backButtonText‘ dans le deuxième argument de IonicModule.forRoot().
IonicModule.forRoot(MyApp,{
backButtonText: 'retour',
backButtonIcon: 'ios-arrow-back',
iconMode: 'md'
})
Capture d’écran
Affichage
Vous êtes capables maintenant de naviguer entre les pages avec Ionic. Il est aussi important de comprendre le lien entre le fichier de vue .html et le fichier contrôleur .ts.
