Name: JavaScript et Angular Des bases du langage au développement d'une application web
Rating: 4 (2 reviews)

Commandes Git

Les commandes GIT suivantes permettent d’accéder au code source des chapitres précédents :

cd C:\

git clone https://github.com/EditionsENI/JavaScriptEtAngular.git

cd C:\ENI_Angular

git checkout chapitre09

code .

Introduction

Un gabarit est un fichier au format HTML avec quelques ajouts typiquement Angular.

Lors de la création d’un composant, Angular CLI va créer un fichier HTML. Ce fichier est la partie vue de l’architecture MVC. Le contrôleur et la vue sont liés grâce à l’attribut templateUrls du décorateur @Component du fichier TypeScript.

cd C:\JavaScriptEtAngular\Angular\monProjetAngular\ 
ng generate component composants/c09

// C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c09\c09.components.ts 
import { Component } from '@angular/core'; 
 
@Component({ 
  selector: 'app-c09', 
  templateUrl: './c09.component.html' 
}) 
export class C09Component { 
}

Bootstrap

Bootstrap est le cadriciel CSS le plus populaire auprès des développeurs qui n’ont aucun talent de graphiste. Il permet d’offrir une cohérence et un design élégant sans difficulté. D’abord développé par l’équipe de développeurs Twitter, il est maintenant utilisé par des milliers de sites internet.

Bien entendu, un paquet Bootstrap est disponible dans le gestionnaire de paquets npm : https://www.npmjs.com/package/bootstrap. Pour l’installer, il suffit de taper les bonnes commandes dans le bon terminal.

npm install --save boostrap 
npm install --save jquery

Pour lier Bootstrap au projet, deux solutions :

Soit ajouter les CDN (Content Delivery Network) de Bootstrap dans la balise head du fichier index.html situé dans le répertoire src.
Soit ajouter le répertoire du module Bootstrap au paramètre styles du fichier angular.json.

La seconde méthode est plus simple et permet de suivre facilement les différentes montées de versions de Bootstrap. En effet, le chemin d’accès au module est toujours identique et la mise à jour du paquet npm entraîne automatiquement la mise à jour du cadriciel dans toute l’application.

{ 
         "options": { 
           "outputPath": "dist/DBmanager", ...

Interpolation

L’interpolation est le fait, dans un gabarit, d’utiliser une variable définie dans la classe TypeScript du contrôleur. C’est un mot compliqué qui permet de briller en société, mais qui, en substance, peut être traduit par "affichage de données TypeScript dans un gabarit".

// C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c09\c09.component.ts 
import { Component, OnInit } from '@angular/core'; 
 
@Component({ 
 selector: 'app-c09', 
 templateUrl: './c09.component.html', 
 styleUrls: ['./c09.component.css'] 
}) 
export class C09Component implements OnInit{ 
 
 maVariableAafficher = 'Une variable à afficher'; 
 
 constructor() { } 
 
 ngOnInit() { 
 } 
 
}

La classe C09Component contient un attribut nommé maVariableAafficher utilisable dans la partie gabarit du composant grâce aux double accolades {{ }}.

Les doubles accolades sont appelées ’’moustaches’’.

< !-- C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c09\c09.components.html --> 
<p>Interpolation : {{maVariableAafficher}}</p>

La variable de la classe TypeScript...

Événements

Traiter un évènement, c’est faire précisément l’inverse de l’interpolation. Une action dans le gabarit va entraîner une action dans la classe du composant.

Très souvent, c’est un bouton qui provoque un évènement, mais n’importe quel élément HTML peut être un déclencheur.

<button (evenement)="nomDeLaFonction()">texteDuBoutton</button>

< !-- C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c09\c09.components.html --> 
<div class="container text-center"> 
 <p>Le composant C09</p> 
 <button class="btn btn-primary" 
         (click)="unClic()">Un bouton</button> 
</div>

L’évènement (click) intervient lorsque l’utilisateur clique sur le bouton. Il existe différents évènements et le développeur peut même en créer d’autres. (click), (mouseover) et (mouseleave) restent les plus utilisés, selon nous.

Il ne reste plus à la classe TypeScript qu’à créer une méthode qui effectuera une action en réponse à l’évènement déclenché.

// C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c09\c09.component.ts ...

Directives

Une directive est un composant Angular un peu particulier puisqu’il ne possède aucun gabarit. On en compte cinq :

ngIf
ngFor
ngSwitch
ngClass
ngStyle

Même si ces directives sont situées dans le gabarit, ce sont bien des composants. Il en existe de deux sortes :

Les directives structurelles, qui modifient le DOM en ajoutant, en supprimant ou en modifiant un élément.
Les directives de données, qui en modifient l’apparence.

1. Directives de structure

a. Conditions

La directive ngIf permet d’afficher, ou non, un élément HTML suivant une condition.

<elementHTML *ngIf="uneCondition"></elementHTML>

La condition doit forcément retourner vrai ou faux. C’est uniquement dans le premier cas que l’élément HTML sera affiché.

< !-- C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c09\c09.components.html  --> 
<div class="container text-center"> 
 <p>Le composant C09</p> 
 <button class="btn btn-primary" 
         (click)="unClic()">{{nomDuBouton}}</button> 
 <p *ngIf="true">Cet élément est affiché</p> 
 <p *ngIf="false">Cet élément n'est pas affiché</p> 
</div>

N’importe quelle opération mathématique et même une fonction peut être une condition de ngIf.

< !-- C:\JavaScriptEtAngular\Angular\monProjetAngular\src\app\
composants\c09\c09.components.html  --> 
<div class="container text-center"> 
 <p>Le composant C09</p> 
 <button class="btn btn-primary" 
         (click)="unClic()">{{nomDuBouton}}</button> 
 <p *ngIf="nbreDeClic%2 == 0">Le bouton a été cliqué un nombre  
pair de fois</p> 
</div>

Lorsque le développeur souhaite afficher quelque chose quand la condition est vraie et autre chose quand la condition est fausse, il doit avoir recours à, au moins, deux ng-template.

<ng-template #nomDeLaTemplate>        <elementHTML></elementHTML></ng-template>...

Mise en pratique

1. Énoncé

À partir de l’application PokemonManager et des deux composants créés dans le chapitre Angular CLI - Composants, affichez le composant generations en page d’accueil. Utilisez son sélecteur pour le placer judicieusement dans le fichier app-component.html.

Créez un tableau nommé generations dans le fichier generations.component.ts. Il doit contenir les sept générations de Pokémon, à savoir :

Génération I
Génération II
Génération III
Génération IV
Génération V
Génération VI
Génération VII

Dans le gabarit generations.component.html, affichez la liste des générations. Utilisez une directive de structure pour afficher l’ensemble sous forme de liste.

Pour rendre l’ensemble plus agréable à regarder, utilisez le framework CSS Bulma que vous intégrerez à l’application grâce à son paquet npm.

Listing des différentes générations de Pokémon

2. Correction

index.html est le fichier utilisé par une application Angular lors de la navigation vers la page d’accueil. Celui-ci intègre le sélecteur app-root à l’intérieur de sa balise body et permet ainsi le rendu du composant principal app-component.

Bien sûr, il suffit de remplacer...

Gabarits