Créer une barre de navigation dans Angular

1. La barre de navigation en Angular
2. Créer une barre de navigation dans Angular

Ce tutoriel présentera comment créer une barre de navigation dans Angular et l’utiliser pour la navigation dans les applications Angular.

La barre de navigation en Angular

La barre de navigation est l’une des parties essentielles de toute application Web. Même lors de la création d’une application monopage (SPA) composée d’une seule page mais de différentes sections, nous utilisons toujours la barre de navigation pour naviguer d’une section à l’autre.

La barre de navigation permet aux utilisateurs de trouver facilement ce qu’ils recherchent sur vos applications Web.

Il existe de nombreuses méthodes de navigation pour réaliser un routage simple à complexe. Angular fournit un module séparé qui nous aide à créer une barre de navigation dans notre application Web et à l’utiliser pour la navigation.

Nous pouvons utiliser la méthode navigate() du routeur si nous voulons faire naviguer l’utilisateur d’une page à une autre par programmation, ce qui signifie que nous naviguons dans les composants sans utiliser les liens exacts. Nous utilisons à la place des noms de composants.

Créer une barre de navigation dans Angular

Passons en revue un exemple dans lequel nous allons créer une barre de navigation et l’utiliser pour naviguer à travers différents composants à l’aide de navigate(). Alors, créons une nouvelle application en utilisant la commande suivante.

# angular
ng new my-app

Après avoir créé notre nouvelle application, nous irons dans notre répertoire d’application à l’aide de cette commande.

# angular
cd my-app

Maintenant, exécutons notre application pour nous assurer que toutes les dépendances sont correctement installées.

# angular
ng serve --open

Générer des composants de barre de navigation dans Angular

Maintenant, générons les composants de la barre de navigation. Dans un premier temps, nous allons générer notre composant index, qui agira comme le composant home de notre application.

# angular
ng generate component index

Ensuite, nous allons générer le composant about us.

# angular
ng generate component aboutUs

Enfin, nous allons générer notre composant products à l’aide de la commande suivante.

# angular
ng generate component products

Nous aurons 3 composants dans des dossiers séparés avec 3 fichiers, que vous pouvez voir ci-dessous.

Production:

Créer les vues pour les composants

Maintenant, nous allons créer des vues pour nos composants. Tout d’abord, nous allons ouvrir aboutUs.component.html à partir du dossier about et ajouter le code suivant.

# angular
<div class="container" >
  <h1> This is about Us Component </h1>
  <h3> This is the content of About Us </h3>
</div>

Ensuite, nous allons ouvrir le fichier index.component.html du dossier home et ajouter le code suivant.

# angular
<div class="container">
 <h1> This is index component </h1>
  <h3> This is the content of Index </h3>
</div>

Nous allons ouvrir le fichier products.component.html du dossier services et ajouter le code suivant.

# angular
<div class="container">
 <h1> This is products component </h1>
  <h3> This is the content of Products </h3>
</div>

Définir les routages de composants

Une fois que nous aurons créé nos composants et nos vues, nous définirons nos routes dans app-routing.module.ts.

Nous allons importer ngModule. Nous allons également importer Routes et RouterModule depuis le routeur, et enfin, les composants que nous venons de créer.

# angular
import { NgModule } from '@angular/core';
import { Routes, RouterModule } from '@angular/router';
import { AboutUsComponent}  from './aboutUs/aboutUs.component';
import { IndexComponent} from './index/index.component';
import { ProductsComponent } from './products/products.component';

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }

Après l’importation, nous définirons les routes de nos composants, comme indiqué ci-dessous.

# angular
const routes: Routes = [

    { path: 'aboutUs', component: AboutUsComponent },
    { path: 'index', component: IndexComponent},
    { path: 'products', component: ProductsComponent },
 ];

Créer un menu de navigation

Nous ferons ensuite notre menu de navigation dans app.component.html. Chaque lien appellera une fonction avec la méthode (click).

Nous afficherons les données des composants à l’aide de router-outlet comme indiqué ci-dessous.

# angular
<ul class="nav navbar-nav">
  <li>
    <a (click)="goToIndex()">Home</a>
  </li>
  <li>
    <a (click)="goToAboutUs()">About Us</a>
  </li>
  <li>
    <a (click)="goToProducts()">Products</a>
  </li>
</ul>

<router-outlet> </router-outlet>

Créer les fonctions pour naviguer entre les composants

Ensuite, nous allons créer nos fonctions goToIndex(), goToAboutUs() et goToProducts(). Nous allons ouvrir app.component.ts et importer Router.

En utilisant router.navigate(), nous allons créer ces fonctions pour naviguer entre les composants.

# angular
import { Component } from '@angular/core';
import { Router } from '@angular/router';


@Component({
  selector: 'my-app',
  templateUrl: './app.component.html',
  styleUrls: [ './app.component.css' ]
})
export class AppComponent  {
  constructor(private router: Router) {
  }

  goToIndex() {
    this.router.navigate(['/', 'index']);
  }
  goToAboutUs() {
    this.router.navigate(['/', 'aboutUs']);
  }
  goToProducts() {
    this.router.navigate(['/', 'products']);
  }
}

Production:

Comme vous pouvez le voir dans l’exemple, nous pouvons facilement créer une barre de navigation dans nos applications Angular et l’utiliser pour naviguer entre les composants à l’aide de navigate() et définir des routes.

Vous pouvez accéder au code complet utilisé dans ce tutoriel.