Menu Navigation
[sommaire]
Menu Navigation
-
Objectifs
-
Présentation
- Les applications typiques ont plusieurs vues et une sorte de méthode de navigation pour se déplacer entre elles.
- Le module Router est utilisé pour gérer la navigation entre les vues.
- Pour notre tableau de bord de football, nous aurons besoin de trois composants: la page Classement, la page Scoring et une page d’administration.
- Nous allons utiliser Twitter Bootstrap comme système d’interface utilisateur principal et Font Awesome pour certaines icônes.
- Assurez-vous de les inclure dans votre fichier de configuration Angular CLI.
-
Base href
- Les navigateurs HTML5 prennent en charge la modification de l’historique du navigateur via de nouvelles méthodes telles que
pushState()etreplaceState(). - Ces méthodes permettent à Angular de créer des URL pour la navigation dans l’application.
- Pour prendre en charge cette navigation, vous devez suivre quelques étapes.
- La première consiste à déclarer une référence de base dans votre page principale (index.html).
- La ligne suivante doit être ajoutée en tant que première ligne dans la section de tête.
-
App component
- Le composant d’application que nous avons créé dans les pages précédentes sera adapté pour devenir un composant de navigation maintenant, nous avons donc besoin d’un nouveau composant avec un modèle axé sur les menus ou les boutons pour naviguer vers différents composants.
-
App component
- Vous pouvez concevoir la structure de vos dossiers comme vous le souhaitez. Je place mes vues de modèle dans un dossier appelé Vues.
-
Main menu
- Notre code d’affichage du menu principal, illustré dans le code suivant, est une configuration de la barre de navigation Twitter Bootstrap.
- Les systèmes utilisent des balises
<a>pour indiquer les liens de menu. Cependant, plutôt que la propriété href standard, nous utiliserons la propriété Angular appeléerouterLink. - Cette propriété servira à indiquer à la page de navigation le
"lien"vers lequel aller lorsqu’un élément de menu est sélectionné. - La dernière ligne,
<router-outlet>, est un espace réservé pour l’écriture de la sortie du routeur.
<base href="/"> <!-- Utilisé pour composer des URLs de navigation -->C’est une préférence, pas une exigence, mais cela rend ma séparation de la logique métier et de l’affichage plus facile à gérer. Voici notre principal composant d’application pour Soccer Dashboard:
<!-- Main application component -->
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './views/Main.html'
})
export class AppComponent {
title = 'Soccer Dashboard';
}/* Main menu view */
<nav class="navbar navbar-light bg-faded">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<i class="fa fa-futbol-o"> </i>{{ title }}
</a>
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link active" routerLink="/Standings"
routerLinkActive="active" >Standings</a>
</li>
<li>
<a class="nav-link" routerLink="/Scoring" >Scoring</a>
</li>
<li class="nav-item float-xs-right ">
<a class="nav-link" routerLink="/Admin">Admin</a>
</li>
</ul>
</div>
</nav>
<router-outlet></router-outlet>