Bonjour à tous! Dans cet article nous allons voir comment gérer la navigation entre vos différentes pages dans Ionic.
C’est l’une des fonctionnalités les plus basiques d’Ionic et je vous conseille de suivre ce tutoriel juste après avoir installé Ionic sur votre ordinateur.
Nous allons donc voir étapes par étape comment créer de nouvelles pages et comment aller et venir à travers ces différentes pages.
Comment créer une nouvelle page ?
Nous allons commencer par créer une nouvelle page dans notre application Ionic.
Pour cela ouvrez votre Terminal ou la Console de votre ordinateur et rendez-vous dans le dossier de votre application Ionic, par exemple en tapant la commande :
cd appli-ionic/drissas/
Vérifiez bien que vous vous trouvez à présent dans le répertoire de votre application, dans mon cas dans l’application « drissas ».
Nous allons maintenant entrez une commande d’Ionic qui va réaliser tout le travail pour: créer notre nouvelle page et configurer sa navigation.
Voilà la commande en question avec comme paramètre le nom de notre page :
ionic g page LeNomDeVotrePage
Par exemple dans mon application Driss AS, j’ai créé une page pour montrer tous mes réseaux sociaux comme Facebook et Instagram. J’ai donc créé une nouvelle page que j’ai appelé très simplement « Social » :
ionic g page Social
Une fois la commande entrée, vous devriez voir apparaître un nouveau dossier dans votre application, portant le nom de votre page et contenant trois fichiers à l’intérieur.
Votre application a donc bien été crée, nous pouvons maintenant passer à l’étape suivante pour naviguer vers cette page!
Comment naviguer d’une page à une autre ?
Maintenant que notre page a bien été crée, nous allons étudier le fonctionnement de la navigation dans Ionic.
Comme je vous l’ai dit, la commande que nous avons entré précédemment nous a fait tout le travail. Elle a créé le dossier de notre page, mais également géré et créé la redirection vers cette page.
Rendez-vous dans le fichier suivant où sont écrites toutes les redirections de notre application :
/src/app/app-routing.module.ts
Jetons un œil à mon fichier app-routing.module.ts qui pour l’instant ne propose que trois redirections :
import { NgModule } from '@angular/core';
import { PreloadAllModules, RouterModule, Routes } from '@angular/router';
const routes: Routes = [
{ path: '', loadChildren: './tabs/tabs.module#TabsPageModule' },
{ path: 'social', loadChildren: './social/social.module#SocialPageModule' },
{ path: 'about', loadChildren: './about/about.module#AboutPageModule' },
];
@NgModule({
imports: [
RouterModule.forRoot(routes, { preloadingStrategy: PreloadAllModules })
],
exports: [RouterModule]
})
export class AppRoutingModule {}
Dans mon application pour le moment je n’ai créé que deux nouvelles pages, donc Ionic m’a ajouté deux « routes », une pour chacune de mes pages « Social » et « About ».
Par exemple la redirection pour la page Social est la suivante :
{ path: 'social', loadChildren: './social/social.module#SocialPageModule' }Ce qui veut dire que nous pouvons maintenant utiliser l’attribut routerLink, dans n’importe quelle page de notre application, avec comme valeur « /social » pour rediriger notre utilisateur vers notre page Social.
Concrètement, nous pouvons ajouter l’attribut suivant à n’importe lequel de nos éléments Ionic :
routerLink="/social"
Ou pour rediriger vers la page About :
routerLink="/about"
Je prend l’exemple de la page d’accueil de mon application dans laquelle je redirige vers la page Social en cliquant sur un ion-item :
<ion-item routerLink="/social"> <ion-icon slot="start" color="medium" name="logo-facebook"></ion-icon> <ion-label>Réseaux sociaux</ion-label> </ion-item>
Je vous invite donc à tester si cela fonctionne bien dans votre application, avec différentes pages de test par exemple.
Comment revenir à la page précédente ?
Maintenant que notre utilisateur est redirigé vers la page notre choix, il faut lui permettre de revenir en arrière, ce qui n’est pas forcément géré automatiquement par Ionic.
Il existe plusieurs solutions pour faire revenir à la page précédente, nous allons utiliser aujourd’hui la plus simple d’entre elle : ion-back-button.
Rendez-vous donc dans le fichier de votre nouvelle page, par exemple dans mon cas le fichier :
src/app/social/social.page.html
Puis nous allons le code suivant pour proposer un bouton retour à notre utilisateur :
<ion-buttons slot="start"> <ion-back-button defaultHref="/home" text="Accueil"></ion-back-button> </ion-buttons>
Notez que vous devons entrer la référence de notre page d’origine, par exemple ici la page Home, pour bien ramener l’utilisateur à cette page précisément.
Si votre page d’origine est la page Tab1, alors vous devez entrer l’attribut defaultHref= »/tab1″.
Insérez maintenant ce code dans votre ion-header, et plus précisément dans votre ion-toolbar, pour que le bouton Retour soit affiché à gauche du titre de votre page :
<ion-header>
<ion-toolbar>
<ion-buttons slot="start">
<ion-back-button defaultHref="/home" text="Accueil"></ion-back-button>
</ion-buttons>
<ion-title>Mes réseaux</ion-title>
</ion-toolbar>
</ion-header>Voilà, le bouton retour devrait bien s’afficher et permettre à vos utilisateurs de naviguer facilement dans votre application !
Quels sont les autres moyens de navigation ?
Nous n’avons vu aujourd’hui, qu’une des méthodes de navigation dans Ionic, elle est notamment la plus simple pour commencer à créer ses applications.
Il existe une deuxième méthode très pratique que j’utilise souvent dans mes applications, ils ‘agit de la méthode Modal.
Je vous proposerais très bientôt un autre tutoriel pour vous permettre d’utiliser les modals dans votre application, en attendant je vous laisse la documentation d’Ionic : https://ionicframework.com/docs/api/modal
