Ionic - 5.7 Configurer les routes d'une page de détail dans Ionic

Une application Ionic affiche souvent une liste, puis une page de détail pour chaque élément. Pour cela, il faut créer la page puis la relier au routage Angular. Cette leçon montre comment ajouter une page de détail de recette, avec un paramètre dans l'URL.

Générer la page de détail

Dans le terminal, la commande ionic generate page permet de créer une nouvelle page. Le nom de la page est précédé du dossier voulu, séparé par une barre oblique. La vidéo crée ainsi une page de détail dans le dossier des recettes.

La commande crée un nouveau dossier contenant les fichiers de la page. Le module de routage de l'application reçoit aussi une entrée pour cette page.

ionic generate page <dossier>/details

Configurer les routes enfants

Dans le fichier de routage, la route de la page des recettes charge son module avec un chargement paresseux, appelé lazy loading. Le module n'est chargé que lorsque la page est demandée.

Une route enfant avec un chemin vide affiche la liste des recettes. Une seconde route enfant utilise un segment dynamique, qui commence par deux points suivis d'un nom. Le composant chargé pourra lire cette valeur dans l'URL.

Tester la nouvelle route

On enregistre le fichier, l'application se recompile et se recharge. La liste des recettes s'affiche toujours.

En ajoutant une valeur à la fin de l'URL, on arrive sur la page de détail. Elle reste vide, car aucune logique d'affichage n'a encore été ajoutée.

La vidéo annonce la suite : un service Angular pour partager les recettes entre les pages.

En résumé

Une page de détail se crée avec la commande de génération d'Ionic. Ses routes s'ajoutent dans le fichier de routage, avec un chargement paresseux et un paramètre dynamique. Le test dans l'URL confirme le routage, avant d'ajouter la logique d'affichage dans une étape suivante.

Points clés

• La commande ionic generate page crée la page et ses fichiers.
• Le chargement paresseux charge le module seulement quand la page est demandée.
• Une route enfant avec un chemin vide affiche la liste.
• Un segment dynamique permet de lire une valeur dans l'URL.
• La page de détail reste vide tant qu'aucune logique n'est ajoutée.

Questions fréquentes

Pourquoi utiliser un chargement paresseux ?

Le module de la page n'est chargé que lorsqu'on en a besoin. Cela évite de charger toutes les pages dès le démarrage de l'application.

Comment la page de détail saura-t-elle quelle recette afficher ?

Elle lira la valeur du segment dynamique dans l'URL. La lecture effective de cette valeur est traitée dans la suite de la formation.

Que faut-il faire après avoir créé la route ?

Il faut ajouter la logique qui affiche les détails de la recette. La vidéo précise qu'un service doit d'abord stocker les recettes.