IONIC Section 7 - 7.1 Navigation et Routing dans les applications Ionic module d’introduction

Bonjour à tous, nous avons donc examiné pour la première fois comment nous pouvions basculer entre différentes pages de notre application dans les derniers modules, mais il s’agissait d’un aspect très basique, vous pouvez faire beaucoup plus dans une application Ionic + Angular. Et dans ce module, vous apprendrez donc toutes les différentes façons de passer d’une page à l’autre. Cela ne signifie pas seulement comment déclencher ces commutateurs, mais surtout comment implémenter des choses comme des onglets, etc. Pour être plus précis, nous allons examiner le routeur Angular et le contrôleur de navigation Ionic, vous n’avez pas encore entendu parler du contrôleur de navigation, mais c’est un autre outil qui peut nous aider à changer de page, bien que vous apprenez principalement à utilisez le routeur Angular. Vous apprendrez comment ajouter des onglets à votre application. Vous pourrez donc, si vous le souhaitez, naviguer dans un onglet et ajouter un sidedrawer que vous pouvez utiliser pour la navigation. Vous apprendrez comment utiliser les surimpressions, les overlays, ou plus précisément, un modal, qui est aussi un peu une navigation car il occupe la page et donne à l’utilisateur une nouvelle page en haut de l’autre, pour ainsi dire et nous reviendrons à la fin du module. Plongez également dans « guards » qui est une fonctionnalité fournie par Angular, pas quelque chose venant d’Ionic mais une fonctionnalité que nous pouvons utiliser et bien-sûr dans les applications Ionic Angular qui peuvent nous aider par exemple avec des choses comme l’authentification. Donc, beaucoup de terrains à couvrir, plongeons directement dans le sujet dans la prochaine vidéo.

En résumé

Cette leçon introduit les concepts avancés de navigation et routing dans Ionic, bien au-delà du simple basculement entre pages. Elle couvre le Vue Router, le Navigation Controller d'Ionic, les onglets, les menus latéraux, les modales et les guards Angular pour protéger les routes avec l'authentification.

Points clés

Vue Router et Navigation Controller d'Ionic pour une navigation avancée et flexible
Implémentation des onglets (tabs) pour une navigation par onglets natifs
Menus latéraux (side drawer) pour la navigation principale et secondaire
Modales (overlays) pour afficher du contenu par-dessus la page actuelle
Guards Angular pour protéger les routes et gérer l'authentification
Combinaison des outils du framework pour des applications mobiles fluides et ergonomiques

Questions fréquentes

Quelle est la différence entre le Vue Router et le Navigation Controller d'Ionic ?

Le Vue Router est la fonctionnalité standard d'Angular pour le routing au niveau framework, tandis que le Navigation Controller est un outil spécifique à Ionic pour une gestion avancée et native de la navigation mobile.

Comment utiliser les onglets pour la navigation dans Ionic ?

Ionic propose un composant natif de tabs qui permet de créer une navigation par onglets. Chaque onglet peut contenir ses propres pages et historique de navigation.

Qu'est-ce que les guards et comment les utiliser pour l'authentification ?

Les guards sont une fonctionnalité d'Angular qui permet de protéger les routes en contrôlant l'accès. Ils peuvent empêcher l'accès aux pages protégées si l'utilisateur n'est pas authentifié, idéal pour les zones privées de l'application.

Quelle est la différence entre une modale et une page standard ?

Une modale (overlay) s'affiche par-dessus le contenu actuel sans remplacer la page, tandis qu'une navigation standard remplace complètement la vue actuelle.