Scribd
Importer
28 vues5 pages

Navigation dans Angular avec Routing

Le document décrit le mécanisme de routage dans une application web Angular, permettant de naviguer entre différents composants. Il explique la création de composants pour la page d'accueil et les détails des hôtels, ainsi que l'importation des modules nécessaires dans 'app.module.ts'. Enfin, il mentionne l'ajout d'un menu dans 'app.component.html' pour une navigation cohérente à travers l'application.

Transféré par

elaistic2002
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd
28 vues5 pages

Navigation dans Angular avec Routing

Le document décrit le mécanisme de routage dans une application web Angular, permettant de naviguer entre différents composants. Il explique la création de composants pour la page d'accueil et les détails des hôtels, ainsi que l'importation des modules nécessaires dans 'app.module.ts'. Enfin, il mentionne l'ajout d'un menu dans 'app.component.html' pour une navigation cohérente à travers l'application.

Transféré par

elaistic2002
Copyright
© © All Rights Reserved
Nous prenons très au sérieux les droits relatifs au contenu. Si vous pensez qu’il s’agit de votre contenu, signalez une atteinte au droit d’auteur ici.
Formats disponibles
Téléchargez aux formats PDF, TXT ou lisez en ligne sur Scribd

Essafi Sarra Mini-projet web 2 GLSI ISTIC

Navigation (Routing)
Le Routing est le mécanisme qui permet de naviguer d'une page à une autre sur un site web. Dans
Angular, vu qu’il est mono-page, la navigation se fait entre les composants qui affiche à leur tour leur
contenu html.

Appliquons ça sur notre exemple :

1) Pour le routage, nous avons besoin des composantes supplémentaires. Une composante qui
affiche la page d’accueil et une autre pour afficher les détails de chaque hôtel. Nous avons
précédemment créé des nouveaux composants manuellement. Nous pouvons aussi utiliser
Angular CLI pour la création automatique des nouveaux composants.

Les fichiers vont être crée automatiquement. Le composant sera ajouté aussi
automatiquement dans app.module.ts.

1
Essafi Sarra Mini-projet web 2 GLSI ISTIC

2) Dans « app.module.ts » : importer le module et le service Angular qui s’occupe du routage.

forRoot permet d’afficher la liste des différents composants et les chemins vers ces différents
composants.

3) Dans app.component.html :
Ajouter un menu. Pour que le menu soit visible partout dans notre application, on va
l’introduire dans app.component.html.

2
Essafi Sarra Mini-projet web 2 GLSI ISTIC

On élimine ce dont on n’a pas besoin dans le code et on ajoute les liens.

<div class="mt-5"> ➔ utilisé pour laisser une marge.

Le résultat du menu dans notre page sera comme suit :

3
Essafi Sarra Mini-projet web 2 GLSI ISTIC

Le texte home work ! est écrit par défaut lors la création du composant home.

Dans liste-hotel.component.html, on utilisera un lien qui amène vers les détails de chaque hôtel :

En cliquant sur détails de l’hôtel 2, il vous ramène vers « hotel-detail »:

4
Essafi Sarra Mini-projet web 2 GLSI ISTIC

Récapitulatif :

Si vous cliquez sur le bouton droit de la page et sur « inspecter élément » :

Vous aimerez peut-être aussi