Application mobile: Angular 9 Créer un module avec routage

Dans cette section, nous allons découvrir la création d’un avec routage. Nous utiliserons Angular 9 pour ce faire. Si nous n’avons pas de connaissances sur le de routage Angular 9, cet nous aidera à le savoir.

Dans notre application angulaire ci-dessous, nous allons créer un d’administration. Sous le d’administration, trois composants seront créés : home, user et post. Ce composant est utilisé pour appeler le fichier de route du . Dans notre application, nous allons créer un avec routage en utilisant le processus pas à pas, qui est décrit comme suit :

Étape 1:

Dans cette étape, nous allons Créer une nouvelle application. La commande suivante sera utilisée pour créer notre application Angular comme ceci :

ng new my--app

Étape 2:

Dans cette étape, nous allons Créer un d’administration. Lorsque nous créons avec succès notre application angulaire, nous devons créer un . Nous utiliserons la commande Angular cli pour créer le . Dans l’application Angular, nous pouvons créer un avec des s en utilisant la commande fournie par Angular. Nous allons donc créer le d’administration en utilisant la commande suivante :

ng g admin –routage

Lorsque nous exécuterons avec succès la commande ci-dessus, nous créerons des fichiers comme celui-ci :

src/app/admin/admin..ts
src/app/admin/admin-routing..ts

Étape 3:

Dans cette étape, nous allons Créer des composants pour les s. La commande suivante sera utilisée pour créer un composant dans le d’administration. Ainsi, dans notre d’administration, nous allons créer trois composants tels que home, user et post.

ng g composant admin/home
administrateur/utilisateur du composant ng g
ng g composant admin/post

Lorsque nous exécutons avec succès la commande ci-dessus, cela créera un dossier avec des fichiers, qui est affiché comme suit :

src/app/admin/home/*
src/app/admin/user/*
src/app/admin/post/*

Ce qui précède montre les trois composants qui sont home, user et post avec leur fichier HTML. Si nous voulons vérifier la démo, nous pouvons apporter des modifications dans ce fichier avec notre contenu.

Étape 4:

Dans cette étape, nous allons Créer Ajouter une route pour les composants. Ici, nous allons utiliser le composant créé pour ajouter la route. Après cela, nous utiliserons notre fichier nommé admin-routing et le mettrons à jour comme ceci :

src/app/admin/admin-routing..ts

importer { Ng } depuis ‘@angular/core’ ;
importer { Routes, Router } depuis ‘@angular/router’ ;
importer { HomeComponent } de ‘./home/home.component’;
importer { UserComponent } de ‘./user/user.component’;
importer { PostComponent } de ‘./post/post.component’;

routes const: Routes = [
{path :  », component : HomeComponent},
{path : ‘user’, component : UserComponent},
{path : ‘post’, component : PostComponent}
];

@Ng({
importations: [Router.forChild(routes)],
exportations: [Router]
})
classe d’exportation AdminRouting { }

Étape 5 :

Dans cette étape, nous allons Mettre à jour le fichier HTML du composant. Nous utiliserons route-outlet pour ajouter tous les liens de route. Nous allons donc mettre à jour ceci comme ceci :

Dans ce fichier, nous utilisons Bootstrap. Si nous n’avons pas Bootstrap sur notre système, nous utiliserons le lien suivant pour l’installer sur notre système pour notre application comme ceci :

https://www.javatpoint.com/angular-7-with-bootstrap#:~:text=How%20to%20install%20Bootstrap%20for,%3E%20The%20%403%20is%20important !

src/app/app.component.html

Étape 6 :

Dans cette étape, nous allons Importer- dans le fichier .ts. En utilisant la manière suivante, nous mettrons à jour ce fichier comme ceci :

src/app/app..ts

importer { Browser } depuis ‘@angular/platform-browser’ ;
importer { Ng } depuis ‘@angular/core’ ;

importer { AppRouting } de ‘./app-routing.’;
importer { AppComponent } de ‘./app.component’ ;
importer { Admin } depuis ‘./admin/admin.’ ;

@Ng({
déclarations : [
AppComponent
],
importations: [
Browser,
AppRouting,
Admin
],
fournisseurs: [],
amorcer: [AppComponent]
})
classe d’exportation App { }

Maintenant, notre code ci-dessus est prêt à être exécuté. Afin d’exécuter le code ci-dessus, nous utiliserons la commande suivante :

servir

Lorsque nous exécutons cette commande, la sortie suivante sera générée :

Angular 9 Créer un module avec routage


.

#Angular #Créer # #avec #routage