Maison > Article > interface Web > Comment générer des itinéraires à l'aide d'Angular CLI
Cet article présente principalement la méthode d'utilisation d'Angular CLI pour générer des itinéraires. Maintenant, je le partage avec vous et le donne comme référence.
Nous savons que l'utilisation du module ng g admin générera un module d'administration.
Et l'utilisation de ng g m sales --routing générera deux modules, sales et sales-routing.
Sales-routing contient les informations de routage et elles sont importées dans le module de vente.
Générez des itinéraires pour l'application.
Créez d'abord un projet :
ng new my-routing --routing
Vous pouvez voir que deux modules sont générés.
Regardez le module de routage :
Jetez un autre coup d'oeil au module d'application :
L'AppRoutingModule a été importé.
Jetez un autre coup d'oeil app.component.html :
router-outlet a été écrit Très bien.
Ce qui suit générera deux autres composants :
ng g c dashboard ng g c order
Puis 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 module de routage (vous pouvez Utilisez d'abord le paramètre -d pour visualiser les fichiers à générer) :
ng g m admin --routing
Dans le module admin, créer un autre composant admin :
ng g c admin ng g c admin/email -m admin ng g c admin/user -m admin
En fait, le paramètre -m des deux dernières commandes peut être supprimé, car le chemin admin/ a été spécifié , il sera donc par défaut dans admin Déclaration dans le module au lieu du module app.
Ensuite, vous devez modifier app.module :
Ajouter l'administrateur module dedans.
Puis modifiez admin.component.html, ajoutez router-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
et vous verrez :
Donc pas de problème.
Générer Gurad.
ng g guard xxx
Cette commande generate xxx.guard.ts
ci-dessus, je l'ai compilé pour tout le monde. J'espère qu'il sera utile à tout le monde à l'avenir.
Articles associés :
Exemple de comment revenir à la page d'accueil de la page de partage de l'applet WeChat
Implémentations JS déplacer la liste de gauche Aller à la fonction liste à droite
L'utilisation des expressions el en js et la méthode de jugement non vide
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!