Angular 8 : introduction
Achref El Mouelhi
Docteur de l’université d’Aix-Marseille
Chercheur en programmation par contrainte (IA)
Ingénieur en génie logiciel
elmouelhi.achref@gmail.com
12-13 Avril 2018 1 / 44
Plan
1 Introduction
2 Installation
3 Création et structure d’un projet
4 Affichage d’attribut (de type objet ou tableau) ou méthode
Interpolation
One way binding
5 Directives Angular
*ngFor
*ngIf
ngSwitch
ngStyle
ngClass
12-13 Avril 2018 2 / 44
Introduction
Angular
Angular
Framework JavaScript, open source, présenté par Google en
2009
Permettant de créer des applications
Front-End
mono-page
utilisant les composants webs
Basé sur un concept connu en programmation orientée objet
Injection de dépendance : consistant à utiliser des classes
sans faire de l’instanciation statique
12-13 Avril 2018 3 / 44
Introduction
Angular
Quels langages utilise Angular ?
HTML pour les vues
CSS pour les styles
TypeScript : pour les scripts depuis la version 2
12-13 Avril 2018 4 / 44
Introduction
Angular
TypeScript ?
langage de programmation orienté objet à classes, open source
influencé par C# et JavaScript
développé et présenté par MicroSoft en 2012
par rapport au JavaScript, il supporte l’ES6 et il permet de :
typer les variables
définir des classes et des interfaces
utiliser les annotations (les décorateurs)
exporter et importer des modules
12-13 Avril 2018 5 / 44
Introduction
Angular
Les différentes versions d’Angular
Angular 1 (ou AngularJS) présenté en 2009 : utilisant le
JavaScript
Angular 2 présenté en octobre 2014 : remplacement du
JavaScript par TypeScript
Angular 4 présenté en décembre 2016
Angular 5 présenté en novembre 2017
Angular 6 présenté en mai 2018
Angular 7 présenté en octobre 2018
Angular 8 présenté en mai 2019
12-13 Avril 2018 6 / 44
Installation
Angular
Étapes
Télécharger et installer NodeJS (Dernière version stable LTS)
Démarrer une console
Lancer la commande npm install -g @angular/cli
Redémarrer la console
Pour vérifier l’installation, exécuter la commande ng version
Pour explorer la liste des commandes Angular disponibles,
exécuter la commande ng
12-13 Avril 2018 7 / 44
Création et structure d’un projet
Angular
Étapes
Lancer la commande ng new ProjectName et répondre aux
questions suivantes (depuis la version 7) :
Would you like to add Angular routing ? (N)
Which stylesheet format would you like to use ? (CSS)
Would you like to share anonymous usage data with the Angular
Team at Google under Google’s Privacy Policy at
https ://policies.google.com/privacy ? For more details and how to
change this setting, see http ://angular.io/analytics. (N)
Se placer dans le projet cd ProjectName
Lancer le projet ng serve --open
12-13 Avril 2018 8 / 44
Création et structure d’un projet
Angular
Arborescence d’un projet Angular 8
e2e : contenant les fichiers permettant de tester l’application
node modules : contenant les fichiers nécessaires de la librairie nodeJS pour
un projet Angular
src : contenant les fichiers sources de l’application
package.json : contenant l’ensemble de dépendance de l’application
.angular-cli.json (ou angular.json depuis la version 6) : contenant les
données concernant la configuration du projet (les commandes raccourcies,
l’emplacement des fichiers de démarrage...)
tslint.json : contenant les données sur les règles à respecter par le
développeur (nombre de caractères max par ligne, l’emplacement des
espaces...)
12-13 Avril 2018 9 / 44
Création et structure d’un projet
Angular
Que contient src ?
assets : l’unique dossier accessible aux visiteurs et contenant les images, les sons...
index.html : l’unique fichier HTML d’une application Angular
styles.css : la feuille de style commune de tous les composants web de l’application
favicon.ico : le logo d’Angular
app : contient initialement les 5 fichiers du module principal
app.module.ts : la classe correspondante au module principal
app.component.ts : la classe associé au composant web
app.component.html : le fichier contenant le code HTML
associé au composant web
app.component.css : le fichier contenant le code CSS associé
au composant web
app.component.spec.ts : le fichier de test du composant web
12-13 Avril 2018 10 / 44
Création et structure d’un projet
Angular
Que contient src ?
assets : l’unique dossier accessible aux visiteurs et contenant les images, les sons...
index.html : l’unique fichier HTML d’une application Angular
styles.css : la feuille de style commune de tous les composants web de l’application
favicon.ico : le logo d’Angular
app : contient initialement les 5 fichiers du module principal
app.module.ts : la classe correspondante au module principal
app.component.ts : la classe associé au composant web
app.component.html : le fichier contenant le code HTML
associé au composant web
app.component.css : le fichier contenant le code CSS associé
au composant web
app.component.spec.ts : le fichier de test du composant web
Pour créer un projet sans les fichiers de test (.spec.ts), utiliser la commande ng new
ProjectName --skip-tests=true
12-13 Avril 2018 10 / 44
Création et structure d’un projet
Angular
Contenu d’index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>ProjectName</title>
<!-- cette balise va permettre d’assurer le routage -->
<base href="/">
<meta name="viewport" content="width=device-width, initial-
scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<!-- le composant web introduit dans le module principal -->
<app-root></app-root>
</body>
</html>
12-13 Avril 2018 11 / 44
Création et structure d’un projet
Angular
Contenu d’app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
12-13 Avril 2018 12 / 44
Création et structure d’un projet
Angular
Contenu d’app.module.ts
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [],
bootstrap: [AppComponent]
})
export class AppModule { }
Explication
@NgModule : pour déclarer cette classe comme module
declarations : dans cette section, on déclare les composants de ce module
imports : dans cette section, on déclare les modules nécessaires pour le module
providers : dans cette section, on déclare les services qui seront utilisés dans le module
bootstrap : dans cette section, on déclare le composant principal de ce module
12-13 Avril 2018 12 / 44
Création et structure d’un projet
Le fichier app.component.ts Le fichier app.component.html
@Component({ <div style="text-align:center">
selector: ’app-root’, <h1>
templateUrl: ’./app.component.html’, Welcome to {{ title }}!
styleUrls: [’./app.component.css’] </h1>
}) ...
export class AppComponent { </div>
title = ’Angular8’;
}
12-13 Avril 2018 13 / 44
Création et structure d’un projet
Le fichier app.component.ts Le fichier app.component.html
@Component({ <div style="text-align:center">
selector: ’app-root’, <h1>
templateUrl: ’./app.component.html’, Welcome to {{ title }}!
styleUrls: [’./app.component.css’] </h1>
}) ...
export class AppComponent { </div>
title = ’Angular8’;
}
Explication
@Component : pour déclarer cette classe comme composant web
selector : pour définir le nom de balise correspondant à ce composant web
templateUrl : pour indiquer le fichier contenant le code HTML correspondant au
composant web
styleUrls : pour indiquer le(s) fichier(s) contenant le code CSS correspondant au
composant web
12-13 Avril 2018 13 / 44
Création et structure d’un projet
Le fichier app.component.ts Le fichier app.component.html
@Component({ <div style="text-align:center">
selector: ’app-root’, <h1>
templateUrl: ’./app.component.html’, Welcome to {{ title }}!
styleUrls: [’./app.component.css’] </h1>
}) ...
export class AppComponent { </div>
title = ’Angular8’;
}
Explication
@Component : pour déclarer cette classe comme composant web
selector : pour définir le nom de balise correspondant à ce composant web
templateUrl : pour indiquer le fichier contenant le code HTML correspondant au
composant web
styleUrls : pour indiquer le(s) fichier(s) contenant le code CSS correspondant au
composant web
{{ Interpolation }}
Welcome to {{ title }} ! : title sera remplacé par sa valeur dans app.component.ts
12-13 Avril 2018 13 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Angular
Objectif : afficher les attributs et les valeurs sous forme d’une liste HTML
Créer un répertoire classes dans app où on va placer toutes les
classes
Créer une première classe Personne ayant les attributs nom et prénom
Créer un objet de cette classe dans app.component.ts
Afficher les valeurs de cet objet sous forme de liste dans
app.component.html
12-13 Avril 2018 14 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Angular
Objectif : afficher les attributs et les valeurs sous forme d’une liste HTML
Créer un répertoire classes dans app où on va placer toutes les
classes
Créer une première classe Personne ayant les attributs nom et prénom
Créer un objet de cette classe dans app.component.ts
Afficher les valeurs de cet objet sous forme de liste dans
app.component.html
On peut aussi faire
ng generate class classes/Personne
12-13 Avril 2018 14 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Angular
Contenu de personne.ts
export class Personne {
constructor(private _nom: string, private _prenom: string) {}
get nom() {
return this._nom;
}
set nom(nom: string) {
this._nom = nom;
}
get prenom() {
return this._prenom;
}
set prenom(prenom: string) {
this._prenom = prenom;
}
}
12-13 Avril 2018 15 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Angular
Créer un objet de type Personne dans app.component.ts
import { Component } from ’@angular/core’;
import { Personne } from ’./classes/personne’;
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ’Angular8’;
personne: Personne;
constructor() {
this.personne = new Personne ("Wick", "John");
}
}
12-13 Avril 2018 16 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Angular
Afficher l’objet personne dans app.component.html
<ul>
<li> Nom : {{ personne.nom }} </li>
<li> Prenom : {{ personne.prenom }} </li>
</ul>
12-13 Avril 2018 17 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Angular
Créer un tableau d’entiers tab dans app.component.ts
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ’Angular8’;
personne: Personne;
tab: number[] = [2,3,5,8];
constructor() {
this.personne = new Personne ("Wick", "John");
}
}
12-13 Avril 2018 18 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Afficher le tableau tab dans app.component.html
<ul>
<li> {{ tab[0] }} </li>
<li> {{ tab[1] }} </li>
<li> {{ tab[2] }} </li>
<li> {{ tab[3] }} </li>
</ul>
12-13 Avril 2018 19 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Afficher le tableau tab dans app.component.html
<ul>
<li> {{ tab[0] }} </li>
<li> {{ tab[1] }} </li>
<li> {{ tab[2] }} </li>
<li> {{ tab[3] }} </li>
</ul>
Remarques
Ce code est trop répétitif
Et si on ne connaissait pas le nombre d’éléments
Ou si on ne voulait pas afficher tous les éléments
12-13 Avril 2018 19 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Afficher le tableau tab dans app.component.html
<ul>
<li> {{ tab[0] }} </li>
<li> {{ tab[1] }} </li>
<li> {{ tab[2] }} </li>
<li> {{ tab[3] }} </li>
</ul>
Remarques
Ce code est trop répétitif
Et si on ne connaissait pas le nombre d’éléments
Ou si on ne voulait pas afficher tous les éléments
Solution
utiliser les directives (section suivante)
12-13 Avril 2018 19 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Angular
Ajouter une méthode direBonjour() dans app.component.ts
import { Component } from ’@angular/core’;
import { Personne } from ’./classes/personne’;
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
title = ’Angular8’;
personne: Personne;
tab: number[] = [2, 3, 5, 8];
constructor() {
this.personne = new Personne("Wick", "John");
}
direBonjour() {
return "bonjour Angular";
}
}
12-13 Avril 2018 20 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode Interpolation
Angular
Appeler la méthode direBonjour() dans app.component.html
<p>{{ direBonjour() }}</p>
12-13 Avril 2018 21 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode One way binding
Angular
Considérons le contenu suivant de app.component.ts
import { Component } from ’@angular/core’;
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
nom = ’wick’;
// le contenu précédent
}
12-13 Avril 2018 22 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode One way binding
Angular
Considérons le contenu suivant de app.component.ts
import { Component } from ’@angular/core’;
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
nom = ’wick’;
// le contenu précédent
}
Pour afficher le contenu de l’attribut nom dans le template, on peut utiliser
l’interpolation
<p> {{ nom }} </p>
12-13 Avril 2018 22 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode One way binding
Angular
On peut aussi faire le one way binding en utilisant la propriété
JavaScript textContent
<p [textContent]=nom></p>
12-13 Avril 2018 23 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode One way binding
Angular
On peut aussi faire le one way binding en utilisant la propriété
JavaScript textContent
<p [textContent]=nom></p>
[ one way binding ] ou [ property binding ]
[property] = ’value’ : permet de remplacer value par sa
valeur dans la classe app.component.ts
12-13 Avril 2018 23 / 44
Affichage d’attribut (de type objet ou tableau) ou méthode One way binding
Angular
Exercice
Créer deux boutons HTML dont l’un est initialement désactivé
(disabled)
En cliquant chaque fois sur le bouton activé, ce dernier devient
désactivé et le deuxième devient activé
12-13 Avril 2018 24 / 44
Directives Angular
Angular
Plusieurs directives possibles
*ngFor
*ngIf
*ngSwitch
ng-container
ng-template
ngStyle
ngClass
12-13 Avril 2018 25 / 44
Directives Angular *ngFor
Angular
*ngFor
permet de répéter un traitement (affichage d’un élément HTML)
s’utilise comme un attribut de balise et sa valeur est une
instruction itérative TypeScript
12-13 Avril 2018 26 / 44
Directives Angular *ngFor
Angular
Afficher le tableau tab en utilisant *ngFor
<ul>
<li *ngFor="let elt of tab">
{{ elt }}
</li>
</ul>
12-13 Avril 2018 27 / 44
Directives Angular *ngFor
Angular
Afficher le tableau tab en utilisant *ngFor
<ul>
<li *ngFor="let elt of tab">
{{ elt }}
</li>
</ul>
Et pour avoir l’indice de l’itération courante
<ul>
<li *ngFor="let elt of tab; let i = index">
{{ i }} : {{ elt }}
</li>
</ul>
12-13 Avril 2018 27 / 44
Directives Angular *ngIf
Angular
Et si on veut tester puis afficher si le premier élément est impair
<ul>
<li *ngIf="tab[0]%2 != 0">
{{ tab[0] }} est impair
</li>
</ul>
12-13 Avril 2018 28 / 44
Directives Angular *ngIf
Angular
Exercice
Écrire un code HTML, en utilisant les directives Angular, qui permet
d’afficher le premier élément du tableau (tab) ainsi que sa parité (pair
ou impair).
12-13 Avril 2018 29 / 44
Directives Angular *ngIf
Angular
Solution
<ul>
<li *ngIf="tab[0]%2 != 0; else sinon">
{{ tab[0] }} est impair
</li>
<ng-template #sinon>
<li>
{{ tab[0] }} est pair
</li>
</ng-template>
</ul>
ng-template n’apparaı̂tra pas dans le DOM de la page.
12-13 Avril 2018 30 / 44
Directives Angular *ngIf
Angular
Exercice
Écrire un code HTML, en utilisant les directives Angular, qui permet
d’afficher sous forme d’une liste chaque élément du tableau précédent
(tab) ainsi que sa parité.
12-13 Avril 2018 31 / 44
Directives Angular *ngIf
Angular
Solution
<ul>
<ng-container *ngFor="let elt of tab">
<li *ngIf="elt % 2 != 0; else sinon">
{{ elt }} est impair
</li>
<ng-template #sinon>
<li>
{{ elt }} est pair
</li>
</ng-template>
</ng-container>
</ul>
ng-container n’apparaı̂tra pas dans le DOM de la page.
12-13 Avril 2018 32 / 44
Directives Angular *ngIf
Angular
Exercice
Écrire un code HTML, en utilisant les directives Angular, qui permet
d’afficher sous forme d’une liste chaque élément du tableau précédent
avec un message défini ainsi :
Si la valeur est comprise entre 0 et 9 : échec
Si elle est entre 10 et 13 : moyen
Si elle est entre 14 et 16 : bien
Sinon : très bien
12-13 Avril 2018 33 / 44
Directives Angular ngSwitch
Angular
Solution
<ul>
<ng-container *ngFor="let elt of tab">
<ng-container [ngSwitch]="true">
<li *ngSwitchCase="elt >= 0 && elt < 10">
{{ elt }} : échec
</li>
<li *ngSwitchCase="elt >= 10 && elt < 13">
{{ elt }} : moyen
</li>
<li *ngSwitchCase="elt >= 13 && elt < 15">
{{ elt }} : bien
</li>
<li *ngSwitchCase="elt >= 15">
{{ elt }} : très bien
</li>
<li *ngSwitchDefault>
autre
</li>
</ng-container>
</ng-container>
</ul>
12-13 Avril 2018 34 / 44
Directives Angular ngSwitch
Angular
Remarques
*ngFor nous permet d’itérer sur un tableau, mais non pas sur un
objet
Il est possible d’itérer sur un objet après avoir défini un pipe qui
convertit virtuellement un objet en tableau
12-13 Avril 2018 35 / 44
Directives Angular ngStyle
Angular
ngStyle
permet de modifier le style d’un élément HTML
s’utilise conjointement avec le property binding pour récupérer
des valeurs définies dans la classe
12-13 Avril 2018 36 / 44
Directives Angular ngStyle
Angular
Considérons le contenu suivant de app.component.ts
import { Component } from ’@angular/core’;
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
nom = ’wick’;
// le contenu précédent
}
12-13 Avril 2018 37 / 44
Directives Angular ngStyle
Angular
Considérons le contenu suivant de app.component.ts
import { Component } from ’@angular/core’;
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
nom = ’wick’;
// le contenu précédent
}
Pour afficher le contenu de l’attribut nom dans le template avec une couleur de
fond rouge
<p [textContent]=nom [ngStyle]="{backgroundColor: ’red’}"></p>
12-13 Avril 2018 37 / 44
Directives Angular ngStyle
Angular
Il est possible de définir des méthodes dans app.component.ts qui gèrent le
style d’un élement HTML
import { Component } from ’@angular/core’;
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
// le contenu précédent
nom = ’wick’;
getColor() {
return "white";
}
getBackgroundColor() {
return "red";
}
}
12-13 Avril 2018 38 / 44
Directives Angular ngStyle
Angular
Pour afficher le contenu de l’attribut nom dans le template avec
une couleur de fond rouge
<p [ngStyle]="{color: getColor(), backgroundColor:
getBackgroundColor()}">
{{ nom }}
</p>
12-13 Avril 2018 39 / 44
Directives Angular ngClass
Angular
ngClass
permet d’attribuer de nouvelles classes d’un élément HTML
s’utilise conjointement avec le property binding pour récupérer
des valeurs définies dans la classe ou dans la feuille de style
12-13 Avril 2018 40 / 44
Directives Angular ngClass
Angular
Considérons le contenu suivant de app.component.ts
import { Component } from ’@angular/core’;
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
nom = ’wick’;
// le contenu précédent
}
12-13 Avril 2018 41 / 44
Directives Angular ngClass
Angular
Considérons le contenu suivant de app.component.ts
import { Component } from ’@angular/core’;
@Component({
selector: ’app-root’,
templateUrl: ’./app.component.html’,
styleUrls: [’./app.component.css’]
})
export class AppComponent {
nom = ’wick’;
// le contenu précédent
}
On définit deux classes rouge et bleu dans app.component.css
.rouge {
color: red;
}
.bleu {
color:
12-13 Avril 2018 blue; 41 / 44
Directives Angular ngClass
Angular
Pour associer la classe rouge à la balise <p>
<p [ngClass]="{’rouge’: true}">
{{ nom }}
</p>
12-13 Avril 2018 42 / 44
Directives Angular ngClass
Angular
Pour associer la classe rouge à la balise <p>
<p [ngClass]="{’rouge’: true}">
{{ nom }}
</p>
Ainsi, on peut faire aussi un affichage conditionnel
<p [ngClass]="{’rouge’: nom == ’wick’}">
{{ nom }}
</p>
12-13 Avril 2018 42 / 44
Directives Angular ngClass
Angular
Pour associer la classe rouge à la balise <p>
<p [ngClass]="{’rouge’: true}">
{{ nom }}
</p>
Ainsi, on peut faire aussi un affichage conditionnel
<p [ngClass]="{’rouge’: nom == ’wick’}">
{{ nom }}
</p>
Ou encore (le paragraphe sera affiché en rouge si nom contient wick, en bleu
sinon)
<p [ngClass]="{’rouge’: nom == ’wick’, ’bleu’: nom != ’wick’}">
{{ nom }}
</p>
12-13 Avril 2018 42 / 44
Directives Angular ngClass
Angular
Exercice
Utiliser ngClass dans un code HTML permettant d’afficher en bleu les
éléments pairs du tableau précédent (tab) et en rouge les éléments
impairs.
12-13 Avril 2018 43 / 44
Directives Angular ngClass
Angular
Solution
<ul>
<ng-container *ngFor="let elt of tab">
<li [ngClass]="{’rouge’: elt % 2 != 0, ’bleu’:
elt % 2 == 0}">
{{ elt }}
</li>
</ng-container>
</ul>
12-13 Avril 2018 44 / 44
