Angular

Introduction
AYMEN SELLAOUTI

1
Références

2
 Plan du Cours
1. Introduction
2. Les composants
3. Les directives
3 Bis. Les pipes
4. Service et injection de dépendances
5. Le routage
6. Form
7. HTTP

3
C’est quoi Angular?

4
 C’est quoi Angular?
Framework JS

SPA

Supporte plusieurs langages : ES5, EC6, TypeScript, Dart

Modulaire (organisé en composants et modules)

Rapide

Orienté Composant

5
 SPA
Application Web
C
traditionnelle H
T J
S
M
L S S
H
C
T J
M S
L
S S
H
C
T J
M S
L
S S
C
S
C
S JS S
H S
T H JS
M T
M
L SPA L
API 6
Angular : Arbre de composants

7
Architecture Angular

8
Principaux concepts et notions
Component Template DataBinding

Méta données

Injection de
Service Route
dépendance

9
Module
Angular est modulaire (Ca a changé depuis la version 14)

 Chaque application va définir Angular Modules or NgModules

 Chaque module Angular est une classe avec une annotation

@NgModule

 Chaque application a au moins un module, c’est le module principale.

10
 AppModule : le module principal
 le module principal est le module qui permet de lancer l’application de la bootstraper.
Le nom par convention est AppModule. import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
L’annotation (decorator) @NgModule identifie
import { AppComponent } from './[Link]';
AppModule comme un module Angular.
@NgModule({
L’annotation prend en paramètre un objet spécifiant à imports: [ BrowserModule ],
declarations: [ AppComponent ],
Angular comment compiler et lancer l’application.
bootstrap: [ AppComponent ]
imports : tableau contenant les modules utilisés.
})
declarations : tableau contenant les composants, directives export class AppModule { }
et pipes de l’application.
bootstrap : indique le composant exécuter au lancement de l’application.

Il peut y avoir aussi d’autres attributs dans cet objet

11
Les librairies d’Angular
 Ensemble de modules JS

Des librairies qui contiennent un ensemble de fonctionnalités.

Toutes les librairies d’Angular sont préfixées par @angular

Récupérable à travers un import JavaScript.

Exemple pour récupérer l’annotation component : import { Component } from '@angular/core';

12
Les composants
 Le composant est la partie principale d’Angular.

Un composant s’occupe d’une partie de la vue.

L’interaction entre le composant et la vue se fait à travers une API.

13
Template

Un Template est le complément du composant.

C’est la vue associée au composant.

Elle représente le code HTMl géré par le composant.

14
Les méta data

 Appelé aussi « decorator », ce sont des informations permettant de

décrire les classes.

 @Component permet d’identifier la classe comme étant un

composant angular.

15
Le Data Binding
 Le data binding est le mécanisme qui permet de mapper
des éléments du DOM avec des propriétés et des méthodes
du composant.

Le Data Binding permettra aussi de faire communiquer

les composants.

16
Les directives
 Lesdirectives Angular sont des classes avec la métadata @Directive. Elle
permettent de modifier le DOM et de rendre les Template dynamiques.

Apparaissent dans des éléments HTML comme les attributs.

Un composant est une directive à laquelle Angular a associé un Template.

Ils existe deux autres types de directives :

Directives structurelles

Directive d’attributs

17
Les services
 Classes permettant d’encapsuler des traitements métiers.

Doivent être légers.

Associées aux composants et autres classes par injection de dépendances.

18
Installation d’Angular
Deux méthodes pour installer un projet Angular.

 Cloner ou télécharger le QuickStart seed proposé par Angular.

Utiliser le Angular-cli afin d’installer un nouveau projet (conseillé).

Remarque : L’installation de NodeJs est obligatoire afin de pouvoir

utiliser son npm (Node Package Manager).

19
Installation d’Angular
QuickStart
Deux méthodes
 Télécharger directement le projet du dépôt Git
[Link]
 Ou bien le cloner à l’aide de la commande suivante :
git clone [Link] quickstart
 Se positionner sur le projet
Installer les dépendance à l’aide de npm : npm install
 lancer le projet à l’aide de npm : npm start

20
Installation d’Angular
Angular Cli
 Nous allons installer notre première application en utilisant angular Cli.
 Si vous avez Node c’est bon, sinon, installer NodeJs sur votre machine. Vous devez avoir
une version de node nécessaire pour la version Angular que vous installez.
 Une fois installé vous disposez de npm qui est le Node Package Manager. Afin de vérifier
si vous avez NodeJs installé, tapez npm –v.
 Installer maintenant le Cli en tapant la : npm install -g @angular/cli
 npm install -g @angular/cli@16.2.16 installe la version 16.2.16
 npm view @angular/cli affiche la liste des versions de la cli
 Installer un nouveau projet à l’aide de la commande ng new nomProjet
 npx @angular/cli@16.2.16 new projectName
 Afin d’avoir du help pour le cli tapez ng help
 Lancer le projet en utilisant la commande ng serve

21
Angular dépendances

[Link] 22
Installation d’Angular
Angular Cli
Positionnez vous maintenant dans le dossier
Tapez la commande suivante : ng new nomNewProject
 lancez le projet à l’aide de npm : ng serve
Naviguez vers l’adresse mentionnée.
 Vous pouvez configurer le Host ainsi que le port avec la commande
suivante : ng serve --host leHost --port lePort

Pour plus de détails sur le cli visitez [Link]

23
Quelques commandes du Cli
Commande Utilisation
Component ng g component my-new-component
Directive ng g directive my-new-directive
Pipe ng g pipe my-new-pipe
Service ng g service my-new-service
Class ng g class my-new-class
Interface ng g interface my-new-interface
Module ng g module my-module

24
Ajouter Bootstrap
On peut ajouter Bootstrap de plusieurs façons :
1- Via le CDN à ajouter dans le fichier [Link]
2- En le téléchargeant du site officiel
3- Via npm
◦ npm install bootstrap --save

25
Ajouter Bootstrap
Pour ajouter les dossiers téléchargés on peut le faire de deux façons :
1- En l’ajoutant dans [Link]
2- En ajoutant le chemin des dépendances dans les tableaux styles et scripts dans le fichier [Link]:
"styles": [
"../node_modules/bootstrap/dist/css/[Link]",
"[Link]",
],
"scripts": [
"../node_modules/jquery/dist/[Link]",
"../node_modules/[Link]/dist/umd/[Link]",
"../node_modules/bootstrap/dist/js/[Link]"
],

26
Ajouter Bootstrap
Ajouter dans le fichier src/[Link] un import de vos bibliothèques.

@import "~bootstrap/dist/css/[Link]";

Essayer la même chose avec font-awesome.

27
Angular
Les composants
AYMEN SELLAOUTI

28
 Objectifs
1. Comprendre la définition du composant

2. Assimiler et pratiquer la notion de Binding

3. Gérer les interactions entre composants.

29
Qu’est ce qu’un composant (Component)
 Un composant est une classe qui permet de gérer une vue. Il se charge uniquement de cette vue la.
Plus simplement, un composant est un fragment HTML géré par une classe JS (component en angular et controller en
angularJS)

 Une application Angular est un arbre de composants

 La racine de cet arbre est l’application lancée par le navigateur au lancement.

 Un composant est :
 Composable (normal c’est un composant)

 Réutilisable

 Hiérarchique (n’oublier pas c’est un arbre)

NB : Dans le reste du cours les mots composant et component représentent toujours un composant Angular.

30
Quelques exemples

31
Quelques exemples

32
Quelques exemples

33
Quelques exemples

34
 Premier Composant

import { Component } from '@angular/core'; Chargement de la classe Component

Le décorateur @Component permet d’ajouter un comportement
@Component({
à notre classe et de spécifier que c’est un Composant Angular.
selector: 'app-root',
selector permet de spécifier le tag (nom de la balise) associé ce
templateUrl: './[Link]',
composant
styleUrls: ['./[Link]']
templateUrl: spécifie l’url du template associé au composant
})
styleUrls: tableau des feuilles de styles associé à ce composant
export class AppComponent {
title = 'app works for tekup people !'; Export de la classe afin de pouvoir l’utiliser
}

35
Création d’un composant
Deux méthodes pour créer un composant
Manuelle
Avec le Cli

Manuelle
Créer la classe
Importer Component
Ajouter l’annotation et l’objet qui la décore
Ajouter le composant dans le AppModule([Link]) dans l’attribut declarations
Cli
Avec la commande ng generate component my-new-component ou son raccourci ng g c my-new-
component

36
Création d’un composant
 La commande generate possède plusieurs options

OPTION DESCRIPTION

--inlineStyle=true|false Inclus les styles css dans le composant

Aliases: -s
--inlineTemplate=true|false Inclus le template dans le composant
Aliases: -t
--prefix=prefix Le préfixe à appliquer pour la génération des
composants
Valeur par défaut: app
Aliases: -p

[Link] 37
Property Binding
Balises Attributs
Evènement
Attributs Méthodes
HTML TS

38
Property Binding
 Binding unidirectionnel.
 Permet aussi de récupérer dans le DOM des propriétés du composant.
 La propriété liée au composant est interprétée avant d’être ajoutée au
Template.
 Deux possibilités pour la syntaxe:
<div [[Link]]="color">
 [propriété]="varOuCte" Color
bind-propriété="varOuCte" </div>

39
Event Binding
 Binding unidirectionnel.
 Permet d’interagir du DOM vers le composant.
L’interaction se fait à travers les événements.
Deux possibilités pour la syntaxe :
 (evenement)=“fct()">
 on-evenement

a (click)="goToCv()" >Go to Cv</a>

40
Property Binding et Event Binding
import { Component } from '@angular/core';

@Component({
<hr>
selector: 'inter-interpolation', Nom : {{nom}}<br>
template : `[Link]` , Age : {{age}}<br>
styles: [] Adresse : {{adresse}}<br>
})
export class InterpolationComponent { //Property Binding
nom:string ='Aymen Sellaouti'; <input #name
age:number =35; [value]="getName()">
adresse:string ='Chez moi ou autre part :)';
getName(){
//Event Binding
return [Link]; <button
} (click)="modifier([Link])"
modifier(newName){ >Modifier le nom</button>
[Link]=newName;
} <hr>
}

Component Template

41
Exercice
 Créer un nouveau composant. Ajouter y un Div et un input de type texte.

 Fait en sorte que lorsqu’on écrive une couleur dans l’input, ca devienne la couleur du Div.

 Ajouter un bouton. Au click sur le bouton, il faudra que le Div reprenne sa couleur par
défaut.

 Ps : pour accéder au contenu d’un élément du Dom utiliser #nom dans la balise et accéder
ensuite à cette propriété via le nom.

 Pour accéder à une propriété de style d’un élément on peut binder la propriété
[[Link]été] exemple [[Link]]

42
Two way Binding
 Binding Bi-directionnel
 Permet d’interagir du Dom vers le composant et du composant vers le
DOM.
 Se fait à travers la directive ngModel ( on reviendra sur le concept de
directive plus en détail)
 Syntaxe :
[(ngModel)]=property

Afin de pouvoir utiliser ngModel vous devez importer le FormsModule dans

[Link]
43
Property Binding et Event Binding
import { Component} from
'@angular/core';
<hr>
@Component({ Change me if u can
selector: 'app-two-way', <input
templateUrl: './two-
[(ngModel)]="two">
[Link]',
styleUrls: ['./two- <br>
[Link]'] it's always me :d
}) {{two}}
export class TwoWayComponent {
two:any="myInitValue";
}
Component Template

44
Exercice
 Le but de cet exercice est de créer un aperçu de carte visite.

 Créer un composant

 Préparer une interface permettant de saisir d’un coté les données à insérer dans une
carte visite. De l’autre coté et instantanément les données de la carte seront mis à
jour.

 Préparer l’affichage de la carte visite. Vous pouvez utiliser ce thème gratuit :

[Link]

45
Exercice

46
Exercice

47
Résumé : Property Binding

48
 Récap Binding
@Component({
selector: 'app-color',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
<div [[Link]]="color"> providers: [PremierService]
Color })
</div> export class ColorComponent implements OnInit {
color = 'red';
<input [(ngModel)]="color" constructor() { }
type="text"
class="form-control" ngOnInit() {}
> processReq(message: any) {
le contenu de la propriété color est {{color}} alert(message);
<button (click)="loggerMesData()">log data</button> }
<br> loggerMesData() {
<a (click)="goToCv()" >Go to Cv</a> [Link]('test');
}
HTML goToCv() {
const link = ['cv'];
[Link](link);
}
TS
Interaction entre composants
Parent Enfant
[propertyBinding]

@Input
Component Component

(eventBinding)

Template @Output Template

50
Pourquoi ?
Le père voit le fils, le fils ne voit pas le père

Parent import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
Enfant <p>Je suis le composant père </p>
<forma-fils></forma-fils>
`,
styles:
})
export class AppComponent {
title = 'app works !';
}

51
Interaction du père vers le fils
Le père peut directement envoyer au fils des données par Property Binding

Parent import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
Enfant <p>Je suis le composant père </p>
<forma-fils></forma-fils>
`,
styles:
})
export class AppComponent {
title = 'app works !';
}

52
Interaction du père vers le fils
Problème : Le père voit le fils mais pas ces propriétés !!! Solution : les rendre visible avec Input

Parent import { Component } from '@angular/core';

@Component({
selector: 'app-root',
template: `
Enfant <p>Je suis le composant père </p>
<forma-fils></forma-fils>
`,
styles:
})
export class AppComponent {
title = 'app works !';
}

53
Interaction du père vers le fils
Problème : Le père voit le fils mais pas ces propriétés !!! Solution : les rendre visible avec Input

import { Component } from

Parent '@angular/core'; import {Component, Input}
from '@angular/core';
@Component({
selector: 'app-root', @Component({
template: ` selector: 'app-input',
Enfant <p>Je suis le composant père </p> templateUrl:
<forma-fils [external]="title"> './[Link]',
</forma-fils> styleUrls:
`, ['./[Link]']
styles: })
}) export class InputComponent
export class AppComponent { {
title = 'app works !'; @Input() external:string;
} }

54
Exercice
 Créer un composant fils

 Récupérer la couleur du père dans le composant fils

 Faite en sorte que le composant fils affiche la couleur du background de son père

55
Interaction du fils vers le père
L’enfant ne peut pas voir le parent. Appel de l’enfant vers le parent. Que faire ?

Parent
import {Component} from '@angular/core';
@Component({
selector: 'bind-output',
Enfant template: `Bonjour je suis le fils`,
styleUrls: ['./[Link]']
})
export class OutputComponent {
valeur:number=0;
}
}

56
Interaction du fils vers le père
Solution : Pour entrer c’est un input pour sortir c’est surement un output. Externaliser un
évènement en utilisant l’Event Binding. import {Component, EventEmitter,
Output} from
'@angular/core';
Parent @Component({
selector: 'bind-output',
template: `
<button (click)="incrementer()">+</button> `,
styleUrls: ['./[Link]']
Enfant })
export class OutputComponent {
valeur:number=0;
// On déclare un evenement
@Output() valueChange=new EventEmitter();
Au click sur l’event incrementer(){
valueChange je vais [Link]++;
emmètre une réponse [Link]
contenant ce que je veux [Link]);
}
envoyer à mon père
}}

57
 Interaction du père vers le fils
La variable $event est la variable utilisée pour faire transiter les informations.
import {Component, EventEmitter, Output} from
'@angular/core'; import { Component } from
@Component({ '@angular/core';
Parent selector: 'bind-output', @Component({
template: ` selector: 'app-root',
<button (click)="incrementer()">+</button> `, template: `
styleUrls: ['./[Link]'] <h2> {{result}}</h2>
Enfant }) <bind-output
export class OutputComponent { (valueChange)="showValue($event)
valeur:number=0; "></bind-output>
// On déclare un evenement `,
@Output() valueChange=new EventEmitter(); styles: [``],
Mon père va ensuite
incrementer(){ })
intercepter l’event et export class AppComponent {
[Link]++;
récupérer ce que je lui [Link]( title = 'app works !';
ai envoyé à travers la [Link] result:any='N/A';
variable $event et va ); showValue(value){
l’utiliser comme il veut } [Link]=value;
}} }
Enfant } Parent

58
Exercice

 Ajouter une variable myFavoriteColor dans le composant du fils.

 Ajouter un bouton dans le composant Fils

 Au click sur ce bouton, la couleur de background du Div du père doit prendre la

couleur favorite du fils.

59
Exercice
 Le but de cet exercice est de créer AppComponent
une mini plateforme de CvComponent
recrutement. ListeComponent
DetailComponent
ItemComponent
 La première étape est de créer la
structure suivante avec une vue
contenant deux parties :
 Liste des Cvs inscrits

 Détail du Cv qui apparaitra

au click

 Il vous est demandé juste d’afficher

un seul Cv et de lui afficher les détails
au click.
Il faudra suivra cette architecture.

60
Exercice
 Le but de cet exercice est de créer
une mini plateforme de
recrutement.

 La première étape est de créer la

structure suivante avec une vue
contenant deux parties :
 Liste des Cvs inscrits

 Détail du Cv qui apparaitra

au click

 Il vous est demandé juste d’afficher

un seul Cv et de lui afficher les détails
au click.
Il faudra suivra cette architecture.

61
Exercice
AppComponent
CvComponent
ListeComponent
DetailComponent
ItemComponent

62
Exercice
AppComponent
CvComponent
ListeComponent
DetailComponent
ItemComponent

Au click sur le Cv les détails sont affichés

63
Exercice
Un cv est caractérisé par :
id
name
firstname
Age
Cin
Job
path

Au click sur le Cv les détails sont affichés

64
Angular
Les directives
AYMEN SELLAOUTI

65
 Objectifs
1. Comprendre la définition et l’intérêt des directives.

2. Voir quelques directives d’attributs offertes par angular et savoir les utiliser

3. Créer votre propre directive d’attributs

4. Voir quelques directives structurelles offertes par angular et savoir les utiliser

66
Qu’est ce qu’une directive
 Une directive est une classe permettant import {Directive, HostBinding, HostListener}
from '@angular/core';
d’attacher un comportement aux
éléments du DOM. Elle est décorée @Directive({
selector: '[appHighlight]'
avec l’annotation @Directive. })
export class HighlightDirective {
@HostBinding('[Link]') bg = '';
 Apparait dans un élément comme un tag constructor() { }
@HostListener('mouseenter') mouseenter() {
(comme le font les attributs). [Link] = 'yellow';
}
@HostListener('mouseleave') mouseleave() {
 La command pour créer une directive est [Link] = 'red';
}
 ng g d nomDirective }

<div appHighlight>
Bonjour je teste une directive
</div>
67
Qu’est ce qu’une directive
 La documentation officielle d’Angular identifie trois types de directives :

 Les composants qui sont des directives avec des templates.

 Les directives structurelles qui changent l’apparence du DOM en ajoutant et

supprimant des éléments.

 Les directives d’attributs (attribute directives) qui permettent de changer l’apparence

ou le comportement d’un élément.

68
Les directives d’attribut (ngStyle)
 Cette directive permet de modifier l’apparence de l’élément cible.

 Elle est placé entre [ ] [ngStyle]

 Elle prend en paramètre un attribut représentant un objet décrivant le style à

appliquer.

 Elle utilise le property Binding.

69
 Les directives d’attribut (ngStyle)
import { Component} from import { Component} from
'@angular/core'; '@angular/core';
@Component({
@Component({ selector: 'direct-direct',
selector: 'direct-direct', template: `
template: ` <p [ngStyle]="{'color':myColor,'font-
<p [ngStyle]="{'color':'red', family':myfont,'background-color' :
'font-family':'garamond', myBackground}">
'background-color' : 'yellow'}"> <ng-content></ng-content>
<ng-content></ng-content> </p>`,
</p> styleUrls: ['./[Link]']
`, })
styleUrls: ['./[Link]'] export class DirectComponent{
}) private myfont:string="garamond";
export class DirectComponent{ private myColor:string="red";
} private myBackground:string="blue"
}
70
Les directives d’attribut (ngStyle)

71
 Les directives d’attribut (ngStyle)
import {Component, Input} from
'@angular/core';
@Component({ @Component({
selector: 'app-root', selector: 'direct-direct',
template: ` template: `
<direct-direct [myColor]="gray">J'ai <p [ngStyle]="{'color':myColor,
été stylé par ngStyle</direct-direct> 'font-familly':myfont,
`, 'background-color' : myBackground}">
styles: [` <ng-content></ng-content>
h1 { font-weight: normal; } </p>
p{color:yellow;background-color: red} `,
`], styleUrls: ['./[Link]']
}) })
export class AppComponent { export class DirectComponent{
private myfont:string="garamond";
} @Input() private myColor:string="red";
private myBackground:string="blue"
}

72
Les directives d’attribut (ngStyle)

73
Exercice
 Nous voulons simuler un Mini Word pour gérer un paragraphe en utilisant ngStyle.
 Préparer un input de type color, un input de type number, et un select box.
 Faite en sorte que lorsqu’on écrive une couleur dans le texte input, ca devienne la couleur du
paragraphe. Et que lorsque on change le nombre dans le number input la taille de l’écriture.
 Finalement ajouter une liste et mettez y un ensemble de police. Lorsque le user sélectionne une
police dans la liste, la police dans le paragraphe change.

74
Les directives d’attribut (ngClass)
 Cette directive permet de modifier l’attribut class.

 Elle cohabite avec l’attribut class.

 Elle prend en paramètre

 Une chaine (string)
 Un tableau (dans ce cas il faut ajouter les [ ] donc [ngClass]
 Un objet (dans ce cas il faut ajouter les [ ] donc [ngClass]

 Elle utilise le property Binding.

75
 Les directives d’attribut (ngClass)
import {Component, Input} from '@angular/core'; // Tableau
@Component({ <div [ngClass]="['colorer', 'arrierplan'] "
selector: 'direct-direct',
class="encadrer">
template: `
// Objet
<div ngClass="colorer arrierplan" class="encadrer">
test ngClass <div [ngClass]="{ colorer: isColoree,
</div> arrierplan: isArrierPlan} "
`, class="encadrer">
styles: [`
.encadrer{ border: inset 3px black; }
.colorer{ color: blueviolet; }
.arrierplan{background-color: salmon; }
`]
})
export class DirectComponent{
private myfont:string="garamond";
@Input() private myColor:string="red";
private myBackground:string="blue«
private isColoree:boolean=true;
private isArrierPlan:boolean=true
}
76
Exercice

 Préparer 3 classes présentant trois thèmes différents (couleur font-size et font-police)

 Au choix du thème votre cible changera automatiquement

77
Customiser un attribut directive
 Afin de créer sa propre « attribut directive » il faut utiliser un HostBinding sur
la propriété que vous voulez binder.
 Exemple : @HostBinding('[Link]')
bg:string="red";

 Si on veut associer un événement à notre directive on utilise un HostListner

qu’on associe à un événement déclenchant une méthode.
 Exemple : @HostListener('mouseenter') mouseover(){
[Link] =[Link];
}
Afin d’utiliser le HostBinding et le HostListner il faut les importer du core d’angular

78
Exercice
Un truc plus sympas on va créer un simulateur d’écriture arc en ciel.
 Créer une directive
 Créer un hostbinding sur la couleur et la couleur de la bordure.
 Créer un tableau de couleur dans votre directive.
 Faite en sorte qu’en appliquant votre directive à un input, à chaque écriture d’une lettre
(event keyup) la couleur change en prenant aléatoirement l’une des couleurs de votre
tableau. Pensez à utiliser [Link]() qui vous retourne une valeur entre 0 et 1.

79
Exercice

80
Customiser une attribut directive
 Nous pouvons aussi utiliser le @Input afin de rendre notre directive paramétrable

 Tous les paramètres de la directive peuvent être mises en @Input puis récupérer à
partir de la cible.

 Exemple

 Dans la directive @Input() private myColor:string="red";

 <direct-direct [myColor]="gray">

81
Les directives structurelles
 Une directive structurelle permet de modifier le DOM.

 Elles sont appliquées sur l’élément HOST.

 Elles sont généralement précédées par le préfix *.

 Les directives les plus connues sont :

 *ngIf

 *ngFor

82
Les directives structurelles *ngIf
 Prend un booléen en paramètre.

 Si le booléen est true alors l’élément host est visible

 Si le booléen est false alors l’élément host est caché

Exemple
<p *ngIf="true">
Je suis visible :D</p>
<p *ngIf="false">
Le *ngIf c'est faché contre
moi et m'a caché :(
</p>

83
Les directives structurelles *ngFor
 Permet de répéter un élément plusieurs fois dans le DOM.

 Prend en paramètre les entités à reproduire. <ul>

<li *ngFor="let episode of episodes">
{{[Link]}}
 Fournit certaines valeurs : </li>
</ul>
 index : position de l’élément courant
 first : vrai si premier élément <ul>
<li *ngFor="let episode of episodes; let i = index;
 last vrai si dernier élément let isOdd = odd; let isFirst=first"
 even : vrai si l’indice est paire [ngClass]="{ odd: isOdd , bgfonce: isFirst}"
 odd : vrai si l’indice est impaire >
Episode {{i+1}}{{[Link]}}
</li>
</ul>

84
Exercice (Notre Projet)
 Reprenons notre plateforme
d’embauche.

 Utilisez les directives vues dans ce

cours pour afficher une liste de Cv et
pour améliorer l’affichage.

 Les détails ne sont affichés

qu’au click sur un des cvs.

85
Angular
Les pipes
AYMEN SELLAOUTI

86
 Plan du Cours
1. Introduction
2. Les composants
3. Les directives
3 Bis. Les pipes
4. Service et injection de dépendances
5. Le routage
6. Form
7. HTTP

87
 Objectifs
1. Définir les pipes et l’intérêt de les utiliser

2. Vue globale des pipes prédéfinies

3. Créer un pipe personnalisé

88
Qu’est ce qu’un pipe
 Un pipe est une fonctionnalité qui permet de formater et de transformer vos données avant
de les afficher dans vos Templates.

 Exemple l’affichage d’une date selon un certain format.

 Il existe des pipes offerts par Angular et prêt à l’emploi.

 Vous pouvez créer vos propres pipes.

<input type="text" [(ngModel)]="pipeVar" class="form-control">

<br>Avec le pipe uppercase : {{pipeVar|uppercase}}<br>
Sans aucun pipe : {{pipeVar}}
89
Syntaxe
 Afin d’utiliser un pipe vous utilisez la syntaxe suivante :

 {{ variable | nomDuPipe }}

 Exemple : {{ maDate | date }}

 Afin d’utiliser plusieurs pipes combinés vous utilisez la syntaxe suivante :

 {{ variable | nomDuPipe1 | nomDuPipe2 | nomDuPipe3 }}

 Exemple : {{ maDate | date | uppercase }}

90
Les pipes disponibles par défaut (Built-in
pipes)
 La documentation d’angular vous offre la liste des pipes prêt à l’emploi.

[Link]
 uppercase
 lowercase
 titlecase
 currency
 date
 json
 percent
 …

91
Paramétrer un pipe
 Afin de paramétrer les pipes ajouter ‘:’ après le pipe suivi de votre paramètre.

 {{ maDate | date:"MM/dd/yy" }}

 Si vous avez plusieurs paramètres c’est une suite de ‘:’

 {{ nom | sli[Link] }}

92
Pipe personnalisé
 Un pipe personnalisé est une classe décoré avec le décorateur @Pipe.

 Elle implémente l’interface PipeTransform

 Elle doit implémenter la méthode transform qui prend en paramètre la valeur

cible ainsi qu’un ensemble d’options.

 La méthode transform doit retourner la valeur transformée

 Le pipe doit être déclaré au niveau de votre module de la même manière qu’une
directive ou un composant.
 Pout créer un pipe avec le cli : ng g p nomPipe
93
 Exemple de pipe
import { Pipe, PipeTransform } from <li>
'@angular/core'; <ol *ngFor="let team of
teams">
@Pipe({ {{team | team}}
name: 'team' </ol>
}) </li>
export class TeamPipe implements PipeTransform {

transform(value: any, args?: any): any { ngOnInit() {

switch (value) { [Link] = ['milan', 'barca', 'roma'];
case 'barca' : return ' blaugrana'; }
case 'roma' : return ' giallorossa';
case 'milan' : return ' rossoneri';
}
}

94
Exercice
Créer un pipe appelé defaultImage qui retourne le nom d’une image par défaut que vous stockerez
dans vos assets au cas ou la valeur fournie au pipe est une chaine vide ou ne contient que des
espaces.

95
Angular
Service et injection de
dépendances
AYMEN SELLAOUTI

96
 Objectifs
1. Définir un service

2. Définir ce qu’est l’injection de dépendance

3. Injecter un service

4. Définir la portée d’un service

5. Réordonner son code en utilisant les services

97
Qu’est ce qu’un service ?
 Un service est une classe qui permet d’exécuter un traitement.

 Il permet d’encapsuler des fonctionnalités redondantes permettant

ainsi d’éviter la redondance de code.

Component 1 Component 2 Component 3

f(){}; f(){}; f(){};
g(){}; g(){}; g(){};
k(){}; l(){}; m(){};

Redondance de code Maintenabilité difficile

98
Qu’est ce qu’un service ?
f(){};
g(){};

Component 1 Component 2 Component 3

k(){}; l(){}; m(){};

99
Qu’est ce qu’un service ?
Un service peut :

Interagir avec les données (fournit, supprime et modifie)

Interaction entre classes et composants

Tout traitement métier (calcul, tri, extraction …)

100
Création d’un service

 Via CLI

 ng generate service nomDuService

 ng g s nomDuService

101
Premier Service

import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class FirstService {

constructor() { }

102
Injection de dépendance (DI)
 L’injection de dépendance est un patron de conception.

Classe A1{
Classe A2{ Classe A3{
ClasseB b;
ClasseB b; ClasseC c;
ClasseC c;
… …
…
} }
}

Que se passera t-il si on change quelque chose dans le constructeur de B ou C ?

Qui va modifier l’instanciation de ces classes dans les différentes classes qui en dépendent?

103
Injection de dépendance (DI)
 Déléguer cette tache à une entité tierce.

Classe A1{ Classe A2{ Classe A3{

Constructor(B b, C c) Constructor(B b) Constructor(C c)
… … …
} } }

INJECTOR

104
Injection de dépendance (DI)

105
Injection de dépendance (DI)

 Comment les injecter ?

 Comment spécifier à l’injecteur quel service et ou est-il visible ?

106
Injection de dépendance (DI)
 L’injection de dépendance utilise les étapes suivantes :

 Déclarer le service via l’annotation @Injectable, dans le provider du module

ou du composant.

 Passer le service comme paramètre du constructeur de l’entité qui en a

besoin.

107
Injection de dépendance (DI)
import { BrowserModule, } from '@angular/platform-browser';
import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from '@angular/core';
import { FormsModule } from '@angular/forms';
import { HttpModule } from '@angular/http';
import { AppComponent } from './[Link]'; import { Injectable } from
import {CvService} from "./[Link]"; '@angular/core';
@NgModule({
declarations: [
AppComponent, @Injectable()
], export class CvService {
imports: [
BrowserModule,
FormsModule, constructor() { }
HttpModule
], }
providers: [CvService],
bootstrap: [AppComponent]
})
export class AppModule { }

108
Injection de dépendance (DI)
import { Component, OnInit } from '@angular/core';
import {Cv} from './cv';
import {CvService} from "../[Link]";
@Component({
selector: 'app-cv',
templateUrl: './[Link]',
styleUrls: ['./[Link]'],
providers:[CvService] // on peut aussi l’importer ici
})
export class CvComponent implements OnInit {
selectedCv : Cv;
constructor(private monPremierService:CvService) { }
ngOnInit() {
}
}

109
Chargement automatique du service
 A partir de Angular 6 vous pouvez ne plus utiliser le provider du module afin de charger votre
service mais le faire directement au niveau du service à travers l’annotation @Injectable et sa
propriété providedIn. Vous pouvez charger le service dans toute l’application via le mot clé root.
 Si vous voulez charger le service dans un module particulier vous l’importer et vous le mettez à la
place de ‘root’.
import { Injectable } from '@angular/core';

@Injectable({
providedIn: 'root'
})
export class CvService {
constructor() { }
}
110
Avantage de l’utilisation du providedIn
 Lazy loading : Ne charger le code des services qu’à la première injection

 Permettre le Tree-Shaking des services non utilisés : Si le service n’est jamais utilisé, son code ne
sera entièrement retiré du build final.

111
@Injectable
 C’est un décorateur permettant de rendre une classe injectable

 Une classe est dite injectable si on peut y injecter des dépendances

 @Component, @Pipe, et @Directive sont des sous classes de @Injectable(), ceci

explique le fait qu’on peut y injecter directement des dépendances.

 Si vous n’aller injecter aucun service dans votre service, cette annotation n’est plus
nécessaire.

 Remarque : Angular conseille de toujours mettre cette annotation.

112
Exercice
 Créons un service de Todo, le Model et le composant qui va avec. Un Todo est
caractérisé par un nom et un contenu.
 Ce service permettra de faire les fonctionnalités suivantes :

 Logger les todos

 Ajouter un Todo

 Récupérer la liste des Todos

 Supprimer un Todo
113
Exemple
import { Injectable } from '@angular/core';
@Injectable()
export class LoggerService {
constructor() { }
Logs: string[]=[];
loger(message:string){
[Link](message); [Link](message);
}
info(message:string){
[Link](message); [Link](message);
}
debuger(message:string){
[Link](message); [Link](message);
}
avertir(message:string){
[Link](message); [Link](message);
}
erreur(message:string){
[Link](message); [Link](message);
}
}
114
DI Hiérarchique
 Le système d’injection de dépendance d’Angular est hiérarchique.

 Un arbre d’injecteur est crée. Cet arbre est // à l’arbre de composant.

 L’algorithme suivant permet la détection de l’injecteur adéquat :

Il l’injecte

ok
Injection d’un Vérification de
service dans un l’injecteur à ce
Tant que il ne le
composant niveau
Vérifie dans le trouve pas et qu’on est
père pas arrivé dans la
racine

115
Exercice
 Ajouter les services suivants afin d’améliorer la gestion de notre plateforme
d’embauche.

 Un premier service CvService qui gérera les Cvs. Pour le moment c’est lui qui
contiendra la liste des cvs que nous avons.
 Ajouter aussi un composant pour afficher la liste des cvs embauchées ainsi qu’un
service EmbaucheService qui gérer les embauches.
 Au click sur le bouton embaucher d’un Cv, le cv est ajoutés à la liste des
personnes embauchées et une liste des embauchées apparait.

116
Exercice

117
Exercice

118
Angular
Routing
AYMEN SELLAOUTI

119
Objectifs
1. Définir le routeur d’Angular
2. Définir une route
3. Déclencher une route à partir d’un composant
4. Ajouter des paramètres à une route
5. Récupérer les paramètres d’une route à partir du composant.
6. Préfixer un ensemble de routes
7. Gérer les routes inexistantes

120
Qu’est ce que le routing
Tout système de routing permet d’associer une route à un traitement

Angular SPA. Pourquoi parle-on de route ??

Séparer différentes fonctionnalités du système
Maintenir l’état de l’application
Ajouter des règles de protection
Que risque t-on d’avoir si on n’utilise pas un système de routing ?
On ne peut plus rafraichir notre page
Plus de Favoris 
Comment partager vos pages ????
121
Création d’un système de Routing
1. Indiquer au routeur comment composer les urls en ajoutant dans le
head la balise suivante : <base href="/">

2. Créer un fichier ‘[Link]’ Importer le service de routing

d’Angular
import { RouterModule, Routes } from '@angular/router';
Le RouterModule va permettre de configurer les routes dans votre
projet
Le Routes va permettre de créer les routes
122
 Création d’un système de Routing
<!doctype html>
<html>
<head> 1 2
<meta charset="utf-8">
<title>Cv</title>
<base href="/">
import {Routes, RouterModule} from
<meta name="viewport" content="width=device-
width, initial-scale=1">
"@angular/router";
<link rel="icon" type="image/x-icon" import {CvComponent} from "./cv/[Link]";
href="[Link]"> import {HeaderComponent} from
<link rel="stylesheet" "./[Link]";
href="[Link]
/3.3.7/css/[Link]"
integrity="sha384-
BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+P
mSTsz/K68vbdEjh4u"
crossorigin="anonymous"></head>
<body>
<app-root>Loading...</app-root>
</body>
</html>
[Link]

123
Création d’un système de Routing
3. Créer la constante qui est un tableau d’objet de type Routes représentant
chacun la route à décrire.

4. Intégrer les routes à notre application dans le app module à travers le

RouterModule et sa méthode forRoot

124
Création d’un système de Routing
import { BrowserModule, } from
'@angular/platform-browser';
2 import {CUSTOM_ELEMENTS_SCHEMA, NgModule} from
'@angular/core';
import {Route, RouterModule} from import { FormsModule } from '@angular/forms';
"@angular/router"; import { HttpModule } from '@angular/http';
import {CvComponent} from "./cv/[Link]"; import { AppComponent } from './[Link]';
import {routing} from "./[Link]";
import {HeaderComponent} from @NgModule({
"./[Link]"; declarations: [
AppComponent,
const APP_ROUTES : Routes = [ 3 ],
{path: '',component:CvComponent}, imports: [
{path:'onlyHeader',component:HeaderComponent} BrowserModule,
FormsModule,
]; HttpModule,

export const ROUTING =

ROUTING 4
],
[Link](APP_ROUTES); providers: [CvService,EmbaucheService],
schemas: [CUSTOM_ELEMENTS_SCHEMA],
4 bootstrap: [AppComponent]
})
export class AppModule { }
[Link]

125
Préparer l’emplacement d’affichage des
vues correspondantes aux routes
 Pour indiquer à Angular ou est ce qu’il doit charger les vues spécifiques
aux routes nous utilisons le router outlet.

 Router outlet est une directive qui permet de spécifier l’endroit ou la

vue va être chargée.

 Sa syntaxe est <router-outlet></router-outlet>

126
Préparer l’emplacement d’affichage des
vues correspondantes aux routes

<as-header></as-header>

<div class="container">

<router-outlet></router-outlet>

</div>

127
Syntaxe minimaliste d’une route
 Une route est un objet.

 Les deux propriétés essentielles sont path et component.

 component permet de spécifier le composant à exécuter.

{path: '',component:CvComponent},
{path:'onlyHeader',component:HeaderComponent}

128
Exercice
 Configurer votre routing

 Créer deux composants

 Créer deux routes qui pointent sur ces deux composants

 Vérifier le fonctionnement de votre routing

129
Déclencher une route routerLink
L’idée intuitive pour déclencher une route est d’utiliser la balise a et
son attribut href. Est-ce que ca risque de poser un problème ?
L’utilisation de <a href > va déclencher le chargement de la page ce
qui est inconcevable pour une SPA.
La solution proposée par le router d’Angular est l’utilisation de la directive
routerLink qui comme son nom l’indique liera la directive à la route que
nous souhaitons déclencher sans recharger la page.
Exemple :
<li ><a [routerLink]="[‘todo’]" routerLinkActive="active">Gérer les
cvs</a></li>

130
Déclencher une route routerLink
routerLinkActive="active" va associer la classe active à
l’uri cible ainsi qu’à tous ces ses ancêtres.
Par exemple si on a l’uri ‘cv/liste’ la classe active sera ajouté à cet uri
ainsi qu’à l’uri ‘cv’ et ‘’.
Pour identifier uniquement l’uri cible, ajouter la directive suivante :

[routerLinkActiveOptions]="{exact: true}”

131
Exercice
 Faites en sorte d’avoir un composant Header dans votre application qui
permet d’afficher l’ensemble de vos liens.
 En cliquant sur un lien, le composant qui lui est associé doit être affiché.

132
Déclencher une route à partir du
composant
 Afin de déclencher une route à travers le composant on utilise le service
Router et sa méthode navigate.

 Cette méthode prend le même paramètre que le routerLink, à savoir un

tableau contenant la description de la route.

 Afin d’utiliser le Router, il faut l’importer de l’@angular/router et

l’injecter dans votre composant.

133
Déclencher une route à partir du
composant
import { Component} from '@angular/core';
import {Router} from "@angular/router";
@Component({
selector: 'app-home',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class HomeComponent{
constructor(private router:Router) { }
onNaviger(){
[Link](['/about/10']);
}

134
Les paramètres d’une route
 Afin de spécifier à notre router qu’un segment d’une route est un
paramètre, il suffit d’y ajouter ‘:’ devant le nom de ce segment.

 Exemple
 /cv/:id permet de dire que la root contient au début cv ensuite un
paramètre de root appelé id.

135
Récupérer les paramètres d’une route
 Afin de récupérer les paramètres d’une root au niveau d’un
composant on doit procéder comme suit :
1. Importer ActivatedRoute qui nous permettra de récupérer les
paramètres de la root.
2. Injecter ActivatedRoute au niveau du composant.
3. Utilisez l’objet snapshot

136
Récupérer les paramètres d’une route
ActivatedRoute / snapshot
 La propriété snapshot de l'objet ActivatedRoute contient un
instantané de l'état de la route actuelle.
 Elle contient des informations telles que l'URL actuelle, les
paramètres de route actuels,…
 Elle est généralement utilisée pour accéder aux informations de
route dans un composant lors de son initialisation.
 Il est important de noter que l'instantané de la route ne change
pas lorsque la route change. Il représente un état figé de la route
lors de son instanciation.

137
Récupérer les paramètres d’une route
ActivatedRoute / snapshot
 Voici quelques propriétés courantes de l'API snapshot :
 url: Retourne l'URL de la route actuelle sous forme de tableau de
segments d'URL.
 params: Retourne un objet qui contient les paramètres de route actuels.
 queryParams: Retourne un objet qui contient les paramètres de requête
actuels.
 fragment: Retourne la partie de l'URL après le symbole "#".
 data: Retourne les données de route associées à la route actuelle.
 component: Retourne le composant de route actuel.
 routeConfig: Retourne la configuration de la route actuelle.

138
Récupérer les paramètres d’une route
ActivatedRoute / snapshot

139
Récupérer les paramètres d’une route
ActivatedRoute / snapshot
 Donc pour accéder à votre propriété, passez par l’objet snapshot
 Avec snapshot, vous avez deux méthodes pour récupérer les
paramètres:
 Via la propriété params qui retourne un tableau d’objet des paramètres
 Via la propriété paramMap
 Appeler sa méthode get
 Passez lui le nom de la propriété souhaitée.
[Link]['id‘]
[Link]('id')
140
Passer le paramètre à travers le tableau de
routerLink
 Une autre méthode permet de passer le paramètre de la route est en
l’ajoutant comme un autre attribut du tableau associé au routerLink
import { Component, OnInit } from '@angular/core';
import {Router} from "@angular/router";
@Component({
selector: 'app-home',
templateUrl: './[Link]',
styleUrls: ['./[Link]']
})
export class HomeComponent{
constructor(private router:Router) { }
id:number=10;
onNaviger(){[Link](['/about',[Link]]);}
}
141
 Les queryParameters
 Les queryParameters sont les paramètres envoyé à travers une
requête GET.
 Identifié avec le ?.
 Afin d’insérer un queryParameters on dispose de deux méthodes
 On ajoute dans la méthode navigate du Router un second
paramètre de type objet.
 L’une des propriétés de cet objet est aussi un objet dont la clé est
queryParams dont le contenu est aussi un objet content les
identifiants des queryParams et leurs valeurs.
[Link](['/about',[Link]],{queryParams:{'qpVar':'je suis un qp'}});

142
Les queryParameters
 La deuxième méthode est en l’intégrant à notre routerLink de la
manière suivante :

<a [routerLink]="['/about/10']" [queryParams]="{qpVar:'je suis

un qp bindé avec le routerLink'}">About</a>

143
Récupérer Les queryParameters
 Les queryParameters sont récupérable de la même façon que les
paramètres. Soit d’une façon statique avec snapshot via la
propriété queryParams ou sa propriété queryParamMap et sa
méthode get.
 Soit dynamiquement via l’observable queryParams

[Link][‘page‘]

[Link](‘page')

144
La route joker
 Il existe une route joker qui matche n’importe quelle autre route.
C’est la route ’**’.

145
Exemple

const APP_ROUTE: Routes = [

{path: ‘cv', component: CvComponent},
{path: 'lampe', component: ColorComponent},
{path: 'login', component: LoginComponent},
{path: 'error', component: ErrorPageComponent},
{path: '**', component: ErrorPageComponent }
];

146
Exercice
 Ajouter les fonctionnalités suivante à votre cvTech:
 Une page détail qui va afficher les détails d’un cv.
 Un bouton dans chaque cv qui au click vous envoi vers la page détails.
 Dans la page détail, un bouton delete qui au click supprime ce cv et vous renvoi à la liste des cvs.

147
Angular
Form
AYMEN SELLAOUTI

148
Approche de gestion de FORM
1. Approche basée Template

2. Approche réactive

149
Objetctifs
1. Créer un formulaire
2. Ajouter des validateurs
3. Appréhender les classes Css générées par le formulaire
4. Manipuler l‘objet ngForm
5. Manipuler les controles du formulaire

150
Approche basée Template/ Template
Driven Approach
1 Importer le module FormsModule dans [Link]

2 Angular détecte automatiquement un objet form à l’aide de la balise

FORM. Cependant, il ne détecte aucun des éléments (inputs). <input
type="text"
3 Spécifier à Angular quel sont les éléments (contrôles) à gérer. id="username"
- Pour chaque élément ajouter la directive angular ngModel. class="form-
control"
- Identifier l’élément avec un nom permettant de le détecter
ngModel
et de l’identifier dans le composant. name="username"
>
4
Associer l’objet représentant le formulaire à une variable et la passer à votre
fonction en utilisant le référencement interne # et la directive ngForm
151
Approche basée Template/ Template
Driven Approach
export class
TmeplateDrivenComponent{
onSubmit(formulaire:
<form
NgForm){
(ngSubmit)="onSubmit(formula
ire)" #formulaire="ngForm">
[Link](formulaire);
}
}
Template [Link]

152
Approche basée Template
Validation
Afin de valider les propriétés des différents contrôles, Angular utilise des
attributs et des directives

- required
- email

La propriété valid de ngForm permet de vérifier si le formulaire est valid

ou non en se basant sur les validateurs qu’ils contient.

[Link] 153
Approche basée Template
NgForm
En détectant le formulaire, Angular décore les différents éléments du
formulaire avec des classes qui informe sur leur état :
 dirty : informe sur le fait que l’une des propriétés du formulaire a été
modifié ou non

 Valid / invalid : informe si le formulaire est valide ou non

 Untouched / touched : informe si le formulaire est touché ou non

 pristine : le formulaire n’a pas été touché, c’est l’opposé du dirty

154
Exercice
 Créer un formulaire d’authentification contenant les champs suivants :
 Email
 Password
 Envoyer
 Si un champ est invalide alors il devra avoir une bordure rouge.
 Les deux champs sont obligatoires
 Le password doit avoir au moins 4 caractères.
 Un champ vide et non encore modifié ne peut avoir de bordure rouge que s’il a
été touché.
 Le bouton « envoyer » ne doit être cliquable que si le formulaire est valide.
 Utiliser le binding sur la propriété disabled.

155
Exercice

156
Approche basée Template
Accéder aux propriétés d’un champ (contrôle)
du formulaire
 Pour accéder à l’objet form et ces propriétés nous avons utilisé
#notreForm=«ngForm »

 Pour les champs du formulaire c’est la même chose mais au lieu du

ngForm c’est un ngMdoel
#notreChamp=« ngModel »

157
Exercice
 Ajouter un petit message d’erreur qui devra s’afficher sous le
champs de l’email s’il est invalide. Ce champ ne devra apparaitre que
si l’utilisateur accède ou modifie le champ email.
 Ajouter un champ d’erreur pour signaler l’erreur à l’utilisateur.

158
Approche basée Template
Associer des valeurs par défaut aux champs
 Pour associer des valeurs par défaut aux champs d’un formulaire
associé à Angular il faut le faire à partir du composant.

 Afin de gérer les valeur du formulaire à partir du composant il faut

du binding.

 Au lieu d’avoir juste la primitive ngModel associée au contrôle d’un

élément on ajoute le property binding avec [ngModel]

159
 Exercice

 Ajouter la valeur par défaut « myUserName » au champ username.

160
Exercice
 Ajouter dans votre cvTech un composant contenant un formulaire. Ce formulaire
devra vous permettre d’ajouter un utilisateur.
 Après l’ajout fowarder le user vers la liste des cvs.

161
Angular
HTTP et Déploiement
AYMEN SELLAOUTI

162
Objectifs
1. Comprendre le design pattern Observable et son implémentation
avec RxJs
2. Appréhender le Module HTTPClientModule d’Angular
3. Utiliser les différents services du module HTTPClientModule
4. Comprendre le principe d’authentification via les tokens
5. Utiliser les protecteurs de routes (les guards)
6. Utiliser les Interceptors afin d’intercepter les requêtes Http
7. Déployer votre application en production

163
HTTP
 Angular est un Framework FrontEnd

 Pas d’accès à la BD

 Pas de possibilité de persistance des données

 Pas de puissance permettant des traitements lourds.

Le Module HTTPClient

164
Programmation Asynchrone

Programmation non bloquante.

165
Les promesses
 Ce sont des objets qui représentent une complétion ou l’échec d’une
opération asynchrone.
([Link]
les_promesses)
 Le fonctionnement des promesses est le suivant :
 On crée une promesse.
 La promesse va toujours retourner deux résultats :
 resolve en cas de succès
 reject en cas d’erreur
 Vous devrez donc gérer les deux cas afin de créer votre traitement
166
Promesse
var promise2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve(3);
}, 5000);
});

[Link](
function (x) {
[Link]('resolved with value :', x);
}
)

167
Qu’est ce que la programmation réactive
1. Nouvelle manière d’appréhender les appels asynchrones
2. Programmation avec des flux de données asynchrones

Programmation reactive =
Flux de données (observable) + écouteurs d’événements(observer).

168
Le pattern « Observer »
 Le patron de conception Observable permet à un objet de garder la
trace d'autres objets, intéressés par l'état de ce dernier.

 Il définit une relation entre objets de type un-à-plusieurs.

 Lorsque l’état de cet objet change, il notifie ces observateurs.

169
Observables, Observers et subscriptions
Observable

inscription Données

observer observer observer

traitement
170
Fonctionnement

171
Promesse Vs Observable
Promesse Observable
Un promesse gère un seul événement Un observable gère un « flux » d’événements.
Non annulable. Annulable.
Lazy : le traitement n'est déclenché qu'à la première
Traitement immédiat.
utilisation du résultat.
Une centaine d'opérateurs de transformation natifs
Deux méthodes uniquement (then/catch).
(map, reduce, merge, filter, …).
Operateurs tels que retry, replay

172
Observable
const observable = new Observable((observer) => {
let i = 5;
const intervalIndex = setInterval(() => {
if (!i) {
[Link]();
clearInterval(intervalIndex);
}
[Link](i--);
}, 1000);
});
[Link]((val) => {
[Link](val);
}); 173
asyncPipe
 asyncPipe est un pipe qui permet d’afficher directement un observable.

 {{ valeurSourceAsynchrone | async }}

 L’asyncPipe s’inscrit automatiquement à l’observable et affiche le dernier résultat envoyé.

 Quand le composant est détruit l’asyncPipe se désinscrit automatiquement de l’observable.

174
Les operateurs de l’observable
Les opérateurs sont des fonctions. Il y a deux types d'opérateurs :
Un opérateur pipeable est une fonction qui prend un observable comme entrée et renvoie un
autre observable. C'est une opération pure : le précédent Observable reste inchangé.
Syntaxe : [Link](opertaeur1(), operateur2(), …).

 Les opérateurs de création sont l'autre type d'opérateur, qui peut être appelé comme fonctions
autonomes pour créer un nouvel Observable. Par exemple : of(1, 2, 3) crée un observable qui va
émettre 1, 2, et 3, l'un après l'autre.

175
Quelques opérateurs utiles de l’Observable
map

176
Quelques opérateurs utiles de l’Observable
filter

177
Quelques opérateurs utiles de l’Observable

178
Quelques opérateurs utiles de l’Observable
[Link]

[Link]

[Link]

179
Les subjects
 Un subject est un type particulier d’observable. En effet Un subject est en même temps un
observable et un observer, il possède donc les méthodes next, error et complete.
 Pour broadcaster une nouvelle valeur, il suffit d'appeler la méthode next, et elle sera diffusé aux
Observateurs enregistrés pour écouter le Subject.

Observer
Observable
Next
(subscription) Error
Complete

180
Les subjects
personneClickSubject

Observable CvComponent

Details
Observer

Observver 3
Exercice
 Modifier l’affichage des détails d’une personne au click. Enlever tous les outputs et remplacer les
par l’utilisation d’un subject.

182
Installation de HTTP
 Le module permettant la consommation d’API externe s’appelle le
HTTP MODULE.
 Afin d’utiliser le module HTTP, il faut l’importer de
@angular/common/http (@angular/http dans les anciennes
versions) import {HttpClientModule} from "@angular/common/http";
 Il faudra aussi l’ajouter dans le fichier [Link]
dans le tableau d’imports. imports: [
BrowserModule,
FormsModule,
HttpClientModule,
],

183
Installation de HTTP
 Afin d’utiliser le module HTTP, il faut l’injecter dans le composant
ou le service dans lequel vous voulez l’utiliser.

constructor(private http:HttpClient) { }

184
Interagir avec une API Get Request
 Afin d’exécuter une requête get le module http nous offre une méthode get.
 Cette méthode retourne un Observale.
 Cet observable a 3 callback function comme paramètres.
 Une en cas de réponse
 Une en cas d’erreur
 La troisième en cas de fin du flux de réponse.

185
Interagir avec une API Get Request
[Link](API_URL).subscribe(
(response:Response)=>{
//ToDo with DATA
},
(err:Error)=>{
//ToDo with error
},
() => {
[Link]('Data transmission complete');
}
);

186
Interagir avec une API POST Request
 Afin d’exécuter une requête POST le module http nous offre une méthode post.
 Cette méthode retourne un Observale.
 Diffère de la méthode get avec un attribut supplémentaire : body
 Cette observable a 3 callback function comme paramètres.
 Une en cas de réponse
 Une en cas d’erreur
 La troisième en cas de fin du flux de réponse.

187
Interagir avec une API POST Request
[Link](API_URL,dataToSend).subscribe(
(response:Response)=>{
//ToDo with response
},
(err:Error)=>{
//ToDo with error
},
() => {
[Link]('complete');
}
);

188
Documentation

[Link]

189
Exercice
 Accéder au site [Link]

 Utiliser l’API des posts pour afficher la liste des posts. En attendant le chargement des données
afficher un message « loading… ».

 Ajouter un input. A chaque fois que vous écrivez un élément dans cet input il sera ajouté dans la
liste.

190
Les headers
 Afin d’ajouter des headers à vos requêtes, le HttpClient vous offre la classe HttpHeaders.
 Cette classe est une classe immutable (read Only).
[Link]
 Elle propose une panoplie de méthode helpers permettant de la manipuler.
 set(clé,valeur) permet d’ajouter des headers. Elle écrase les anciennes valeurs.
 append(clé,valeur) concatène de nouveaux headers.

Toutes les méthodes de modification retourne un HttpHeaders permettant un chainage d’appel.

[Link]

191
Les paramètres
 Afin d’ajouter des paramètres à vos requêtes, le HttpClient vous offre la classe HttpParams.
 Cette classe est une classe immutable (read Only).
 Elle propose une panoplie de méthode helpers permettant de la manipuler.
 set(clé,valeur) permet d’ajouter des headers. Elle écrase les anciennes valeurs.
 append(clé,valeur) concatène de nouveaux headers.

Toutes les méthodes de modification retourne un HttpParams permettant un chainage d’appel.

[Link]

192
Authentification

193
Ajouter le token dans la requête
 Si la ressource demandé est contrôlé avec un token, vous devez y insérer le token afin d’être
authentifié au niveau du serveur.
 Pour ajouter un token vous pouvez le faire via un objet HttpParams. Cet objet possède une
méthode set à laquelle on passe le nom du token ‘access_token’ suivi du token.
 Vous devez ensuite l’ajouter comme paramètre à votre requête.
const params = new HttpParams()
.set('access_token', [Link]('token'));
return [Link]([Link], personne, {params});

[Link]

194
Ajouter le token dans la requête
 Une seconde méthode consiste à ajouter dans le header de la requête avec comme name
‘Authorization’ et comme valeur ‘bearer’ à laquelle on concatène le Token.
 Pour se faire, créer un objet de type HttpHeaders.
 Utiliser sa méthode append afin d’y ajouter ses paramètres.
 Ajouter la à la requête.

const headers = new HttpHeaders();

[Link]('Authorization', 'Bearer ${token}');
return [Link]([Link], personne, {headers});

195
Sécuriser vos routes

 Dans vos applications, certaines routes ne doivent être accessibles que si vous êtes authentifié. Ce
cas d’utilisation se répète souvent et s’est un sous cas de la sécurisation de vos routes.

 Angular a pris en considération ce cas en fournissant un mécanisme via l’utilisation des Guard.

196
Guard
 Ce sont des classes qui permettent de gérer l’accès à vos routes.
Un guard informe sur la validité ou non de la continuation du process de navigation en retournant
un booléen, une promesse d’un booléen ou un observable d’un booléen.
 Le routeur supporte plusieurs types de guards, par exemple :

CanActivate permettre ou non l’accès à une route.

CanActivateChild permettre ou non l’accès aux routes filles.

CanDeactivate permettre ou non la sortie de la route.

197
Guard / canActivate
 Afin d’utiliser le guard canActivate (de même pour les autres), vous devez créer un classe qui
implémente l’interface CanActivate et donc qui doit implémenter la méthode canActivate de sorte
qu’elle retourne un booléen permettant ainsi l’accès ou non à la route cible.
1

 Vous devez ensuite ajouter cette classe dans le provider. 2

 Finalement pour l’appliquer à une route, ajouter la dans la propriété canActivate. Cette propriété
3
prend un tableau de guard. Elle ne laissera l’accès à la route qu esi la totalité des guard retourne true.

 Vous pouvez utiliser la méthode : ng g g nomGuard

198
 Guard / canActivate 1

import { Injectable } from '@angular/core';

import {ActivatedRouteSnapshot, CanActivate, RouterStateSnapshot} from '@angular/router';
import {Observable} from 'rxjs';

@Injectable({
providedIn: 'root'
})
export class AuthGuard implements CanActivate {
constructor() {
}
// route contient la route appelé
// state contiendra la futur état du routeur de l’application qui devra passer la validation du guard
// [Link]
canActivate(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> |
Promise<boolean> | boolean {
if (// your condition) {
return true;
}
return false;
}
}

199
Guard / canActivate 2

providers: [
TodoService,
CvService,
LoginService,
AuthGuard,
],
[Link]

200
Guard / canActivate 3

{
path: 'lampe',
component: ColorComponent,
canActivate: [AuthGuard]
},

201
Exercice
 Ajouter les guards nécessaires afin de sécuriser vos routes.

 Une personne déjà connectée ne peut pas accéder au composant de login.

202
Les intercepteurs
 A chaque fois que nous avons une requête à laquelle nous devons ajouter le token, nous devons
refaire toujours le même travail.
 Pourquoi ne pas intercepter les requêtes HTTP et leur associer le token s’il est la à chaque fois ?
 Un intercepteur Angular (fournit par le client HTTP) va nous permettre d’intercepter une requête à
l’entrée et à la sortie de l’application.
 Un intercepteur est une classe qui implémente l’interface HttpInterceptor.
 En implémentant cette interface, chaque intercepteur va devoir implémenter la méthode intercept.

Front intercepteur back

203
Les intercepteurs

export class AuthentificationInterceptor implements HttpInterceptor {

intercept(req: HttpRequest<any>, next: HttpHandler):
Observable<HttpEvent<any>> {
[Link]('intercepted', req);
return [Link](req);
}
}

204
Les intercepteurs
 Un intercepteur est injecté au niveau du provider. Si vous voulez intercepter toutes les requêtes,
vous devez le provider au niveau du module principal.
 L’inscription au niveau du provider se fait de la façon suivante :

export const
AuthentificationInterceptorProvider = {
providers: [
provide: HTTP_INTERCEPTORS,
AuthentificationInterceptorProvider
useClass: AuthentificationInterceptor,
],
multi: true,
};

205
Les intercepteurs : changer la requête
 Par défaut la requête est immutable, on ne peut pas la changer.

 Solution : la cloner, changer les headers du clone et le renvoyer.

export const
AuthentificationInterceptorProvider = {
providers: [
provide: HTTP_INTERCEPTORS,
AuthentificationInterceptorProvider
useClass: AuthentificationInterceptor,
],
multi: true,
};

206
Cloner une requête

const newReq = [Link]({

headers: new HttpHeaders()// faites ce que vous voulez ici ajouter des
headers, des params …
});
// Chainer la nouvelle requete avec [Link]
return [Link](newReq);

207
 Intercepter les erreurs
 Afin d’intercepter les erreurs, il faut récupérer la réponse et vérifier s’il y a une erreur. Dans ce cas,
il faut faire le traitement souhaité.

intercept(req: HttpRequest<any>, next: HttpHandler):

Observable<HttpEvent<any>> {
return [Link](req) intercept(req: HttpRequest<any>, next: HttpHandler):
.pipe( Observable<HttpEvent<any>> {
tap( return [Link](req)
(incoming: any) => { .pipe(
[Link]('here its ok'); catchError(err => {
}, [Link](err);
(error: HttpErrorResponse) => { return new
return throwError(error); Observable<HttpEvent<any>>((observer) => {
} [Link](err);
) });
); })
} );
}
208
Déploiement
 Afin de déployé votre application, il vous suffit d’utiliser la commande suivante :
ng build --prod
 Un dossier dist sera créer contenant votre projet
 Pour tester localement votre projet, télécharger un serveur HTTP virtuel avec la commande
suivante :
Npm install http-server –g
 Lancer maintenant votre projet à l’aide de cette commande :
http-server dist/NomDeVotreProjet

[Link] 209
 Déployer votre application sur GitHub
Pages (angularCli >= 8.3)
 Créer un repository et mettez y votre projet
 installer angular-cli-ghpages : ng add angular-cli-ghpages
Ajouter cette configuration dans votre fichier [Link] si ca n’a pas été fait automatiquement
"deploy": {
"builder": "angular-cli-ghpages:deploy",
}
Lancer la commande ng deploy --base-href=/https/fr.scribd.com/the-repositoryname/
Accéder à votre page [Link]
 En cas de mise à jour, relancer le même code.

[Link]

210
Déployer votre application sur GitHub
Pages (angularCli >= 8.3)
Ajouter cette configuration dans votre fichier [Link] et utiliser uniquement ng deploy

"deploy": {
"builder": "angular-cli-ghpages:deploy",
"options": {
"baseHref": "[Link]
}
}

211
[Link]@[Link]

212