Si vous créez une application angulaire avec plusieurs pages, vous devez utiliser le routage pour naviguer entre elles. Vous pouvez le faire en créant une liste de routes avec un chemin pour chaque page dans le module de routage.
Vous pouvez ensuite acheminer vers d'autres pages dans un fichier HTML en utilisant une balise d'ancrage. Vous pouvez également router vers d'autres pages dans un fichier TypeScript, en utilisant la méthode router.navigate().
Comment créer une nouvelle page dans une application angulaire
Tout d'abord, créez une nouvelle application angulaire. Vous pouvez également en utiliser un existant. Si vous ne savez pas comment créer une nouvelle application Angular, vous pouvez en apprendre davantage avec d'autres concepts d'introduction utilisés dans Angular.
-
Créez un nouveau composant dans votre application Angular en utilisant le ng générer un composant commande:
ng générer la maison du composant - Ouvrez le src/app/home/home.component.html fichier et remplacez le contenu actuel par le nouveau contenu.
<classe div="contenu">
<h2> Maison </h2>
<p>
Je suis un photographe qui fait de la photographie de mariage. Découvrez mes projets !
</p>
<classe div="carte">
<h4> John & Amy </h4>
<p> Blue Mountains, Australie </p>
</div>
<classe div="carte">
<h4> Ross & Rachel </h4>
<p> Hunter Valley Gardens, Australie </p>
</div>
</div> - Remplissez le src/app/home/home.component.css fichier avec style pour le contenu HTML.
.contenu {
hauteur de la ligne: 2rem;
taille de police: 1.2em;
}.carte {
boîte ombre: 0 4pixels 8pixels 0 RVB(0, 0, 0, 0.2);
largeur: 400pixels;
rembourrage: 16pixels;
marge: 24pixels 0pixels;
Couleur de l'arrière plan: fumée blanche;
famille de polices: sans empattement;
} - Créez un autre composant à l'aide de ng générer un composant commande dans le terminal. Vous utiliserez le nouveau composant comme page à propos.
ng générer un composant à propos de - Ouvrez le src/app/about/about.component.html fichier et remplacez le contenu actuel par le nouveau contenu.
<classe div="contenu">
<h2> À propos de moi </h2>
<p>
je'Je suis John et j'adore prendre des photos. Je fais de la photo depuis plus de 25 ans. Retrouvez moi sur mes réseaux sociaux :
</p>
<un href=""> Facebook </un><Br>
<un href=""> LinkedIn </un><Br>
<un href=""> Instagram </un><Br>
</div> - Remplissez le src/app/about/about.component.css fichier avec style pour le contenu HTML.
.contenu {
hauteur de la ligne: 2rem;
taille de police: 1.2em;
}
Comment naviguer entre les deux pages
Vous pouvez utiliser le routage pour naviguer d'une page à l'autre. Vous pouvez le configurer dans un fichier de routage. Cet exemple aura un fichier de routage pour l'ensemble de l'application, situé dans src/app/app-routing.module.ts.
- Si votre application ne dispose pas déjà du fichier de module de routage d'application, vous pouvez en générer un à l'aide de la commande module de génération ng commande. Dans une ligne de commande ou un terminal, accédez au dossier racine de l'application et exécutez la commande suivante :
ng génère le module app-routing --module app --flat - Cela créera un fichier app-routing.module.ts dans votre source/application dossier.
- En haut du fichier, ajoutez des importations supplémentaires pour les composants Accueil et À propos. Assurez-vous d'importer également RouterModule et CommonModule; en fin de compte, vos instructions d'importation devraient ressembler à :
importer { Module Commun } de '@angulaire/commun' ;
importer { Routes, Module Routeur } de '@angular/routeur' ;
importer { Composant Accueil } de './home/home.composant' ;
importer { À propos du composant } de './about/about.component'; - Sous les importations, ajoutez un nouveau tableau de routes pour stocker les chemins que vous utiliserez lors du routage vers chaque page.
constante itinéraires: Itinéraires = [
{ chemin: '', composant: ComposantAccueil },
{ chemin: 'sur', composant: À propos du composant }
]; - Remplacez le bloc NgModule par ce qui suit, qui ajoute le RouterModule au tableau des importations et des exportations.
@NgModule({
déclarations: [],
importations: [
Module commun,
RouterModule.forRoot (routes)
],
exporte: [RouterModule]
}) - Dans le src/app/app.component.html fichier, supprimez le contenu actuel et ajoutez la balise router-outlet.
<classe div="récipient">
<routeur-prise></router-outlet>
</div>
Comment accéder à la nouvelle page dans un fichier HTML
Pour naviguer vers une page dans un fichier HTML, utilisez la balise d'ancrage. Dans l'attribut href, ajoutez le chemin que vous avez spécifié dans le tableau routes.
- Dans le src/app/app.component.html fichier, ajoutez deux balises d'ancrage avant la div du conteneur. Cela vous permettra de naviguer entre les pages Accueil et À propos.
<classe div="barre de navigation">
<une classe="lien" href="">Maison</un>
<une classe="lien" href="/about">À propos de</un>
</div> - Ajoutez du style à la src/app/app.component.css dossier.
.récipient {
marge: 48pixels 35%;
famille de polices: "Arial", sans empattement;
affichage: fléchir;
flex-direction: colonne;
aligner les éléments: centre;
}.barre de navigation {
Couleur de l'arrière plan: gris ardoise foncé;
rembourrage: 30pixels 50pixels;
affichage: fléchir;
aligner les éléments: centre;
famille de polices: sans empattement;
}.lien: premier du type {
marge droite: 32pixels;
}.lien {
Couleur: blanche;
texte-décoration: rien;
taille de police: 14pt;
poids de la police: audacieux;
} - Ajoutez du style à la marge globale de la page dans src/styles.css.
corps {
marge: 0;
rembourrage: 0;
} - Dans une invite de commande ou un terminal, accédez au dossier racine de l'application Angular. Exécutez l'application à l'aide du ng servir commande et attendez qu'elle finisse de compiler.
ng servir - Dans un navigateur, saisissez l'URL localhost dans la barre d'URL pour afficher votre application. Par défaut, c'est généralement http://localhost: 4200/.
- Votre site Web se chargera sur la page d'accueil.
- Vous pouvez accéder à la page À propos en cliquant sur le lien À propos de la barre de navigation.
Comment accéder à la nouvelle page dans un fichier TypeScript
Jusqu'à présent, cette démo utilise des liens HTML standard pour assurer la navigation. Pour naviguer en utilisant le fichier TypeScript au lieu du fichier HTML, vous pouvez utiliser router.navigate().
- Dans le src/app/app.component.html fichier, supprimez les balises d'ancrage et remplacez-les par des balises de bouton. Ces boutons auront un événement click qui déclenche une fonction appelée clickButton(). Lorsque vous appelez la fonction clickButton(), ajoutez le chemin d'accès de l'URL en tant qu'argument.
<classe de bouton="lien" (clic)="cliquez sur le bouton('')">Maison</button>
<classe de bouton="lien" (clic)="cliquez sur le bouton('/about')">À propos de</button> - Ajoutez du style aux boutons dans le src/app/app.component.css dossier.
bouton {
Couleur de l'arrière plan: le noir;
rembourrage: 4pixels 8pixels;
le curseur: aiguille;
} - Au sommet de la src/app/app.component.ts fichier, importez le routeur.
importer { Routeur } de '@angular/routeur'; - Ajoutez un nouveau constructeur dans la classe AppComponent et injectez le routeur dans les paramètres.
constructeur(routeur privé: routeur) {
} - Sous le constructeur, créez une nouvelle fonction appelée clickButton(), qui naviguera vers la nouvelle page en fonction de l'URL que vous transmettez.
clickButton (chemin: chaîne) {
cette.router.navigate([chemin]);
} - Réexécutez la commande ng serve dans l'invite de commande ou le terminal.
ng servir - Accédez à votre site Web dans un navigateur. Le href est maintenant remplacé par deux boutons.
- Clique sur le À propos de bouton. Il sera acheminé vers la page À propos.
Création de plusieurs pages dans une application angulaire
Vous pouvez router entre plusieurs pages dans une application angulaire en utilisant le routage. Si vous avez des composants distincts pour chaque page, vous pouvez configurer des chemins pour vos itinéraires dans le module de routage.
Pour naviguer vers une autre page via un fichier HTML, utilisez une balise d'ancrage avec l'attribut href comme chemin de routage vers cette page. Pour naviguer vers une autre page via un fichier TypeScript, vous pouvez utiliser la méthode router.navigate().
Si vous construisez une application Angular, vous pouvez utiliser les directives Angular. Ceux-ci vous permettent d'utiliser des instructions if dynamiques, des boucles for ou d'autres opérations logiques dans le fichier HTML d'un composant.