Share
Avec la récente publication officielle de Angular 2, le moment est venu de se familiariser avec certains des plus grands changements..
Une chose qui a beaucoup changé est le routeur Angular 2, qui a été complètement remplacé lors de la préparation de la version finale. Ainsi, dans ces deux tutoriels vidéo de mon cours sur Angular 2 Routing, je vais vous montrer comment créer des configurations d'itinéraire et comment les utiliser dans une application. Vous en apprendrez davantage sur les itinéraires simples, la redirection et les itinéraires génériques. Ensuite, vous verrez comment utiliser une directive pour configurer votre composant d'application afin d'afficher les itinéraires..
Les vidéos font suite aux leçons précédentes du cours, mais vous devriez être capable de suivre les techniques que nous utilisons. Vous pouvez trouver les fichiers source pour l'ensemble du projet sur GitHub.
Il est possible de créer une application complète dans Angular 2 sans routage. Donc, si nous pouvons faire cela, pourquoi avons-nous besoin de routage??
La raison principale est que si nous n'utilisons pas le routage, notre application dépendra uniquement de la navigation via le contrôle du programme. Nous devrons changer les composants en fonction de l’interaction de l’utilisateur, par exemple quand ils cliquent sur.
Avec le routage, nous pourrons naviguer en changeant d'URL. Tous les composants seront mappés sur un itinéraire, nous permettant de nous déplacer facilement dans notre application..
Premièrement, pour que le routage fonctionne, nous devons ajouter une base href dans la tête de notre fichier index.html..
Auparavant, nous configurions nos itinéraires à l'intérieur du composant qui les héberge. Dans ce cas, cela voudrait dire que nous ajouterions les configurations de route à notre fichier app.component. Avec le nouveau routeur, il est suggéré de créer notre configuration de route dans un fichier séparé..
Créons donc un fichier appelé app.routes.ts à la racine du dossier de l'application.
La première chose que nous allons ajouter à ce fichier sont les importations.
Tout d'abord, prenez fournitRouter ou RouterConfig du routeur angulaire. Importez ensuite les composants About, Error et Home à partir du dossier Pages. Nous devons importer ceux-ci afin que nous puissions acheminer vers ces composants.
La prochaine chose que nous ferons est d’ajouter notre configuration de route pour maintenir nos routes:
routes const: RouterConfig = [];
Ici nous utilisons un const déclaration. C’est l’un des moyens par lesquels nous pouvons déclarer une variable dans TypeScript et cela représente une valeur qui ne peut pas être modifiée. Dans ce cas, nous l’utilisons pour tenir notre RouterConfig.
Maintenant, la première chose que nous allons ajouter est une redirection. Dans quelques instants, nous allons ajouter un itinéraire générique pour notre page d'erreur. En soi, cela entraînera notre application à partir de la page d'erreur. La raison en est que lorsque notre application démarre, elle n'a pas d'itinéraire. Par conséquent, nous devons spécifier un composant comme route par défaut.
Nous pourrions facilement ajouter le composant que nous souhaitons démarrer notre application à la route vide, mais la façon suggérée de le gérer consiste à utiliser une redirection. La redirection doit venir en premier ou cela ne fonctionnera pas correctement. Voici à quoi ça ressemble:
Nous avons d’abord notre chemin qui est un itinéraire vide. C’est la route avec laquelle notre application se lancera. Ensuite, nous avons notre redirection, ce qui changera notre chemin vers la maison quand il rencontre un itinéraire vide. Après cela, nous avons notre pathMatch. Je n'entrerai pas dans les détails, sauf pour dire que cela fait que la route vide correspond à la redirection.
Ensuite, nous avons notre itinéraire qui pointe vers le A propos du composant. Le chemin est défini sur 'sur', c'est ce que nous verrons dans la barre d'adresse lorsque nous naviguerons vers cet itinéraire. Le composant sur lequel vous allez naviguer est le A propos du composant. Après cela, nous avons le AccueilComposant. Le chemin est 'maison', et le composant à lancer est le AccueilComposant.
C'est la route vers laquelle nous allons naviguer à partir de la redirection. Ensuite, le dernier itinéraire que nous ajouterons est un itinéraire générique. Cela correspondra à toutes les routes que nous avons définies. C'est aussi pourquoi nous avons ajouté la redirection. Si nous ne le faisions pas, notre application commencerait par cette route puisque nous partions d'une route non définie, une route vide.
Après avoir ajouté la redirection, toute route que nous tapons qui n'existe pas obtiendra notre page d'erreur. Ensuite, nous exportons un autre const en utilisant la méthode supply routeur from Angular router. Nous utilisons les routes que nous configurons avec cette méthode.
Une fois que nous faisons cela, nos itinéraires sont terminés. La dernière chose à faire est d'ajouter le routage à notre application..
Aller au main.ts fichier. La première chose que nous ferons dans ce fichier est l'importation myRouterProviders à partir du fichier de routes de l'application que nous avons créé. Ensuite, nous devons l'ajouter à notre fonction bootstrap. Leur ajout ici présente l'avantage de rendre les itinéraires disponibles pour tous les composants de notre application..
Une fois que nous faisons cela, nous avons fini de configurer nos itinéraires. Dans la vidéo suivante, nous allons terminer notre configuration de routage et prévisualiser l'application.
Jusqu'à présent, nous avons configuré nos itinéraires et les avons ajoutés à notre fonction d'amorçage. Maintenant, nous avons juste besoin de configurer notre composant d'application pour héberger nos routes.
Voici comment app.component.ts devrait regarder:
Premièrement, nous importons nos directives de routeur. Nous avons déjà vu cela lorsqu'un composant doit utiliser le lien de routeur. Ce composant utilisera le lien de routeur et une autre directive de la prise de routeur angulaire 2. Après cela, nous supprimons le modèle et ajoutons un backtick pour en faire une chaîne de modèle. Cela nous permettra de créer un modèle multiligne.
Tout d'abord, nous ajoutons un div pour notre barre de navigation bootstrap. Cette barre de navigation apparaîtra sur chaque page, car elle fait partie du modèle. Ensuite, dans la barre de navigation, nous ajoutons notre marque. Cela peut être du texte ou une image, et cela représente l'image de marque de votre application..
Ensuite, nous ajoutons une liste non ordonnée. À l'intérieur, nous ajouterons nos liens pour une barre de navigation. Dans nos liens, au lieu d'une URL vers laquelle naviguer, nous avons routerLink. Voici comment nous naviguons vers un itinéraire sous l’interaction de l’utilisateur. Ici, nous sommes prêts à naviguer vers la route de départ lorsque nous cliquons sur ce bouton.
On peut aussi écrire le routerLink sous une autre forme dans un tableau. Nous le faisons normalement lorsque nous devons fournir plus d’informations à notre itinéraire. Ensuite, nous avons aussi un routerLinkActive directive, qui appliquera la classe de menu au lien lorsque la route est active. Nous l’utilisons pour afficher une indication visuelle de la page sur laquelle nous nous trouvons..
Nous ajouterons ensuite un autre lien de routeur menant à la page À propos de. Ensuite, nous ajouterons le routeur-prise directif. C'est pourquoi les composants n'ont pas besoin de sélecteur. Lorsqu'ils sont chargés dans le routage, cette directive héberge les composants. Bien que le reste de ce modèle apparaisse statique sur chaque page, le routeur-prise changera en fonction de la route parcourue. Enfin pour ce fichier, nous ajoutons les directives du routeur.
Après cela, la dernière chose à faire est d’ajouter une règle CSS à la style.css fichier:
.menu background-color: white;
Cette règle concerne la classe qui sera appliquée lorsque la route attachée au lien du routeur est active. L'arrière-plan du lien sera de couleur blanche. Et maintenant, le routage est configuré pour notre application.
Allez-y et enregistrez le projet et exécutez npm start dans le dossier du projet.
Si tout a été fait correctement, l'application doit être compilée puis lancée à partir d'un navigateur Web..
Si vous remarquez, l’arrière-plan du lien principal est ombré en blanc. C'est parce que c'est la route active. Puis si on clique sur le Sur bouton, nous devrions aller à la page à propos.
Après cela, entrons un itinéraire inexistant dans la barre d’adresse. Quand on fait ça, on devrait avoir une page d'erreur.
Nous avons maintenant un routage qui fonctionne dans notre application, mais nous pouvons en faire beaucoup plus. Dans le reste du cours, vous allez plonger dans le routage beaucoup plus en profondeur.
Dans le cours complet, Angular 2 Routing, je vais vous apprendre à utiliser le nouveau routeur Angular 2 dans vos applications. Vous verrez comment configurer le routage de base vers des pages statiques, comment extraire des paramètres du chemin de routage et comment rendre votre routage modulaire. Vous verrez également comment le contrôle d’accès utilisateur peut être implémenté avec le routeur Angular 2..
Accentsconagua