Introduction aux concepts de bases du framework Angular

1. Développement Framework coté client
Enseignant : Nizar MAATOUG
Institut Supérieur des Études Technologiques de Sidi Bouzid
2019/2020

2. Nizar MAATOUG2
Résultats
À la fin de ce module, vous serez en mesure de :
 Maîtriser l’architecture et les concepts du Framework Angular
 Développer des applications Angular

3. Nizar MAATOUG3
Structure
Notion de Framework
Introduction au Framework Angular
les langages de programmation utilisés par Angular
Architecture du framework Angular
Démarrer avec Angular
Structure d’un projet Angular
Les composants
Liaison de données (Data Binding)
Les directives
Interaction entre composants
Routage et navigation
Les services
HTTP et les Observables
Formulaires Angular (Template Driven Forms & Formulaire Réactif)

4. Notion de Framework

5. Nizar MAATOUG5
Notion de Framework
Un Framework désigne un ensemble cohérent de composants logiciels
structurels
Un Framework sert à créer les fondations ainsi que les grandes lignes de
tout ou d’une partie d'un logiciel (architecture).
composant 1 composant 2 composant n
Framework

6. Introduction au Framework Angular

7. Nizar MAATOUG7
Introduction au framework Angular
 Angular Permet de créer la partie Front-End des applications web de
type SPA (Single Page Application)
 Une SPA est une application qui contient une seule page HTML
 La seule page contient différents composants web.

8. Nizar MAATOUG8
Langages
HTML pour les vues
CSS pour les styles
TypeScript pour les scripts à partir de la version 2

9. Nizar MAATOUG9
TypeScript
langage de programmation orienté objet
open source
influencé par C# et JavaScript
Développé et présenté par MicroSoft en 2012
il permet de :
typer les variables
définir des classes et des interfaces
utiliser les annotations (les décorateurs)
exporter et importer des modules

10. Nizar MAATOUG10
Evolution
Angular 1 (ou AngularJS) présenté en 2009 :
 Première version de Angular.
 Elle est basée sur une architecture MVC coté client.
 Les applications Angular 1 sont écrite en JavaScript.
Angular 2 présenté en octobre 2014 :
 Réécriture de Angular 1
 Les applications de Angular2 sont écrites en Type Script qui est compilé et traduit
en Java Script avant d’être exécuté par les Browsers Web.
 Angular 2 est basée sur une programmation basée sur les Composants Web (Web
Componenet)
 remplacement du JavaScript par TypeScript
Angular 4, 5, 6, 7, 8 sont de simples mises à jour de Angular 2

11. Architecture du Framework Angular

12. Nizar MAATOUG12
Architecture du framework Angular
Root component
Component 1
Component 2
Component21
Component 22

13. Architecture du framework Angular
Nizar MAATOUG13
Root Component
Component 1 Component 2
Component 22Component 21

14. Architecture du framework Angular
Nizar MAATOUG14

15. Nizar MAATOUG15
Architecture du framework Angular
Une application Angular se compose de :
Un à plusieurs modules dont un est principal.
Chaque module peut inclure :
Des composant web : La partie visible de l‘application Web (IHM)
Des services pour la logique applicative.

16. Nizar MAATOUG16
Architecture du framework Angular

17. Démarrer avec Angular
Nizar MAATOUG17

18. Nizar MAATOUG18
Démarrer avec Angular
https://angular.io/guide/setup-local

19. Nizar MAATOUG19
Installation des outils
1. NodeJS : https://nodejs.org/en/download/
NodeJS installe l’outil npm (Node Package Manager) qui permet de télécharger
et installer des bibliothèques JavaScript.
2. Installer ensuite Angular CLI (Command Line Interface) qui vous
permet de générer, compiler, tester et déployer des projets angular
(https://cli.angular.io/ ) :
npm install -g @angular/cli

20. Nizar MAATOUG20
Nouveau projet Angular
Pour générer la structure d’un projet Angular, on utilise Angular CLI via sa
commande ng suivie des options new et le nom du projet.
ng new FirstApp
Cette commande génère les différents fichiers requis par une application
basique Angular et installe aussi toutes les dépendances requise par ce
projet.

21. Nizar MAATOUG21
Exécuter un projet Angular
Pour excuter un projet Angular, on exécute la
commande suivante à partir de la racine du
projet
ng serve
Cette commande compile le code source du
projet pour transpiler le code TypeScript en
JavaScript et en même temps démarre un
serveur Web local basé sur NodeJS pour
déployer l’application localement.
Pour tester le projet généré, il suffit de lancer
le Browser et taper l’url :
http:// localhost:4200

22. Nizar MAATOUG22
Edition du projet
Plusieurs IDE professionnels peuvent être utilisés pour éditer le code:
Web Storm
Visual Studio Code
Eclipse avec plugin Angular
D’autres éditeurs classiques peuvent être aussi utilisé :
Atom
Sublime Text
…

23. Structure d’un projet Angular
Nizar MAATOUG23

24. Structure d’un projet Angular
Nizar MAATOUG24
Fichiers de test end to end de l’application
Dépendances externes du projet (Librairies javaScripts et css)
Logique applicative du projet (Modules, composants,
services,…)
Code source du projet
Fichiers de configuration du projet

25. Structure d’un projet Angular
Nizar MAATOUG25
Sélecteur du root component

26. Structure d’un projet Angular
Nizar MAATOUG26

27. Les composants @Component
Nizar MAATOUG27

28. Les composants
Chaque composant se compose de:
Un classe représentant sa logique métier
Une template HTML: représentant sa vue
Une feuille de style css
Un fichier de test unitaire
Nizar MAATOUG28

29. Création de nouveaux composants
• Pour créer facilement des composants Angular, on peut utiliser la
commande ng comme suit :
ng generate component NomComposant
• Dans notre exemple, nous allons créer deux composants : about et
contacts
29 Nizar MAATOUG

30. Les composants: Détails
Nizar MAATOUG30
Décorateur: indique à Angular
que cette classe joue le rôle
d’un composant avec:
•Un sélecteur ‘app-about’
•Un template HTML
‘./about.component.html’
•Un seul fichier de style css
‘./about.component.css’

31. Déclaration d’un composant
Un composant doit être déclaré dans un module
Nizar MAATOUG31

32. Utilisation d’un composant
 Un composant peut être inséré dans n’importe quel partie HTML de
l’application en utilisant son sélecteur
 Dans cet exemple, les deux composants about et contacts sont
insérés à l’intérieur du composant racine AppComponent
Nizar MAATOUG32
AppComponent
about contacts

33. Liaison de données (Data Binding)
Nizar MAATOUG33

34. Data Binding
• Permet de faire un lien entre les données de la classe du composant
et son Template associé
Nizar MAATOUG34
Classe du composant Template du composant
data string interpolation {{data}}
property Binding <…[property]="data" …
doSome(){
…..
}
<… (click)="doSome()"Event Binding
<input [(ngModel)]="data"Two Ways Data Binding

35. Data Binding: Exemple
Nizar MAATOUG35

36. Data Binding: Exemple
Nizar MAATOUG36

37. importer FormsModule pour ngModel
Nizar MAATOUG37

38. Les Directives

39. Les directives
Il existe deux types de directives:
 Les directives structurelles: Elles ont pour but de modifier le DOM en
ajoutant, enlevant ou replaçant un élément du DOM.
 Les attribute directives: Elles ont pour but de modifier l'apparence ou le
comportement d'un élément.
Nizar MAATOUG39

40. Les directives strucurelles
 ngIf
 ngSwitch
 ngFor
Nizar MAATOUG40

41. Directive ngIf
 Permet de supprimer ou de recréer l'élément courant suivant
l'expression passée en paramètre
 Exemple:
<div *ngIf="1 > 0"> Afficher la div</div>
<div *ngIf="1 < 0"> N’affiche pas la div</div>
Nizar MAATOUG41

42. Directive ngIf (if else)
<div *ngIf="afficherNom; else elseBlock">
Nizar MAATOUG
</div>
<ng-template #elseBlock>
******
</ng-template>
Nizar MAATOUG42

43. Directive ngIf (if else)
<div *ngIf="afficherNom;then thenBlock; else elseBlock"></div>
<ng-template #thenBlock>
Nizar MAATOUG
</ng-template>
<ng-template #elseBlock>
******
</ng-template>
Nizar MAATOUG43

44. Directive ngSwitch
<div [ngSwitch]="couleur">
<div *ngSwitchCase="'rouge'">couleur rouge</div>
<div *ngSwitchCase="'bleu'">couleur bleu</div>
<div *ngSwitchCase="'vert'">couleur vert</div>
<div *ngSwitchDefault>choisir une couleur</div>
</div>
Nizar MAATOUG44

45. Directive ngFor
Nizar MAATOUG45
export class TestComponent implements OnInit {
public couleurs = ['rouge', 'vert', 'bleu'];
constructor() { }
ngOnInit() {
}
}
Liste des couleurs:
<div *ngFor="let c of couleurs">
{{c}}
</div>

46. Les attribute directives

47. 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
Nizar MAATOUG47
public styleCorrect={'background-color':'green'};
<div [ngStyle]="styleCorrect">Réponse<div>

48. 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
Nizar MAATOUG48
<div [ngClass]="{'text-success':question.isCorrect}">Réponse</div>

49. Questions
1) Quelle est la commande CLI qui permet de créer un nouveau
component ?
 ng new nom-composant
 ng generate nom-composant
 Ng build nom-composant
La commande ng generate permet de créer de nouveaux éléments
(components, services etc.) dans un projet existant. ng new crée un
nouveau projet ; ng build crée le package global d'un projet terminé.
Nizar MAATOUG49

50. Questions
2) Si vous avez une variable name = ‘Nizar' dans votre code
TypeScript, quelle syntaxe utilisez-vous pour
afficher Nizar dans le template ?
 les doubles accolades {{ }}
 les crochets [ ]
 les parenthèses ( )
Les doubles accolades {{}} correspondent au string interpolation,
permettant d'afficher le résultat d'une expression TypeScript dans le
template — ici, une variable.
Nizar MAATOUG50

51. Questions
3) Vous souhaitez qu'un bouton de votre template déclenche une
fonction dans votre TypeScript : quelle syntaxe utilisez-vous
pour l'y lier ?
 (onClick)
 (click)
 [click]
En effet, pour lier à l'événement click d'un élément, on utilise la
syntaxe (click) .
Nizar MAATOUG51

52. Questions
4) Pour qu'un bouton soit désactivé quand la
valeur authenticated est false , quelle syntaxe devez-vous
utiliser ?
 <button disabled="!authenticated">
 <button (disabled)="!authenticated">
 <button [disabled]="!authenticated">
Il faut utiliser les crochets [ ] pour lier l'expression
conditionnelle à la propriété disabled du bouton.
Nizar MAATOUG52

53. Questions
5) Dans quels cas ce paragraphe apparaîtra dans le DOM ?
<p *ngIf="myCondition">Bonjour !</p>
(Plusieurs réponses sont possibles)
 myCondition = false;
 myCondition = true;
 myCondition: string;
 myCondition: boolean;
 myCondition = "aucune condition";
Un élément qui comporte la directive *ngIf s'affiche si la condition
donnée est une expression conditionnelle qui retourne true .
Nizar MAATOUG53

54. Questions
6) Quelle directive vous permet d'afficher autant de
components <app-draw> qu'il y a de membres dans
l'array drawings ?
 <app-draw *ngIf="drawings">
 <app-draw *ngFor="let drawing of drawings">
 <app-draw *ngFor="for drawing in drawings">
 <app-draw *ngFor="drawings">
La directive *ngFor s'emploie comme un for loop classique :
on utilisera donc let … of … .
Nizar MAATOUG54

55. Interaction entre composants
Nizar MAATOUG55

56. Interaction entre composants
Nizar MAATOUG56
Composant parent
Composant fils
Data
@Input()
Data
@Output()

57. Exemple
Nizar MAATOUG57
Composant parent
Bonjour Monsieur
Composant fils
Bonjour Mohamed
Nom (Mohamed)
Bonjour Monsieur

58. Exemple (parent ->fils)
Nizar MAATOUG58

59. Exemple (parent ->fils)
Nizar MAATOUG59

60. Exemple (parent ->fils)
Nizar MAATOUG60

61. Exemple (fils -> parent)
Nizar MAATOUG61

62. Exemple (fils -> parent)
Nizar MAATOUG62

63. Résultat
Nizar MAATOUG63

64. Navigation Angular: Routage et Navigation

65. Routage et Navigation
 Une application Angular contient plusieurs composants,
 Chaque composant possède une vue (template)
 Il faut pouvoir naviguer entre les vues quand l’utilisateur réalise une
action.
Nizar MAATOUG65

66. Cas d’utilisation: Routage et Navigation
Nizar MAATOUG66
Localhost:4200
Routing navigation
Départements Employés
localhost:4200/departements
localhost:4200/employes

67. Démarche
1) Générer un projet Angular avec l’option routing
2) Générer les composants departementList et emplyesList
3) Configurer les routes
4) Ajouter les boutons et utiliser les directives pour naviguer.
Nizar MAATOUG67

68. Création du projet avec l’option routing
Nizar MAATOUG68

69. Ajout du routing à un projet existant
Nizar MAATOUG69

70. Importer le module Routing
Nizar MAATOUG70

71. Ajouter la balise <base href="/"> dans index.html
Nizar MAATOUG71

72. Ajouter la directive <router-outlet>
Nizar MAATOUG72

73. Générer les composants
ng generate component departementList
ng generate component emplyestList
Nizar MAATOUG73

74. Ajouter les routes
Nizar MAATOUG74

75. Bonne pratique
Nizar MAATOUG75

76. Bonne pratique
Nizar MAATOUG76

77. Bonne pratique
Nizar MAATOUG77

78. Navigation
Nizar MAATOUG78

79. Route de Redirection
 Très souvent, un utilisateur essaye de naviguer vers une route qui
n’est pas configurée.
 Cela génère une exception.
Nizar MAATOUG79
Solution: rediriger les routes inexistantes
vers un composants « not found »

80. Composant PageNotFoundComponent
Nizar MAATOUG80

81. Composant PageNotFoundComponent
Nizar MAATOUG81

82. Route par défaut
Nizar MAATOUG82

83. Routes avec paramètres
Nizar MAATOUG83
1) Technologies de L’informatique
2) Électrique
3) Mécanique
4) Gestion
DepartementList
Vous avez sélectionné le
département avec l’id= 1
DepartementDetails
id

84. Démarche
Générer un composant DepartementDetails
Configurer le routage avec paramètres vers DepartementDetails
Dans le composant DepartementList, programmer la navigation vers DepartementDetails
Dans le composant DepartementDetails, extraire l’id de la route active.
Nizar MAATOUG84

85. Générer DepartementDetails
ng generate component departementDetails
Nizar MAATOUG85

86. Configurer la route avec paramètre id
Nizar MAATOUG86

87. Programmer la navigation: Service Router
Nizar MAATOUG87
Injecter le service de
routage Router

88. Programmer la navigation: Service Router
Nizar MAATOUG88

89. Programmer la navigation: Service Router
Nizar MAATOUG89

90. DepartementDetails: Extraire le param id
Nizar MAATOUG90

91. Les Services

92. Problématique
Nizar MAATOUG92

93. Inconvénients
Les données sont codés en dur.
Les données sont dupliquées dans les deux composants
Forte possibilité d’incohérence de données
Ajout de responsabilité aux composants (gestion des données)
Nizar MAATOUG93

94. Solution
 Déporter les données dans un service.
Les services sont conçus pour offrir des données et/ou des fonctionnalités
partagées entre plusieurs composants ou modules:
Partage de données
Partage de fonctions (exemple calcul d’age)
Connexion réseau et mise à jour des données persistantes avec un
service.
Nizar MAATOUG94

95. Nouveau Service
ng generate service employs
Nizar MAATOUG95

96. Service employs
Nizar MAATOUG96

97. Mise à jour du composant Employs-list
Nizar MAATOUG97

98. Mise à jour du composant Employs-list-details
Nizar MAATOUG98

99. Nouvelle architecture
Nizar MAATOUG99
Employs-list-componentEmploys-list-Details-component
Employs-Service

100. Nouvelle architecture
Nizar MAATOUG100
Employs-list-component
Injector
: ES constructor(private employsService: EmployesService) {
}
: ES
Employs-list-details-component
constructor(private employsService: EmployesService) {
}
: ES

101. HTTP et les Observables

102. HTTP
Une application Angular est SPA (Single Page Application)
Une application Angular s’exécute coté client
Elle doit pouvoir se connecter à un serveur pour synchroniser les
données métier (demander liste de voitures, ajouter nouveau client,
modification, suppression d’une entité métier,….).
Nizar MAATOUG102

103. HTTP: Mécanisme
Nizar MAATOUG103
Navigateur web
EmloyeList
EmloyeDetails
EmloyeService Http
Get
Observable
Serveur
requête
réponse
DB

104. Les Observables: programmation Réactive
La programmation réactive se base sur le concept d'observateur.
Nizar MAATOUG104
Observable
Source de données,
flux de données
EmployeList EmployeDetails Composant…
notification
notification

105. Programmation réactive
Avantages:
• Asynchrone
• non bloquante
• Interface graphique plus fluide
Application:
• Data binding
• Gestion des événements
RxJS (Reactive Extentions for JavaScript) est la bibliothèque JavaScript
pour la programmation réactive
Nizar MAATOUG105

106. HTTP, Observables et RxJS: Démarche
1. Définir une requête HTTP GET de EmployeService
2. Recevoir un observable, convertir le flux de données en un tableau
d’employés (casting)
3. Abonner les deux composants EmployeList et EmployeDetails à cet
observable
Nizar MAATOUG106

107. Importer HttpClientModule
Nizar MAATOUG107

108. Déporter les données dans un fichier JSON
Nizar MAATOUG108

109. Définir le type IEmploye
Nizar MAATOUG109

110. Mettre à jour EmployeService
Nizar MAATOUG110

111. Mettre à jour EmployeService
Nizar MAATOUG111
Type de retour:
Observable d’Employé
Appel GET au service web en spécifiant
l’url. le type de retour est spécialisé à
Employee

112. Abonner les composants EmployeList et EmloyeDetails à l’observable
Nizar MAATOUG112

113. Abonner les composants EmployeList et EmloyeDetails à l’observable
Nizar MAATOUG113
Retourne un
observable d’employés
Abonnement au flux de
l’observable
Traitement du flux par
une fonction lambda

114. Formulaires Angular
Angular Forms

115. Angular Forms
Nizar MAATOUG115
Template Class Service Server
Collecter
les données
Bind Data Envoyer les
données
Traiter/sauvegarder
les données

116. Angular Forms
Un moyen d’interaction avec l’utilisateur
Manipuler les données de l’application:
Ajout, modification de données métiers
En Angular, il y a deux grandes méthodes pour créer des formulaires :
• la méthode template : vous créez votre formulaire dans le template, et
Angular l'analyse pour comprendre les différents inputs et pour en
mettre à disposition le contenu
• la méthode réactive : vous créez votre formulaire en TypeScript et
dans le template, puis vous en faites la liaison manuellement — cette
approche est plus complexe, mais elle permet beaucoup plus de
contrôle et une approche dynamique.
Nizar MAATOUG116

117. Template Driven Forms

118. Nouveau projet
ng new TDForms
Nizar MAATOUG118

119. Ajouter Bootstrap
Nizar MAATOUG119
Copier le lien du CDN
Bootstrap

120. Ajouter Bootstrap
Nizar MAATOUG120
Coller le lien dans index.html

121. Formulaire inscription
Nizar MAATOUG121

122. Formulaire inscription
Nizar MAATOUG122

123. AppModule: importer FormsModule
Nizar MAATOUG123

124. Directive ngForm
Angular associe à chaque formulaire une directive ngForm pour suivre
son état:
• Valeurs des contrôles du formulaire
• Les valeurs sont valides ou non.
Nizar MAATOUG124

125. Directive ngForm
Nizar MAATOUG125

126. Directive ngModel: identifier les contrôles à suivre
Nizar MAATOUG126

127. Attribut "name" pour chaque contrôle du formulaire
Nizar MAATOUG127

128. Résultat
Nizar MAATOUG128

129. Directive ngModelGroup
Permet de regrouper un ensemble de contrôle dans un seul objet
Exemple: une adresse est composée d’une ville, rue et numéro maison
Nizar MAATOUG129

130. Directive ngModelGroup
Nizar MAATOUG130

131. Data Binding: générer la classe du modèle
Générer la classe de modèle: Etudiant
Nizar MAATOUG131

132. Data Binding: instancier le modèle
Nizar MAATOUG132

133. Data Binding: ngModel
Nizar MAATOUG133

134. Résultat
Nizar MAATOUG134

135. Suivi de l’état et de la validité du formulaire
L'utilisation ngModel dans un formulaire offre plus qu'une simple liaison de
données bidirectionnelle
elle indique également si l'utilisateur a touché le contrôle, si la valeur a changé ou
si la valeur est devenue invalide
elle met à jour aussi le contrôle avec des classes CSS Angular spéciales qui
reflètent son état.
Nizar MAATOUG135

136. Suivi de l’état et de la validité du formulaire
Nizar MAATOUG136

137. Suivi de l’état et de la validité du formulaire
Nizar MAATOUG137

138. Appliquer les classes CSS
Deux solutions sont possibles:
1- Définir les classes .ng-valid,…:
2- Utiliser vos propres classes:
Nizar MAATOUG138

139. Appliquer les classes CSS
Nizar MAATOUG139
Obtenir la référence de ngModel
Appliquer la classe is-invalid de
Bootstrap si le contrôle est invalide
et il est déjà touché

140. Afficher un message d’erreur
Nizar MAATOUG140
Le message sera affiché si le
contrôle est invalide et il est déjà
touché

141. Validation du formulaire
Nizar MAATOUG141

142. Soumettre le formulaire: ngSubmit
Nizar MAATOUG142
Event-binding de l’attribut ngSubmit
de la directive ngForm

143. Soumettre le formulaire: ngSubmit
Nizar MAATOUG143

144. Formulaire réactif: Reactive Forms

145. Reactive Forms
• La grande partie du code réside dans la classe du composant
• Adapté aux scénarios complexes
• Des contrôles de formulaires dynamique
• Validation dynamique
• Test unitaire
Nizar MAATOUG145

146. Résultat
Nizar MAATOUG146

147. Définition de la classe modèle: User
Nizar MAATOUG147
Attribut optionnel de type Array

148. Importer ReactiveFormsModule
Nizar MAATOUG148

149. FormGroup et FormControl
Nizar MAATOUG149
Nom
Email
FormControl
FormControl
FormGroup
Un formulaire réactif est de type FormGroup et il regroupe plusieurs FormControl

150. FormBuilder
Nizar MAATOUG150
FormBuilder est une classe qui vous met à disposition des méthodes facilitant
la création d'objet FormGroup

151. Nizar MAATOUG151

152. Nizar MAATOUG152

153. Formulaire d’inscription
Nizar MAATOUG153

154. Formulaire d’inscription
Nizar MAATOUG154

155. La validation: Validators
Nizar MAATOUG155
La classe Validators permet de valider un formulaire réactif

156. La validation: Validators
Nizar MAATOUG156

157. FormControl dynamique
Objectif: ajouter dynamiquement des contrôles hobby
FormArray: permet de définir un tableau de FormControl
Nizar MAATOUG157
Définir un tableau de
hobbies, initialement vide

158. FormControl dynamique
Nizar MAATOUG158
Définir une fonction qui
rajoute dynamiquement
un hobby au formulaire

159. FormControl dynamique
Nizar MAATOUG159

160. FormControl dynamique
Nizar MAATOUG160

161. FormControl dynamique
Nizar MAATOUG161

162. Résultat
Nizar MAATOUG162