Maison > interface Web > js tutoriel > Comment Angular CLI gère le routage

Comment Angular CLI gère le routage

php中世界最好的语言
Libérer: 2018-06-14 10:32:48
original
1129 Les gens l'ont consulté

Cette fois, je vais vous montrer comment Angular CLI opère le routage et quelles sont les précautions à prendre pour le fonctionnement du routage Angular CLI. Ce qui suit est un cas pratique, jetons un coup d'œil.

Générez des itinéraires pour l'application.

Créez d'abord un projet :

ng new my-routing --routing
Copier après la connexion

Vous pouvez voir les deux modules générés.

Regardez le module de routage :

Regardez le module d'application :

AppRoutingModule a été importé

Regardez à nouveau app.component.html :

router-outlet a été écrit

Générez deux autres composants ci-dessous :

ng g c dashboard
ng g c order
Copier après la connexion

Ensuite, définissez le routage dans app-routing.module :

Modifiez à nouveau le html :

Exécutez l'application : ng serve -o

Hmm. Pas de problème.

Pour la situation où il y a plusieurs modules dans une application.

Générez un autre module et apportez-le avec le routage module (vous pouvez d'abord utiliser le paramètre -d pour visualiser les fichiers à générer) :

ng g m admin --routing
Copier après la connexion

Dans le module admin, créez un composant admin :

ng g c admin
ng g c admin/email -m admin
ng g c admin/user -m admin
Copier après la connexion
En fait, le paramètre -m des deux dernières commandes peut être supprimé, car le chemin admin/ a été spécifié, donc par défaut il sera déclaré dans le module admin au lieu du module app.

Vous devez ensuite modifier app.module :

pour ajouter le module admin.

Puis modifiez admin.component.html et ajoutez le routeur -outlet :

Puis modifiez admin-routing.module.ts :

Exécuter : ng serve -o

Entrez directement l'adresse : http://localhost:4200/admin

Vous pouvez voir :

Et entrez l'URL : http ://localhost:4200/admin/email

alors vous verrez :

Donc pas de problème.

Générer Gurad.

ng g guard xxx
Copier après la connexion
Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture recommandée :

Style de commutation jQuery+Cookie

Explication détaillée de la fonction de communication mutuelle des contrôleurs Angularjs

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal