Styliser une application angulaire avec Bootstrap

Si vous avez déjà essayé de créer une application Web avec Angular 7, il est temps de passer à la vitesse supérieure. Voyons comment nous pouvons intégrer les styles CSS Bootstrap et les fichiers JavaScript à un projet Angular généré à l'aide de la CLI Angular, et comment utiliser les contrôles de formulaire et les classes pour créer de beaux formulaires et comment styliser les tableaux HTML à l'aide des styles de tableau.

Pour la partie angulaire, nous allons créer une simple application côté client pour créer et répertorier les contacts. Chaque contact a un identifiant, un nom, un e-mail et une description, et nous utiliserons un service de données simple qui stocke les contacts dans un tableau TypeScript. Vous pouvez utiliser une API avancée en mémoire à la place. (Consultez "Un guide complet du routage en angulaire".)

Remarque : Vous pouvez obtenir le code source de ce didacticiel à partir de ce référentiel GitHub et voir l'exemple en direct ici.

Conditions

Avant de commencer à créer l'application de démonstration, voyons les exigences requises pour ce didacticiel.

En gros, vous aurez besoin des éléments suivants :

• Node.js et NPM installés (vous pouvez simplement vous rendre sur le site officiel et télécharger les binaires pour votre système),
• Familiarité avec TypeScript,
• Expérience de travail d'Angular,
• Connaissances de base en CSS et HTML.
  

Installation de la CLI angulaire

Commençons par installer la dernière version de Angular CLI. Dans votre terminal, exécutez la commande suivante :

 $ npm install -g @angular/cli

Au moment de la rédaction, la v7.0.3 de Angular CLI est installée. Si la CLI est déjà installée, vous pouvez vous assurer que vous disposez de la dernière version en utilisant cette commande :

 $ ng --version

Créer un projet

Une fois que vous avez installé Angular CLI, utilisons-le pour générer un projet Angular 7 en exécutant la commande suivante :

 $ ng new angular-bootstrap-demo

La CLI vous demandera alors :

Souhaitez-vous ajouter le routage angulaire ?

Appuyez sur Y . Ensuite, il vous demandera :

Quel format de feuille de style souhaitez-vous utiliser ?

Choisissez « CSS ».

Ajout de bootstrap

Après avoir créé le projet, vous devez installer Bootstrap 4 et l'intégrer à votre projet Angular.

Tout d'abord, naviguez dans le dossier racine de votre projet :

 $ cd angular-bootstrap-demo

Ensuite, installez Bootstrap 4 et jQuery depuis npm :

 $ npm install --save bootstrap jquery

(Dans ce cas, bootstrap v4.2.1 et jquery v3.3.1 sont installés.)

Enfin, ouvrez le fichier angular.json et ajoutez les chemins d'accès aux fichiers Bootstrap CSS et JS ainsi que jQuery aux tableaux de styles et de scripts sous la cible de build :

 "architect": { "build": { [...], "styles": [ "src/styles.css", "node_modules/bootstrap/dist/css/bootstrap.min.css" ], "scripts": [ "node_modules/jquery/dist/jquery.min.js", "node_modules/bootstrap/dist/js/bootstrap.min.js" ] },

Découvrez comment ajouter Bootstrap à un projet Angular 6 pour savoir comment intégrer Bootstrap à Angular.

Ajouter un service de données

Après avoir créé un projet et ajouté Bootstrap 4, nous allons créer un service Angular qui sera utilisé pour fournir des données de démonstration à afficher dans notre application.

Dans votre terminal, exécutez la commande suivante pour générer un service :

 $ ng generate service data

Cela créera deux fichiers src/app/data.service.spec.ts et src/app/data.service.ts .

Ouvrez src/app/data.service.ts et remplacez son contenu par ce qui suit :

 import { Injectable } from '@angular/core'; @Injectable({ providedIn: 'root' }) export class DataService { contacts = [ {id: 1, name: "Contact 001", description: "Contact 001 des", email: "[email protected]"}, {id: 2, name: "Contact 002", description: "Contact 002 des", email: "[email protected]"}, {id: 3, name: "Contact 003", description: "Contact 003 des", email: "[email protected]"}, {id: 4, name: "Contact 004", description: "Contact 004 des", email: "[email protected]"} ]; constructor() { } public getContacts():Array<{id, name, description, email}>{ return this.contacts; } public createContact(contact: {id, name, description, email}){ this.contacts.push(contact); } }

Nous ajoutons un tableau de contacts avec des contacts de démonstration, une méthode getContacts() qui renvoie les contacts et un createContact() qui ajoute un nouveau contact au tableau de contacts .

Ajout de composants

Après avoir créé le service de données, nous devons ensuite créer des composants pour notre application. Dans votre terminal, exécutez :

 $ ng generate component home $ ng generate component contact-create $ ng generate component contact-list

Ensuite, nous ajouterons ces composants au module de routage pour permettre la navigation dans notre application. Ouvrez le fichier src/app/app-routing.module.ts et remplacez son contenu par ce qui suit :

 import { NgModule } from '@angular/core'; import { Routes, RouterModule } from '@angular/router'; import { ContactListComponent } from './contact-list/contact-list.component'; import { ContactCreateComponent } from './contact-create/contact-create.component'; import { HomeComponent } from './home/home.component'; const routes: Routes = [ {path: "", pathMatch: "full",redirectTo: "home"}, {path: "home", component: HomeComponent}, {path: "contact-create", component: ContactCreateComponent}, {path: "contact-list", component: ContactListComponent} ]; @NgModule({ imports: [RouterModule.forRoot(routes)], exports: [RouterModule] }) export class AppRoutingModule { }

Nous utilisons la propriété redirectTo du chemin du routeur pour rediriger les utilisateurs vers la page d'accueil lorsqu'ils visitent notre application.

Ajout de composants d'en-tête et de pied de page

Ensuite, créons les composants d'en-tête et de pied de page :

 $ ng generate component header $ ng generate component footer

Ouvrez le fichier src/app/header/header.component.html et ajoutez le code suivant :

 <nav class="navbar navbar-expand-md bg-dark navbar-dark fixed-top"> <a class="navbar-brand" href="#">Angular Bootstrap Demo</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item"> <a class="nav-link" routerLink="/home">Home</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/contact-list">Contacts</a> </li> <li class="nav-item"> <a class="nav-link" routerLink="/contact-create">Create</a> </li> </ul> </div> </nav>

Une barre de navigation sera créée avec Bootstrap 4, et nous utiliserons la directive routerLink pour établir un lien vers différents composants.

Utilisez les .navbar , .navbar-expand{-sm|-md|-lg|-xl} et .navbar-dark pour créer des barres de navigation Bootstrap. (Pour plus d'informations sur les barres de navigation, consultez la documentation de Bootstrap sur "Navbar".

Ensuite, ouvrez le fichier src/app/header/header.component.css et ajoutez :

 .nav-item{ padding:2px; margin-left: 7px; }

Ensuite, ouvrez le fichier src/app/footer/footer.component.html et ajoutez :

 <footer> <p class="text-xs-center">© Copyright 2019. All rights reserved.</p> </footer>

Ouvrez le fichier src/app/footer/footer.component.css et ajoutez :

 footer { position: absolute; right: 0; bottom: 0; left: 0; padding: 1rem; text-align: center; }

Ensuite, ouvrez le fichier src/app/app.component.html et remplacez son contenu par ce qui suit :

 <app-header></app-header> <router-outlet></router-outlet> <app-footer></app-footer>

Nous créons un shell d'application en utilisant les composants d'en-tête et de pied de page, ce qui signifie qu'ils seront présents sur chaque page de notre application. La seule partie qui sera modifiée est ce qui sera inséré dans la prise du routeur (consultez « The Application Shell » sur le site Web d'Angular pour plus d'informations).

Ajout d'un bootstrap Jumbotron

Selon la documentation Bootstrap :

"Un Jumbotron est un composant léger et flexible qui peut éventuellement étendre l'intégralité de la fenêtre d'affichage pour présenter des messages marketing clés sur votre site."

Ajoutons un composant Jumbotron à notre page d'accueil. Ouvrez le fichier src/app/home/home.component.html et ajoutez :

 <div class="jumbotron"> <h1>Angular Bootstrap Demo</h1> <p class="lead"> This demo shows how to integrate Bootstrap 4 with Angular 7 </p> <a class="btn btn-lg btn-primary" href="" role="button">View tutorial</a> </div>

La classe .jumbotron est utilisée pour créer un Bootstrap Jumbotron.

Ajout d'un composant de liste : utilisation d'une table d'amorçage

Créons maintenant des données de composant à liste à partir du service de données et utilisons une table Bootstrap 4 pour afficher les données tabulaires.

Tout d'abord, ouvrez le fichier src/app/contact-list/contact-list.component.ts et injectez le service de données puis appelez la méthode getContacts() pour obtenir les données lorsque le composant est initialisé :

 import { Component, OnInit } from '@angular/core'; import { DataService } from '../data.service'; @Component({ selector: 'app-contact-list', templateUrl: './contact-list.component.html', styleUrls: ['./contact-list.component.css'] }) export class ContactListComponent implements OnInit { contacts; selectedContact; constructor(public dataService: DataService) { } ngOnInit() { this.contacts = this.dataService.getContacts(); } public selectContact(contact){ this.selectedContact = contact; } }

Nous avons ajouté deux variables contacts et selectedContact qui contiennent l'ensemble des contacts et le contact sélectionné. Et une méthode selectContact() qui affecte le contact sélectionné à la variable selectedContact .

Ouvrez le fichier src/app/contact-list/contact-list.component.html et ajoutez :

 <div class="container"> <table class="table table-hover"> <thead> <tr> <th>#</th> <th>Name</th> <th>Email</th> <th>Actions</th> </tr> </thead> <tbody> <tr *ngFor="let contact of contacts"> <td>{{ contact.id }}</td> <td> {{ contact.name }}</td> <td> {{ contact.email }}</td> <td> <button class="btn btn-primary" (click)="selectContact(contact)"> Show details</button> </td> </tr> </tbody> </table> <div class="card text-center" *ngIf="selectedContact"> <div class="card-header"> # {{selectedContact.id}} </div> <div class="card-block"> <h4 class="card-title">{{selectedContact.name}}</h4> <p class="card-text"> {{selectedContact.description}} </p> </div> </div> </div>

Nous parcourons simplement le tableau des contacts et affichons les détails de chaque contact et un bouton pour sélectionner un contact. Si le contact est sélectionné, une carte Bootstrap 4 avec plus d'informations sera affichée.

Voici la définition d'une carte de Bootstrap 4 docs :

« Une carte est un conteneur de contenu flexible et extensible. Il comprend des options pour les en-têtes et les pieds de page, une grande variété de contenus, des couleurs d'arrière-plan contextuelles et de puissantes options d'affichage. Si vous connaissez Bootstrap 3, les cartes remplacent nos anciens panneaux, puits et vignettes. Des fonctionnalités similaires à ces composants sont disponibles en tant que classes de modificateurs pour les cartes.

Nous utilisons les .table et .table-hover pour créer des tableaux de style Bootstrap, les .card , .card-block , .card-title et .card-text pour créer des cartes. (Pour plus d'informations, consultez Tables et cartes.)

Ajout d'un composant de création : utilisation des contrôles et des classes de formulaire Bootstrap

Ajoutons maintenant un formulaire à notre composant contact-create . Tout d'abord, nous devons importer le FormsModule dans notre module d'application principal. Ouvrez le fichier src/app/app.module.ts , importez FormsModule depuis @angular/forms et ajoutez-le au tableau imports :

 import { BrowserModule } from '@angular/platform-browser'; import { NgModule } from '@angular/core'; import { AppRoutingModule } from './app-routing.module'; import { FormsModule } from '@angular/forms'; /* ... */ @NgModule({ declarations: [ /* ... */ ], imports: [ BrowserModule, AppRoutingModule, FormsModule ], providers: [], bootstrap: [AppComponent] }) export class AppModule { }

Ensuite, ouvrez le fichier src/app/contact-create/contact-create.component.ts et remplacez son contenu par ce qui suit :

 import { Component, OnInit } from '@angular/core'; import { DataService } from '../data.service'; @Component({ selector: 'app-contact-create', templateUrl: './contact-create.component.html', styleUrls: ['./contact-create.component.css'] }) export class ContactCreateComponent implements OnInit { contact : {id, name, description, email} = {id: null, name: "", description: "", email: ""}; constructor(public dataService: DataService) { } ngOnInit() { } createContact(){ console.log(this.contact); this.dataService.createContact(this.contact); this.contact = {id: null, name: "", description: "", email: ""}; } }

Ensuite, ouvrez le fichier src/app/contact-create/contact-create.component.html et ajoutez le code suivant :

 <div class="container"> <div class="row"> <div class="col-sm-8 offset-sm-2"> <div> <form> <div class="form-group"> <label for="id">ID</label> <input [(ngModel)]="contact.id" type="text" name="id" class="form-control" placeholder="Enter ID"> <small class="form-text text-muted">Enter your contact's ID</small> <label for="name">Contact Name</label> <input [(ngModel)]="contact.name" type="text" name="name" class="form-control" placeholder="Enter your name"> <small class="form-text text-muted">Enter your contact's name</small> <label for="email">Contact Email</label> <input [(ngModel)]="contact.email" type="text" name="email" class="form-control" placeholder="Enter your email"> <small class="form-text text-muted">Enter your contact's email</small> <label for="description">Contact Description</label> <textarea [(ngModel)]="contact.description" name="description" class="form-control"> </textarea> <small class="form-text text-muted">Enter your contact's description</small> </div> </form> <button class="btn btn-primary" (click)="createContact()">Create contact</button> </div> </div> </div> </div>

Nous utilisons les .form-group , .form-control pour créer un formulaire de style Bootstrap (consultez « Formulaires » pour plus d'informations).

Nous utilisons la directive ngModel pour lier les champs du formulaire à la variable des composants. Pour que la liaison de données fonctionne correctement, vous devez attribuer un nom à chaque champ de formulaire.

Lecture recommandée : Gestion des points d'arrêt d'image avec Angular par Tamas Piros

Exécution de l'application angulaire

À cette étape, exécutons l'application et voyons si tout fonctionne comme prévu. Rendez-vous sur votre terminal, assurez-vous d'être dans le dossier racine de votre projet puis lancez la commande suivante :

 $ ng serve

Un serveur de développement live-reload fonctionnera à partir de l'adresse https://localhost:4200 . Ouvrez votre navigateur Web et accédez à cette adresse. Vous devriez voir l'interface suivante :

Si vous accédez à la page Contacts, vous devriez voir :

Si vous accédez à la page "Créer un contact", vous devriez voir :

Conclusion

Dans ce tutoriel, nous avons vu comment créer une application Angular simple avec une interface Bootstrap. Vous pouvez trouver le code source complet sur GitHub et voir l'exemple en direct ici.