IONIC Section 7 - 7.2 Comment fonctionne le Routing dans une application Ionic + Angular ?

Bonjour à tous, il est vraiment important que vous compreniez comment fonctionne la navigation en coulisses. Dans une application Ionic + Angular, nous utilisons le router Angular pour la navigation et c’est ce qu’on a vu dans la vidéo précédente et aussi dans le module dédié à cela. Nous configurons nos routes dans notre configuration de router Angular comme dans une application Angular. Nous pouvons ensuite utiliser le lien ou la méthode de navigation lorsque nous injectons le router pour basculer entre les différents chemins et donc les différentes pages. On va attaquer la partie interessante lorsqu’on utilise le router dans une application Ionic, car cette application Ionic avec le package « @ angular/ionic » encapsule en quelque sorte cette fonctionnalité de routage Angular et vous pouvez dire qu’elle le fait en utilisant le router de sortie si vous vous en souvenez. C’est le cas pour ajouter toutes ces jolies transitions et pour cela Ionic considère la navigation ou les différentes pages comme une pile de page. Parce que si vous pensez à une application mobile, vous voyez généralement une page à la fois et vous pouvez accéder à une nouvelle page ou appuyer sur le bouton « précédent » pour revenir en arrière. Donc, vous pouvez essentiellement faire la même chose dans le navigateur bien sûr. Vous pouvez donc voir la navigation comme une pile de pages et vous affichez toujours la page qui se trouve au-dessus de cette pile. Lorsque vous revenez en arrière, vous affichez en gros la page supérieure et les autres pages. Ionic contrôle ces piles de pages avec un contrôleur de pile appelé « stackController ». C’est une classe avec laquelle vous ne travaillez pas directement dans votre application Angular, Ionic le fait pour vous, c’est donc interne à Ionic. Lorsque vous avancez, une nouvelle page est insérée dans cette pile et lorsque vous utilisez le bouton « Précédent » pour revenir en arrière, la page la plus haute est affichée. Maintenant, au cas où vous vous demanderiez comment il sait si un appel de navigation est destiné à aller en avant ou en arrière, il examine essentiellement l’ID interne de votre action de navigation et il s’avère que cet ID vous permet de déterminer si le nouvel itinéraire est fondamentalement un pas en avant de l’ancienne route ou derrière elle pour ainsi dire. Donc vous n’avez pas à vous inquiétez à ce sujet, Ionic est très intelligent pour savoir si vous avancez ou si vous reculez, ce qui est important pour la lecture de la bonne animation pour la transition de pages. Maintenant, cette pile de pages est également mise en cache pour vous et c’est une différence par rapport à un projet Web Angular classique dans l’expérience du navigateur. Ce qui se passe c’est que si vous passez à une nouvelle page et que vous revenez en arrière, toutes ces pages qui ne sont finalement que des components sont essentiellement détruites lorsque vous les quittez, peu importe si vous avancez ou reculez. Maintenant, avec Ionic, ce n’est en fait pas le cas. Lorsque vous passez à une nouvelle page, cette ancienne page, qui se trouve encore dans cette pile de pages, est conservée dans une page en mémoire. Ainsi toutes cette pile de pages est effectivement mise en cache, ce que vous pouvez dire et lorsque vous supprimez une page, elle est alors supprimée du cache car elle est retirée de la pile. Cela deviendra important et expliquera également le petit bug que vous avez pu avoir si vous vous rappelez, lorsque la page n'affiche pas l’image et les détails de la recette. Outre le router Angular pour la navigation dans lequel nous allons principalement utiliser et qui est le principal outil recommandé pour naviguer dans votre application Ionic Angular, nous avons également le contrôleur de navigation Ionic appelé « NavController ». C’est un service injectable que vous pouvez injecter dans n’importe quel component ou service que vous pourrez avoir et qui vous donne essentiellement des méthodes utilitaires qui interagissent également avec ce contrôleur de démarrage. Par exemple, il vous donnera une méthode « pop » qui vous permet de basculer la dernière page de la pile de pages et qui déclenchera donc une navigation derrière. Nous n’utiliserons pas trop le contrôleur de navigation mais je vous le montrerai quand même car il est bon de savoir qu’il existe. Cela peut vous aider à revenir en arrière mais nous utiliserons principalement le router Angular. Cette vidéo touche à sa fin, je vous donne rendez-vous pour la prochaine.