Routage Angular

Name: Routage Angular
Author: Michaela Ochnich

Preview the first lesson free — get full access to all 6 lessons.

Cours : à la demande

Cette leçon va démontrer comment passer et récupérer les valeurs des paramètres du routeur angulaire. Donc, l'application que j'ai ici a été générée avec le routage avec le Outil CLI. Donc ce fichier de module de routage est déjà configuré et importé dans le module de routage de l'application. Le module de routeur importé d'angular ici comprend différentes directives et prestataires qui permettent navigation dans les applications. Cela inclut le lien du routeur, le lien du routeur actif et le directives de sortie de routeur, ainsi que le service de routeur. Donc, pour cette démo, disons que vous créez une application Web pour une société immobilière. L'une des fonctionnalités dont vous pourriez avoir besoin est une page qui répertorie les propriétés disponibles, puis en cliquant sur cette liste de propriété devrait prendre l'utilisateur à une page avec plus de détails sur cette propriété particulière. Alors pour mettre ça en place, Je vais d'abord générer un composant qui affiche une liste des propriétés, puis un composant qui affichera le détails de notre propriété. Alors ici, le composant de liste d'articles sera pour afficher tous les listes et le composant d'article sera pour afficher un annonce individuelle. Je vais également générer un composant pour agir comme une page d'accueil. Alors maintenant, pour créer des routes pour ces trois composants, Je dois d'abord les importer dans ce module de routage d'application déposer. Ensuite, ici, et les routes sont bonnes. Je vais d'abord définir un itinéraire pour la page d'accueil. Et ensuite, je vais créer un itinéraire pour la liste d'articles composant. Maintenant pour le composant article, J'ai besoin de transmettre l'ID de l'article dans l'itinéraire. De cette façon, si cette application était attachée à un back-end, il pourrait utiliser cet identifiant pour récupérer les données de la liste, de la base de données. Pour désigner un paramètre dans un chemin d'itinéraire, mettre un deux-points devant le nom du paramètre. Par ici, le routeur angulaire sait qu'il s'agit d'un paramètre va être passé. Et il n'essaie pas de faire correspondre le chemin au mot ID. Lorsqu'il recherche un itinéraire correspondant. Et cette valeur de paramètre sera passée dans le lien Lorsqu'un utilisateur clique sur un élément spécifique de la liste. Comme il n'y a pas de back-end réel pour cette application, J'ai créé un service qui renverra des données fictives de base juste à des fins de démonstration. Il y a deux fonctions définies dans le service. Une qui renvoie toutes les données de la liste et une qui prend un ID et renvoie ces données de liste particulières. Et pour finir de configurer ce routeur. J'ai aussi besoin d'ajouter la sortie du routeur. Je vais donc ouvrir le modèle de composant de route, et supprimez tout le code de démarrage, puis remplacez-le par cette sortie de routeur. Alors maintenant qu'il y a un point de vente pour afficher les itinéraires dans le vue, Je vais créer un lien depuis le composant de la page d'accueil vers ce composant de liste. Maintenant, pour créer un lien pour le routeur angulaire, vous ne voulez pas utiliser l'attribut H-ref. Il s'agit d'une application d'une seule page, nous ne voulons donc pas naviguer vers une nouvelle page HTML. Au lieu, la directive de liaison du routeur est utilisée.

Intermédiaire Fournisseur : Michaela Ochnich 6 leçons · 33m en Arabe, Allemand, Anglais, Espagnol, Français, Portugais, Chinese

Description du cours

Ce chapitre couvrira les services de routage d’Angular . Vous apprendrez à créer des itinéraires enfants, ainsi que des itinéraires restreints auxquels seuls certains utilisateurs peuvent accéder. Vous apprendrez comment la création de liens relatifs dans votre application Angular peut vous aider lors de la refactorisation et comment récupérer les paramètres d’itinéraire actuels à partir d’une classe de composants.

Ce que vous allez apprendre

Créer différents types de routes Angular en utilisant les services de routage d'Angular
Construire des routes enfants dans une application Angular
Restreindre l'accès aux routes afin que seuls certains utilisateurs puissent y accéder
Créer des liens relatifs pour faciliter la refactorisation
Récupérer les paramètres de la route actuelle à partir d'une classe de composant

Points clés à retenir

Angular fournit des services de routage pour créer et gérer des routes dans une application.
Les routes peuvent être configurées comme des routes enfants et comme des routes restreintes accessibles uniquement par certains utilisateurs.
L'utilisation de liens relatifs dans une application Angular peut aider lors de la refactorisation.
Les paramètres de la route actuelle peuvent être récupérés à partir d'une classe de composant.

Foire aux questions

Que couvre ce chapitre sur le routage Angular ?

Il couvre les services de routage d'Angular, y compris la création de routes enfants et de routes restreintes accessibles uniquement par certains utilisateurs, comment les liens relatifs aident lors de la refactorisation, et comment récupérer les paramètres de la route actuelle à partir d'une classe de composant.

Qu'est-ce que je serai capable de faire après avoir terminé ce cours ?

Vous comprendrez comment créer différents types de routes Angular et apprendrez comment restreindre l'accès à une route.

Quelles leçons sont incluses dans ce chapitre ?

Le chapitre comprend Infos sur la route partie 1, Infos sur la route partie 2, Infos sur la route partie 3 (Route Info), Routes relatives (Relative Routes), Routes enfants (Child Routes) et Route restreinte (Restricted Route).

Ce cours explique-t-il comment limiter l'accès à une route ?

Oui. Il enseigne comment créer des routes restreintes accessibles uniquement par certains utilisateurs et comment restreindre l'accès à une route.