Formation :

Angular développer des

application web

Formateur
Mr. Lakhdhar Khalil
Directeur de Protech-IT
Contact: khalillakhdharatc@gmail,com

24/03/2023
 Plan

Introduction
JavaScript ES5, ES6 et Typescript
Premiers pas avec Angular
L’approche composant
Injection de dépendances
Programmation réactive et service HTTP

2
 Présentation du formateur

Lakhdhar Khalil
▪ Enseignant à l’université ISET Gabés
▪ Senior consultant chez Oracle north AfricaAnd Middle east
▪ Chef de projet et fondateur de protech-it
▪ Fondateur de l’association barmaja-ma
▪ Auteur de: backless web the full guide (le plus vendu sur Amazon catégorie
technology en 2016)

3
 Objectifs pédagogiques

Objectifs pédagogiques :
Concrètement, à l'issue de cette formation Angular, vous aurez acquis les
connaissances et compétences nécessaires pour :
•Connaître les principes fondamentaux et le fonctionnement d’Angular et de son outil
Angular CLI
•Connaître le langage TypeScript (sur-ensemble de JavaScript ES5 et ES6)
•Savoir développer et réutiliser les différents composants d’une application Angular :
composants graphiques, services, directives
•Savoir tester ses composants en isolation
•Être capable de déployer une application Angular en production
•Connaître les nouveautés des dernières versions d’Angular

4
 Public concerné

▪ Développeurs back-end
▪ Assistant
▪ Full stack web developpers

5
 Connaissance requise

• Connaissances de base en informatique et algorithmique.

• Les bases de Javascript

6
Bref Historique des technologies front-
end
Page3

1991 1995 1996 2005 2006 2010 2014 2015

Naissanc Naissanc EcmaScript

Naissancesde FrameworksXMLHttpReques Frameworks HTML5
e de e de Js Js 6
CSS tspecification standard
HTML Javascript 1st 2nd

generation generation
Principaux frameworks Javascript Page4

PlusieursfremeworksJavascriptMVCsont apparusau coursdesdernières années

Angular REACT VUE Svelte

www.angular.io www.reactjs.org www.vue.js www.svelte.dev

Approche classique vs Approche moderne Page5

Différencesentre lesarchitecturesclassiqueetmoderne desapplications web

Approche classique : tout le

travail est fait côté serveur. Le
navigateur se contente d’af icher
lesfichiers reçus.

Approche moderne : Une

partie du travail est déléguée
pour le client. Celui-ci peut
communiquer avec le serveur
à travers des requêtes A JAX
pour récupérer les données
nécessaires.
Présentation du framework Angular Page6

Framework Javascript Open source

Développé par Google Basé sur les composants

Single Page Applications Développé avec Typescript

Présentation de
Typescript
• Conçu par Microsoft pour le
développement d'applicationsJavaScriptà
grandeéchelle.
• Conçucommeun sur-ensembletypé de
JavaScript.
• Lacompilation (avecun transpiler) permet
de générerdu codeJavascriptstandard
interprétablepar un navigateurweb.
• LesfichiersTypeScriptont l'extension.ts et
letranspilerproduit lesfichiers .js.
• Ladernière versionde Typescriptestla3.0
sortie en Juilet2018
• Siteofficiel:
https:/www.typescriptlang.org/
• https:/github.com/Microsoft/TypeScript
Avantages de Typescript par rapport à
JSES5
Page9

(1) Types : String, Number, Boolean, Array, Enums,

Any, Void

Classes : Propriétés, méthodes, constructeur,

héritage…
Avantages de Typescript par rapport à Page10

JSES5
(2D)écorateurs : Imports / Exports de modules :
Les décorateurs fournissent un moyen Les modules en typescript sont
d'ajouter des annotations et de la méta- exécutés dans leur propre scope, pas
programmation pour les déclarations de dans un scope global; cela signifie que
classes, méthodes, propriétés … les variables, fonctions, classes, etc.
déclarées dans un module ne sont
pas visibles en dehors du module sauf
si elles sont explicitement exportées
(export).
Inversement, pour consommer une
variable, une fonction, une classe,
une interface, etc. exportées depuis
un module différent, il faut l'importer
(import).
 Page11

Avantages de Typescript par

(3) Utilitaires de langage :
rapport à
Fat Arraw function :
JSES5

Variables in strings MultilineString

Transpilation Page12

TypeScript est reconverti en JavaScript (compatible avec les navigateurs web) en

utilisant un processus appelé transpilation.
Un transpiler est un logiciel qui convertit le code source d'un langage de
programmation vers un autre. Par exemple, TypeScript, CoffeeScript, Caffeine,
Kaffeine et plus de deux douzaines de langues sont transcrits dans JavaScript.
Voir des exemple sous www.typescriptlang.org/play/
Débogage et fichiers Map Page13

Le processus de transpilation décrit précédemment rend le débogage difficile

puisque vous écrivez votre code dans un langage et le navifateur exécute un autre.
Les fichiers Map sont très utiles pour remédier à ce problème.
Les fichiers Map sont automatiquement générés par votre transpiler et donnent au
navigateur les informations nécessaires pour mapper le code d'origine (TypeScript)
au code déployé (JavaScript).
Cela signifie que le débogueur JavaScript peut vous permettre de déboguer votre
code source comme si le navigateur l'exécutait.
Il est donc fortement recommandé d’activer les fichiers .Map dans votre navigateur
pour vous aider dans la phase de débogage.
Liens utiles pour Google chrome :
https://developers.google.com/web/tools/chrome-devtools/javascript/source-
maps
https://gist.github.com/jakebellacera/336c4982194bcb02ef8a
 Page14

Installer Node JSet NPM

GestiondespaquetsNPN

npm estlegestionnaire de paquets pour JavaScriptetle plus

grand registrede logicielsau monde.
npm permet d’instal er,partager etdistrubuer du codesource
npm facilitela gestiondesdépendances dans votre projet.
Introduction

Angular est un framework JavaScript développé par Google pour la création

d'applications Web côté client. Il utilise une approche basée sur les composants, où
chaque composant est une partie indépendante de l'interface utilisateur de
l'application. Angular fournit également des outils pour la création d'applications Web
progressives (PWA), qui sont des applications Web qui peuvent être installées sur des
appareils mobiles et des ordinateurs de bureau.
1. Configuration de l'environnement de développement
Avant de commencer à développer des applications avec Angular, vous devez
configurer votre environnement de développement. Vous aurez besoin de Node.js et
npm pour installer Angular CLI (interface de ligne de commande). Vous pouvez
installerNode.js à partir du site officiel et npm sera installé avec Node.js. Ensuite,
vous pouvez installer Angular CLI en exécutant la commande suivante dans votre
terminal :

npm install -g @angular/cli

18
Introduction

Angular est un framework JavaScript développé par Google pour la création

d'applications Web côté client. Il utilise une approche basée sur les composants, où
chaque composant est une partie indépendante de l'interface utilisateur de
l'application. Angular fournit également des outils pour la création d'applications Web
progressives (PWA), qui sont des applications Web qui peuvent être installées sur des
appareils mobiles et des ordinateurs de bureau.
1. Configuration de l'environnement de développement
Avant de commencer à développer des applications avec Angular, vous devez
configurer votre environnement de développement. Vous aurez besoin de Node.js et
npm pour installer Angular CLI (interface de ligne de commande). Vous pouvez
installerNode.js à partir du site officiel et npm sera installé avec Node.js. Ensuite,
vous pouvez installer Angular CLI en exécutant la commande suivante dans votre
terminal :

npm install -g @angular/cli

19
 Introduction
Composants et modèles
Les composants sont les éléments de base d'une application Angular. Chaque
composant est une partie indépendante de l'interface utilisateur de l'application et
est composé d'un fichier TypeScript, d'un fichier de modèle HTML et d'un fichier de
style CSS. Le modèle HTML est le code qui définit la structure de l'interface utilisateur,
tandis que le fichier TypeScript contient la logique de ce qui se passe lorsque
l'utilisateur interagit avec l'interface utilisateur. Les fichiers de style CSS permettent de
personnaliserl'apparence de l'interface utilisateur.
Services et injection de dépendances
Les services sont des classes qui fournissent une fonctionnalité spécifique à une
application Angular. Par exemple, un service de données peut être utilisé pour
récupérer des données à partir d'une API Web. Les services peuvent être injectés dans
des composants et d'autres services via l'injection de dépendances. Cela permet de
partager des fonctionnalités entre différents composants et services de manière
efficace. 20
Introduction
Routage
Le routage permet de naviguer entre différentes pages d'une application Angular. Le
routage est configuré à l'aide d'un fichier de configuration qui mappe les URL aux
composants correspondants. Vous pouvez également passer des paramètres dans
l'URL pour personnaliser la page affichée.

Observables et gestion des événements

Les observables sont des flux de données qui permettent de gérer les événements
dansune application Angular. Par exemple, un observateur peut être utilisé pour
écouter les clics de bouton dans une application et déclencher une action en
conséquence. Les observables sont utilisés pour gérer les événements asynchrones
dans une application Angular.

21
Introduction

Formes et validation
Angular fournit des outils pour la création de formulaires et de validation de données.
Vous pouvez utiliser des directives pour créer des champs de formulaire, des boutons
radio et des cases à cocher. Les validations peuvent être ajoutées aux champs de
formulaire pour s'assurer que les données entrées

22
Hello World App

• InstallerNode Js(node –v pout vérifier siune version estdéjà installée)

• Installer Angular CLI(npm install -g @angular/cli)
• Créer un projet (ng new angular-hello-world)
• Remarque : pendant la création du premier projet, nous n’allons pasintégrer
Angular routing et nous allons utiliser CSS comme format de feuille de style.
• Lancer leprojet
• Accéderau répertoire créé(cd angular-hello-world )
• Compiler le projet etlancerle serveur (ng serve)
• Accéderau projet dans le navigateur(http://localhost:4200 )
Architecture Page18

Thebig picture

https:/angular.io/guide/architecture
 Approche composant
Présentation des composants :

Les composants sont le principal élément de base des applications angulars.

Chaquecomposant est composé de :

• Un modèle HTML qui déclare ce qui s'affiche sur la page

• Une classe TypeScript qui définit le comportement
• Un sélecteur CSS qui définit comment le composant est utilisé dans un modèle
• Facultativement, les styles CSS appliqués au modèle
Conditions préalables
Pour créer un composant, vérifiez que vous avez satisfait aux prérequis suivants :
•Installez la CLI angular.
•Créez un espace de travail angular avec l'application initiale. Si vous n'avez pas de projet,
créez-en un en utilisant ng new <project-name>, où <project-name>est le nom de votre application
Angular.
25
 Approche composant
Création d'un composant
La meilleure façon de créer un composant est avec la CLI angular. Vous pouvez
également créer un composant manuellement.
Création d'un composant à l'aide de la CLI angular

Pour créer un composant à l'aide de la CLI angular :

1. À partir d'une fenêtre de terminal, accédez au répertoire contenant votre application.
2. Exécutez la ng generate component <component-
name>commande,où <component-name>est le nom de votre nouveau
composant.
Par défaut, cette commande crée ce qui suit :

• Un répertoire nommé d'après le composant

• Un fichier composant,<component-name>.component.ts
• Un fichier modèle,<component-name>.component.html
• Un fichier CSS,<component-name>.component.css
• Un dossier de spécifications de tests,<component-name>.component.spec.ts

26
 Approche composant
Où <component-name>est le nom de votre composant.
Les composants Angular sont les éléments fondamentaux de la structure d'une
application Angular. Ils permettent de créer des interfaces utilisateur modulaires et
réutilisables. Les composants sont des classes TypeScript qui contiennent des
propriétés et des méthodes, ainsi qu'un modèle HTML qui définit l'apparence du
composant.
Crochets de cycle de vie
Une instance de composant a un cycle de vie qui commence lorsque Angular
instancie la classe de composant et restitue la vue du composant avec ses vues
enfants. Le cyclede vie se poursuit avec la détection des changements, car Angular
vérifie quand les propriétés liées aux données changent et met à jour à la fois la vue
et l'instance du composant si nécessaire. Le cycle de vie se termine lorsque
Angular détruit l'instance du composant et supprime son modèle rendu du DOM.
Les directives ont un cycle de vie similaire, car Angular crée, met à jour et détruit
des instances au cours de l'exécution.

27
 Approche composant
Où <component-name>est le nom de votre composant.
Les composants Angular sont les éléments fondamentaux de la structure d'une
application Angular. Ils permettent de créer des interfaces utilisateur modulaires et
réutilisables. Les composants sont des classes TypeScript qui contiennent des
propriétés et des méthodes, ainsi qu'un modèle HTML qui définit l'apparence du
composant.
Crochets de cycle de vie
Une instance de composant a un cycle de vie qui commence lorsque Angular
instancie la classe de composant et restitue la vue du composant avec ses vues
enfants. Le cyclede vie se poursuit avec la détection des changements, car Angular
vérifie quand les propriétés liées aux données changent et met à jour à la fois la vue
et l'instance du composant si nécessaire. Le cycle de vie se termine lorsque
Angular détruit l'instance du composant et supprime son modèle rendu du DOM.
Les directives ont un cycle de vie similaire, car Angular crée, met à jour et détruit
des instances au cours de l'exécution.
Votre application peut utiliser des méthodes de hook de cycle de vie pour exploiter les
événements clés du cycle de vie d'un composant ou d'une directive afin d'initialiser
denouvelles instances, d'initier la détection des modifications si nécessaire, de
répondreaux mises à jour lors de la détection des modifications et de nettoyer
avant la suppression des instances. 28
 Approche composant

Exemple pratique:
Création d’un composant (Introduction) avec des paramétres dynamiques
Teste de l’initialisation et affichage avec les crochets.
Exercice:
Créer un projet angular et afficher la Valeur (Welcome to angular) dynamiquement

29
 Approche composant
Construction (construction du composant) :
• Le constructeur du composant est appelé, et les propriétés et services sont
initialisés.
2. Initialisation (initialisation des propriétés liées) :
• Les propriétés liées (@Input) sont initialisées.
• Les hooks ngOnChanges et ngOnInit sont appelés.
3. Changement détecté (détection de changement des propriétés liées) :
• Angular détecte les changements de valeurs des propriétés liées (@Input).
• Le hook ngDoCheck est appelé.
4. Affichage (affichage du contenu du composant) :
• Les données du composant sont affichées dans le template.
• Les hooks ngAfterContentInit(), ngAfterContentChecked(), ngAfterViewInit(),
et
ngAfterViewChecked sont appelés.
5. Mise à jour (mise à jour du composant) :
• Si une propriété liée (@Input) a changé, Angular met à jour le template et les
vues. Les hooks onChange est appelés.
6. Destruction (destruction du composant) :
• Le composant est détruit lorsque l'utilisateur navigue vers une autre page ou
ferme l'application.
• Le hook ngOnDestroy() est appelé.
30
 Approche composant

Ces étapes se produisent dans un ordre précis et sont automatiquement gérées par
Angular. Il est important de comprendre ces étapes pour créer des composants
efficaces et optimisés. Les hooks de cycle de vie peuvent être utilisés pour exécuter
des actions spécifiques à chaque étape, comme la mise à jour de données,
l'initialisation de services, la connexion à des sources de données externes, etc.
Comprendre les modèles :
Dans Angular, un modèle est un plan pour un fragment d'une interface utilisateur
(UI). Les modèles sont écrits en HTML et une syntaxe spéciale peut être utilisée dans
un modèle pour s'appuyer sur de nombreuses fonctionnalités d'Angular.
Améliorer le HTML
Angular étend la syntaxe HTML de vos modèles avec des fonctionnalités
supplémentaires.
Par exemple, la syntaxe de liaison de données d'Angular permet de définir
dynamiquement les propriétés du modèle d'objet de document (DOM).
Presque toute la syntaxe HTML est une syntaxe de modèle valide. Cependant,
commeun modèle angulaire n'est qu'un fragment de l'interface utilisateur, il n'inclut
pas d'éléments tels que <html>, <body>ou <base>.
31
 Approche composant
Affichage des valeurs avec interpolation :
L'interpolation fait référence à l'incorporation d'expressions dans un texte balisé. Par
défaut, l'interpolation utilise les doubles accolades {{et }}comme délimiteurs.
Pour illustrer le fonctionnement de l'interpolation, considérons un composant
angulairequi contient une currentCustomervariable :

currentCustomer = 'Maria';
Utilisez l'interpolation pour afficher la valeur de cette variable dans le modèle de
composant correspondant :
<h3>Current customer: {{ currentCustomer }}</h3>
Angular remplace currentCustomerpar la valeur de chaîne de la propriété de
composant correspondante. Dans ce cas, la valeur est Maria.
Dans l'exemple suivant, Angular évalue les propriétés titleet itemImageUrlpour
afficher un texte de titre et une image.

<p>{{title}}</p>

<div><img alt="item" src="{{itemImageUrl}}"></div>

32
 Approche composant
Affichage des valeurs avec interpolation :
L'interpolation fait référence à l'incorporation d'expressions dans un texte balisé. Par
défaut, l'interpolation utilise les doubles accolades {{et }}comme délimiteurs.
Pour illustrer le fonctionnement de l'interpolation, considérons un composant
angulairequi contient une currentCustomervariable :

currentCustomer = 'Maria';
Utilisez l'interpolation pour afficher la valeur de cette variable dans le modèle de
composant correspondant :
<h3>Current customer: {{ currentCustomer }}</h3>
Angular remplace currentCustomerpar la valeur de chaîne de la propriété de
composant correspondante. Dans ce cas, la valeur est Maria.
Dans l'exemple suivant, Angular évalue les propriétés titleet itemImageUrlpour
afficher un texte de titre et une image.

<p>{{title}}</p>

<div><img alt="item" src="{{itemImageUrl}}"></div>

33
 Approche composant
Déclarations de modèle :
Les instructions de modèle sont des méthodes ou des propriétés que vous pouvez
utiliser dansvotre code HTML pour répondre aux événements utilisateur. Avec les
instructions de modèle, votre application peut engager les utilisateurs par le biais
d'actions telles que l'affichage de contenu dynamique ou la soumission de
formulaires.

Dans l'exemple suivant, l'instruction de modèle deleteHero()apparaît entre

guillemetsà droite du signe égal =comme dans (event)="statement".
src/app/app.component.html

<button type="button" (click)="deleteHero()">Delete

hero</button>
Lorsque l'utilisateur clique sur le bouton Supprimer le héros , Angular appelle
la deleteHero()méthode dans la classe du composant.
Utilisez des instructions de modèle avec des éléments, des composants ou des
directives en réponse à des événements.

34
 Approche composant
Syntaxe :
Comme les expressions de modèle , les instructions de modèle utilisent un langage
qui ressemble à JavaScript. Cependant, l'analyseur des instructions de modèle
diffère de l'analyseur des expressions de modèle. En outre, l'analyseur d'instructions
de modèle prend spécifiquement en charge à la fois l'affectation de base ( =) et les
expressions dechaînage avec des points-virgules ( ;).
La syntaxe d'expression JavaScript et de modèle suivante n'est pas autorisée :

• new
• Les opérateurs d'incrémentation et de décrémentation, ++et--
• Affectation d'opérateur, telle que +=et-=
• Les opérateurs au niveau du bit, tels que |et&
Contexte de l'instruction
Les instructions ont un contexte — une partie particulière de l'application à laquelle
appartient l'instruction.
Les instructions ne peuvent faire référence qu'à ce qui se trouve dans le contexte de
l'instruction, qui est généralement l'instance du composant. Par
exemple, deleteHero()of (click)="deleteHero()"est une méthode du
composantdans l'extrait de code suivant.
35
 Approche composant
<button type="button" (click)="deleteHero()">Delete hero</button>
Le contexte de l'instruction peut également faire référence aux propriétés du propre contexte du
modèle. Dans l'exemple suivant, la méthode de gestion des événements du
composant onSave()prend le propre $eventobjet du modèle comme argument. Sur les deuxlignes
suivantes, la deleteHero()méthode prend une variable d'entrée de
modèle , heroet onSubmit()prend une variable de référence de modèle , #heroForm.

<button type="button" (click)="onSave($event)">Save</button> <button

type="button" *ngFor="let hero of heroes"
(click)="deleteHero(hero)">{{hero.name}}</button> <form #heroForm
(ngSubmit)="onSubmit(heroForm)"> ... </form>

Dans cet exemple, le contexte de l' $eventobjet, heroet #heroFormest le modèle.

Les noms de contexte de modèle ont priorité sur les noms de contexte de composant. Dans le
précédent deleteHero(hero), heroest la variable d'entrée dumodèle, pas la propriété du
composant hero.

36
 Approche composant
La mise en style:
En Angular, le sélecteur :host est utilisé pour appliquer des styles à l'élément hôte d'un composant. L'élément
hôte est l'élément DOM qui encapsule le contenu du composant.
Voici comment vous pouvez utiliser le sélecteur :host pour appliquer des styles dans Angular :
1.Dans le fichier CSS de votre composant, vous pouvez utiliser :host pour cibler l'élément hôte. Par exemple, si
vous souhaitez appliquer un arrière-plan rouge à l'élément hôte, vous pouvez écrire :

:host {
background-color: red;
}
Vous pouvez également combiner le sélecteur :host avec d'autres sélecteurs pour cibler des éléments
spécifiques à l'intérieur de l'élément hôte. Par exemple, si vous souhaitez cibler un élément <h1> à l'intérieur
de l'élément hôte et lui appliquer une couleur de texte verte, vous pouvez écrire :
:host h1 {
color: green;
}
1.Cela appliquera la couleur verte uniquement aux éléments <h1> qui se trouvent à l'intérieur de l'élément hôte
de votre composant.
2.Vous pouvez également utiliser le sélecteur :host avec des pseudo-classes pour réagir à des événements
spécifiques. Par exemple, si vous souhaitez appliquer des styles à l'élément hôte lorsqu'il est survolé par la
souris, vous pouvez écrire : 37
 Approche composant
:host:hover {
border: 1px solid blue;
}

1.Cela ajoutera une bordure bleue d'un pixel à l'élément hôte lorsque vous survolez avec la souris.
L'utilisation du sélecteur :host permet de définir des styles spécifiques à l'élément hôte d'un composant
Angular, offrant ainsi une personnalisation plus fine et une isolation des styles pour chaque composant.
L'utilisation de NgClass en Angular permet d'appliquer un style conditionnel à un élément en fonction d'une
expression ou d'une condition. Voici un exemple d'utilisation de NgClass pour un affichage conditionnel de style
:
Supposons que vous ayez une variable isSpecial dans votre composant qui indique si un élément est spécial ou
non. Vous souhaitez appliquer un style différent à l'élément en fonction de la valeur de cette variable. Voici
comment vous pouvez le faire avec NgClass :
1.Dans votre fichier de modèle (HTML), vous pouvez utiliser NgClass avec une expression conditionnelle pour
appliquer un style basé sur la valeur de isSpecial. Par exemple :
<div [ngClass]="{'special': isSpecial, 'normal': !isSpecial}">
Cet élément est spécial ou normal en fonction de la valeur de isSpecial.
</div>
Dans cet exemple, nous utilisons ngClass pour appliquer deux classes CSS conditionnellement. Si isSpecial est
évalué à true, la classe CSS "special" sera appliquée à l'élément <div>. Sinon, la classe CSS "normal" sera
appliquée. 38
Dans votre fichier CSS, vous pouvez définir les styles pour les classes "special" et "normal" comme suit :
Approche composant
.special {
background-color: yellow;
font-weight: bold;
}

.normal {
background-color: white;
font-weight: normal;
}
Dans cet exemple, lorsque la classe "special" est appliquée à l'élément, il aura un arrière-plan jaune et un
poids de police gras. Lorsque la classe "normal" est appliquée, l'arrière-plan sera blanc et le poids de police
sera normal.
Ainsi, en fonction de la valeur de isSpecial, l'élément <div> sera stylé différemment à l'aide de NgClass et des
classes CSS correspondantes.

Cela permet de conditionner et d'appliquer des styles de manière dynamique en fonction de l'état ou des
valeurs de votre application.

39
 Approche composant
Démonstration: (objectifs)
1. Création d’une liste des taches à faire et l’affichage dans un projet angular
2. La mise en style du composant (tableaux…)
3. l’affichage de l’importance de la tache de façon colorié
Exercice:
Dans le fichier TypeScript (nom-du-composant.component.ts) de votre composant, déclarez une variable
membres qui est une liste d'objets représentant les membres. Chaque objet devrait avoir les propriétés nom et
age. Par exemple :
membres: any[];
this.membres = [ { nom: 'Alice', age: 25 }, { nom: 'Bob', age: 17 }, { nom: 'Charlie', age: 19 },
// Ajoutez d'autres membres avec leurs noms et âges respectifs ];

40
NgIf Page52

LadirectivengIf estutiliséelorsque voussouhaitez afficherou masquer

un élément en fonctiond'une condition.
Lacondition estdéterminée par le résultatde l'expressionque vous
transmettezdans ladirective.Sile résultatde l'expressionrenvoie une valeur
false,l'élémentserasupprimé du DOM.
Exemples:
NgSwit ch Page53
NgStyle Page54

AvecladirectiveNgStyle,vouspouvez définir despropriétés CSSd'un

élément DOM donné à partir d'expressions Angular.
Lafaçonla plus simple d'utiliser cettedirectiveestde faire
[style. <Propriété css>] = "valeur"
Exemples :

ValeurStatique ValeurDynamique
NgClass Page55

La directive NgClass, représentée par un

attribut ngClassdans votremodèle HTML,
vous permet de définir et de modifier
dynamiquement les classes CSSpour un
élément DOM donné.
Exemples :

Utilisationsimple
NgFor (1) Page56

Lerôle de cettedirectiveestde répéter un élément DOM donné (ou une

collectiond'élémentsDOM) etde passerun élément du tableau à
chaque itération.
Lasyntaxeest*ngFor = "let item of items".
let item spécifieune variable qui récupère l’élémentcourant
du tableau;
items fait référenceà lacollectiond'élémentsde votrecontrôleur.
Exemple :

Résultat
 NgFor (2) Page57

Comment parcourir un tableau d’objets

?

Commentrécupérer l’indexde
l’élémenten cours ?
NgNonBindable Page58

Nous utilisons ngNonBindablequand nous voulons dire à Angularde ne

pas compiler ou lier une sectionparticulière de notre page.

Exemple :
 Directives personnalisées Page59

Enplus desdirectivespré-définis par Angular, nous pouvons créernos propres

directivesà l’aidedu décorateur @Directive.
Créerune directiveressembleà lacréationd’un composant avecquelques
différences:
- Lescomposantsont toutes lesfonctionnalités desdirectivesmaisont aussi
une vue,c’est-à-diredu HTMLqui estinjectédans le DOM lorsque nous
l’utilisons.
...
@Directive({ selector:"[ccCardHover]"}) <div class="cardcard-block" ccCardHover>...</div>

class CardHoverDirective{...}
 Approche composant
Dans le fichier de modèle HTML (nom-du-composant.component.html), utilisez une boucle ngFor pour itérer
sur la liste des membres et afficher leurs noms. Utilisez également ngClass pour appliquer une classe CSS
différente en fonction de l’âge
Dans votre fichier CSS (nom-du-composant.component.css), définissez les styles pour les classes CSS mineur et
majeur afin d'appliquer des couleurs différentes. Par exemple :
.mineur {
color: red;
}

.majeur {
color: blue;
}
Dans cet exemple, les membres de moins de 18 ans auront une couleur de texte rouge (classe mineur), tandis
que les membres de 18 ans et plus auront une couleur de texte bleue (classe majeur).
49
 Approche composant
Les Pipes:
les pipes sont des fonctionnalités qui permettent de transformer et de formater les données affichées dans les
templates. Les pipes sont utilisés pour appliquer des transformations telles que la mise en forme de dates, le
formatage des nombres, la conversion de texte en majuscules ou en minuscules, etc. Les pipes sont des
éléments essentiels pour améliorer l'affichage des données dans les applications Angular.
Voici quelques exemples courants d'utilisation des pipes :
DatePipe : Le pipe date permet de formater les dates selon différents formats. Par exemple :
<p>{{ dateValue | date:'dd/MM/yyyy' }}</p>
1.Cela affiche la valeur de dateValue au format jour/mois/année.
2.UpperCasePipe et LowerCasePipe : Les pipes uppercase et lowercase permettent de convertir du texte en
majuscules ou en minuscules respectivement. Par exemple :

50
 Approche composant
<p>{{ textValue | uppercase }}</p>
<p>{{ textValue | lowercase }}</p>
Cela affiche la valeur de textValue en majuscules et en minuscules respectivement.
CurrencyPipe : Le pipe currency permet de formater les nombres en tant que valeurs monétaires. Par exemple :
<p>{{ priceValue | currency:'EUR' }}</p>
1.Cela affiche la valeur de priceValue avec le symbole de l'euro et le format monétaire correspondant.
2.DecimalPipe : Le pipe decimal permet de formater les nombres décimaux en fonction du nombre de chiffres
après la virgule. Par exemple :
<p>{{ floatValue | decimal:2 }}</p>
Cela affiche la valeur de floatValue avec deux chiffres après la virgule.
Les exemples ci-dessus ne représentent qu'une petite partie des pipes disponibles en Angular. Vous pouvez
également créer vos propres pipes personnalisés en utilisant la fonction Pipe du module @angular/core.

51
 Approche composant
Pour utiliser un pipe dans un template, vous devez l'ajouter après la variable ou l'expression que vous souhaitez
transformer, en utilisant le caractère | (pipe). Vous pouvez également combiner plusieurs pipes pour effectuer
des transformations successives.
En résumé, les pipes sont utilisés pour transformer et formater les données affichées dans les templates. Ils
permettent d'améliorer la présentation des données en appliquant des transformations telles que la mise en
forme de dates, le formatage des nombres, la conversion de texte, etc.
Exemple:
1. Dans le fichier de composant (`nom-du-composant.component.ts`), déclarez une variable `dateValue` de type
`Date` et initialisez-la avec une valeur :
import { Component } from '@angular/core';

@Component({
selector: 'app-nom-du-composant',
templateUrl: 'nom-du-composant.component.html',
styleUrls: ['nom-du-composant.component.css']
})
export class NomDuComposantComponent {
dateValue: Date = new Date(); 52
}
 Approche composant
2. Dans le fichier de modèle HTML (`nom-du-composant.component.html`), utilisez le pipe `date` pour formater
la valeur de `dateValue` :

<p>Date actuelle : {{ dateValue | date:'dd/MM/yyyy' }}</p>

3. Exécutez votre application Angular et vous verrez la date actuelle formatée dans le format spécifié.
Dans cet exemple, nous utilisons le pipe `date` pour formater la valeur de `dateValue` en utilisant le format
'dd/MM/yyyy'. Le pipe `date` prend en charge plusieurs options de formatage pour afficher les dates selon vos
besoins. Vous pouvez ajuster le format ou utiliser d'autres pipes pour formater d'autres types de données, tels
que les nombres ou le texte.
N'oubliez pas d'importer les modules nécessaires pour utiliser les pipes dans votre composant. Par exemple,
pour utiliser le pipe `date`, vous devez importer `DatePipe` depuis `@angular/common` :

import { DatePipe } from '@angular/common';

Ensuite, vous pouvez ajouter `DatePipe` aux `providers` du composant pour pouvoir l'utiliser :
providers: [DatePipe]
Cela permet d'utiliser le pipe `date` dans votre composant.

53
Les templates Page33

Déclaration
Le template peut être inclus dans les métadonnées du composant (une
bonne solution siletemplateestpetit) ou stockédans un fichierséparéet
référencéviala propriété templateUrl.

L’exemple suivant indique au composant de rechercher le fichier

League.htmldans le dossier app/Viewspour lecodedu template associé
au composant :
Templates et vues Page34

LeHTML <h2>Hero List</h2>

<p>
Un templatedéfini lavueassociéeà <i>Pick a hero from the
un composant. list</i>
Lestemplatessont formés de code </p>
HTML,avecquelques améliorations <ul>
<li *ngFor="let hero of
pour pouvoir les utiliser avecles heroes"
composants Angular. (click)="selectHero(hero)">
La plupart des éléments HTML {{hero.name}} </li>
</ul>
peuvent être utilisés dans un
template,à l'exceptionnotable de la <app-hero-detail
balise<script>,qui seraignorée. De *ngIf="selectedHero"
[hero]="selectedHero">
même,lecodeHTMLdu template </app-hero-detail>
ne doit pascontenir lesbalises :
<html>, <header> et <body>. Exempled’un template
Templates et vues Page35

LeHTML
Un templateestsouvent composéd’une
hiérarchie devues.
Letemplateassociédirectementau
composantestappelé host-view
Lahiérarchiede vuespermet de modifier,
d'afficher etde masquer dessections
entièresde l'interfaceutilisateuren tant
qu'unité.
Un composantpeut intégrer des
vues hébergéespar d'autres
composants.
Une hiérarchiede vuespeut incluredes
vues provenant de composants dans le
même NgModule, ou inclure des vues à
partir de composantsqui sont définis
dans
Templates et data binding Page36

LeHTML

Angular inclut le concept de data

binding, qui consiste essentiellement à
faire communiquer la partie métier
(fichiertypescriptdu composant)avecle
template pour:
• amener les propriétés et les
expressionsdescomposantsdans le
template généré.
• intercepter les interactions de
l’utilisateur avecle templateetleslier
à des méthodes du composant
associé,
Templates et databinding Page37

LeHTML
Sansframework,vousseriezresponsable d’insérer lesvaleursde
données dans lesbalisesHTMLetde transformer lesréponsesdes
utilisateurs en actionsetmisesà jour de valeur.
Écrireune tellelogique push / pull à lamain estfastidieux,sujetteaux
erreurs etun cauchemarà lire, commen'importe quel
programmeur jQuery expérimentépeut en attester.
Angularprend en chargelaliaisonde données bidirectionnelle (two-way
databinding), un mécanismepermettant de coordonner desparties
d'un modèle avecdesparties d'un composant.
Un balisagespécialajouté au codeHTMLpermet d’indiquer à Angular
comment connecterlesdeux côtés.
Templates et Data binding
Page38
Avantages des services Page68

Leserviceenglobe toute valeur, fonction ou fonctionnalitédont

une application a besoin.
Un serviceestgénéralement une classeavecun objectif spécifique
et biendéfini.
Objectif : rendre les classesde composants plus légères et plus
efficaces pour assurer une meilleure expérience utilisateur.➔ Le
travail d’un composant doit se limiter à la liaison entre la vue et
le modèle del’application.
Lesautres tâches(exemple : connexion au serveur) doivent être
déléguées auxservices.
Avantages :
Réutiliserlecode: servicesinjectablesdans plusieurs
composants.
Applicationplus adaptable : injecterdifférents fournisseurs
du même typede service,selon les circonstances.
Faciliter lestests.
Injection des dépendances Page69

Mécanisme permettant d’injecter des services, des fonctions ou des

valeursdans descomposants,desservices,despipes ou des
NgModules. Pour définir une classeen tant que service dans Angular,
on utilise le décorateur @Injectable pour fournir lesmétadonnées qui
permettent à Angularde l'injecteren tant que dépendance.
De même, on utilise le décorateur @Injectable pour indiquer qu'un
composantou une autre classe(telqu'un autre service,un pipe ou
un NgModule) a une dépendance.
L’injectiondesdépendance estune fonctionnalité de basedans Angular.
L'injecteurestle mécanismeprincipal.Angularcréeun injecteur à
l'échelle de l'application pour vous pendant le processus
d'amorçage. L'injecteur gère un conteneur d'instances de
dépendance qu'il a déjà crééesetlesréutilisesi possible.
Un provider est nécessaire pour créer une dépendance. Pour un
service, il s'agitgénéralement de la classede service elle-même.
Fonctionnement de l’Injection des
dépendances Page70

Lorsque Angularcréeune nouvelle instanced'une classede composants,

il détermine les services ou autres dépendances dont cecomposant a
besoin en examinant lestypesde sesparamètres constructeurs.

SiAngulardécouvre qu'un composantdépend d'un service,il

vérifie d'abord sil'injecteur a déjà desinstancesexistantesde ce
service.
Siune instancede servicedemandée n'existepasencore,l'injecteur
crée une instanceen utilisant le provider enregistréetl'ajouteà
l'injecteur
avantde renvoyer le serviceà Angular.
Quand tous lesservicesdemandés ont étérésolus etrenvoyés,
Angular peut appeler le constructeur du composant
aveccesservices en tant qu'arguments.
 Fournir des services Page71

Vous devez enregistrer au moins un provider de tout service que vous

allezutiliser.Vouspouvez enregistrer desproviders dans desmodules ou
dans descomposants.
Enregister un provider dansun Enregister un provider dansun
module : composant:
Si le provider est enregistré au Sileprovider estenregistréau niveau
module root, la même instance du du composant, une nouvelle instance
service est disponible pour tous les du service est créée pour chaque
composants del’application. instance ducomposant.
 Injection des dépendances

Les services :
Les services jouent un rôle important dans le développement d'applications
Angular. Dans ce cours, je vais vous expliquer ce que sont les services en Angular,
à quoi ils servent et comment les utiliser dans vos applications.
Qu'est-ce qu'un service en Angular ?
En Angular, un service est une classe qui peut être utilisée pour partager des
données et des fonctionnalités entre les différentes parties de votre application,
telles que les composants, les directives et les autres services. Les services sont
souvent utilisés pour encapsuler la logique métier de votre application et pour
fournir des services qui sont partagés entre différents composants

64
 Injection des dépendances

A quoi sert un service en Angular ?

Les services en Angular servent à plusieurs choses, notamment :
- Encapsuler la logique métier de votre application : Les services peuvent être
utilisés pour encapsuler la logique métier de votre application, de sorte que vous
pouvez facilement la réutiliser dans différents composants.
- Fournir des données partagées : Les services peuvent être utilisés pour fournir
des données partagées entre différents composants, tels que les données de
configuration, les données de l'utilisateur et les données du cache.
- Fournir des fonctionnalités partagées : Les services peuvent être utilisés pour
fournir des fonctionnalités partagées entre différents composants, tels que les

65
 Injection des dépendances

fonctions d'authentification, les fonctions de validation de formulaire et les

fonctions de gestion des erreurs.
- Faciliter l'intercommunication entre les composants : Les services peuvent être
utilisés pour faciliter l'intercommunication entre les différents composants de
votre application, en fournissant une API commune pour communiquer entre les
composants.
Comment utiliser un service en Angular ?
Pour utiliser un service en Angular, vous devez suivre les étapes suivantes :
1. Créez un service : Vous pouvez créer un service en utilisant la commande "ng
generate service" dans votre terminal, ou en créant manuellement une classe qui
implémente le service.

66
 Injection des dépendances

2. Injectez le service : Pour utiliser le service, vous devez l'injecter dans le

constructeur de votre composant ou de votre directive. Vous pouvez le faire en
utilisant la dépendance du service, qui est un décorateur qui est utilisé pour
injecter le service.
3. Utilisez le service : Une fois que vous avez injecté le service, vous pouvez
l'utiliser dans votre composant ou votre directive en appelant ses méthodes et en
accédant à ses propriétés.
Voici un exemple simple de service qui fournit une fonctionnalité de calculatrice :

67
 Injection des dépendances
import { Injectable } from '@angular/core';
@Injectable({
providedIn: 'root'
})
export class CalculatriceService {
addition(a: number, b: number): number {
return a + b;
}
soustraction(a: number, b: number): number {
return a - b;
}
multiplication(a: number, b: number): number {
return a * b;
}division(a: number, b: number): number {
return a / b;
}}
68
 Injection des dépendances

Dans cet exemple, nous avons créé un service CalculatriceService qui fournit des
méthodes pour effectuer des opérations mathématiques de base. Nous avons
également utilisé le décorateur @Injectable pour injecter le service dans notre
application.
Dans cet exemple, nous avons créé un service CalculatriceService qui fournit des
méthodes pour effectuer des opérations mathématiques de base. Nous avons
également utilisé le décorateur @Injectable pour injecter le service dans notre
application.
Démonstration (dans cet exemple on va introduire la notion des formulaires qu’on verra en
détaille le chapitre suivant):
Création d’une calculatrice d’indice de masse corporelle IMC

69
 Injection des dépendances

La consommation des API REST :

Lecture HTTP (exemple pratique):
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DataService {
private fakeAPIUrl = 'https://jsonplaceholder.typicode.com/todos';
constructor(private http: HttpClient) { }

70
HTTP
Le protocole HTTP (Hypertext Transfer Protocol) est un protocole de communication utilisé pour le transfert de
données sur le Web. Il définit les règles et les conventions pour la demande et la réponse entre un client et un
serveur. Les clients HTTP, tels que les navigateurs Web, envoient des requêtes HTTP aux serveurs Web, qui
renvoient ensuite des réponses contenant les données demandées.
En relation avec Angular, le protocole HTTP est utilisé pour communiquer avec les services Web et récupérer
des données à partir de serveurs distants. Angular fournit un module appelé HttpClient qui facilite l'utilisation
du protocole HTTP dans une application Angular.
Voici comment vous pouvez utiliser le module HttpClient pour effectuer des requêtes HTTP dans Angular :

71
 HTTP
Importez le module HttpClientModule dans le fichier app.module.ts de votre application :
import { HttpClientModule } from '@angular/common/http';
@NgModule({
// ...
imports: [
// ...
HttpClientModule
],
// ...
})
export class AppModule { }
Cela permet d'importer le module HttpClient et de le rendre disponible dans toute l'application.

72
 HTTP
Dans votre composant, importez le service HttpClient depuis @angular/common/http :
import { HttpClient } from '@angular/common/http’;
Injectez le service HttpClient dans le constructeur de votre composant :

constructor(private http: HttpClient) { }

Utilisez les méthodes du service HttpClient pour effectuer des requêtes HTTP. Par exemple, vous pouvez utiliser
la méthode get() pour récupérer des données depuis un serveur distant :
this.http.get('https://api.example.com/data').subscribe((data) => {
// Traitement des données
}, (error) => {
// Gestion des erreurs
});
Le module HttpClient offre une gamme complète de méthodes pour effectuer des requêtes HTTP telles
que get(), post(), put(), delete(), etc. Il prend également en charge l'envoi de données JSON, la gestion
73
des en-têtes HTTP, les requêtes avec authentification, etc.
 HTTP
La lecture:
getData(): Observable<any> {
return this.http.get<any>(this.fakeAPIUrl).pipe(
map(response => response)
);
}
}
Dans cet exemple, nous avons créé un service DataService qui utilise le client
HTTP d'Angular pour lire les données à partir de l'URL de la fausse API. Nous avons
également utilisé le décorateur @Injectable pour injecter le service dans notre
application.
Dans la méthode getData() de ce service, nous avons utilisé la méthode get() du
client HTTP pour effectuer une requête GET à l'URL de la fausse API. Nous avons
également utilisé la fonction pipe() de RxJS pour chaîner un opérateur map() qui
74
transforme la réponse en un objet JavaScript.
HTTP

Ajout http :
voici un exemple de service Angular qui ajoute des données à une URL de fausse
API en utilisant la méthode POST :

75
 HTTP
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root
})
export class DataService {
private fakeAPIUrl = 'https://jsonplaceholder.typicode.com/todos';
constructor(private http: HttpClient) { }
addData(data: any): Observable<any> {
return this.http.post<any>(this.fakeAPIUrl, data).pipe(
map(response => response)
);
76
}}
HTTP
Dans cet exemple, nous avons ajouté une nouvelle méthode addData() au service
DataService qui prend un objet data en entrée et l'envoie à la fausse API en
utilisant la méthode POST. Nous avons également utilisé la méthode post() du
client HTTP pour envoyer l'objet data à l'URL de la fausse API et créer une
nouvelle entrée dans la liste des données.
Nous avons ensuite utilisé la méthode pipe() pour chaîner un opérateur map() qui
transforme la réponse en un objet JavaScript.
Ensuite, nous avons utilisé la méthode map() pour retourner la réponse, qui est
une instance de Observable, que nous pouvons utiliser dans notre composant
pour accéder aux données.
Dans votre composant, vous pouvez utiliser ce service en l'injectant dans le
constructeur et en appelant la méthode addData() avec un objet contenant les
données à ajouter :

77
HTTP
Exemple pratique:
Appliquons les codes d’ajout et affichage sur un mockAPI:
https://mockapi.io/
créons un mockAPI puis appelons le dans un projet pour vérifier l’ajout et l’affichage des données
Exercice :
Faite la même chose avec un objet TODO avec les attributs: titre , description

78
 HTTP
Méthode delete :
voici un exemple de service Angular qui supprime des données d'une URL de
fausse API en utilisant la méthode DELETE :
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DataService {
private fakeAPIUrl = 'https://jsonplaceholder.typicode.com/todos';
constructor(private http: HttpClient) { }
deleteData(id: number): Observable<any> {
return this.http.delete<any>(`${this.fakeAPIUrl}/${id}`).pipe(
map(response => response));}} 79
 HTTP
Méthode delete :
voici un exemple de service Angular qui supprime des données d'une URL de
fausse API en utilisant la méthode DELETE :
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DataService {
private fakeAPIUrl = 'https://jsonplaceholder.typicode.com/todos';
constructor(private http: HttpClient) { }
deleteData(id: number): Observable<any> {
return this.http.delete<any>(`${this.fakeAPIUrl}/${id}`).pipe(
map(response => response));}} 80
 HTTP
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DataService {
private fakeAPIUrl = 'https://jsonplaceholder.typicode.com/todos';
constructor(private http: HttpClient) { }
deleteData(id: number): Observable<any> {
return this.http.delete<any>(`${this.fakeAPIUrl}/${id}`).pipe(
map(response => response)
);
81
}}
 HTTP
import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { map } from 'rxjs/operators';
@Injectable({
providedIn: 'root'
})
export class DataService {
private fakeAPIUrl = 'https://jsonplaceholder.typicode.com/todos';
constructor(private http: HttpClient) { }
deleteData(id: number): Observable<any> {
return this.http.delete<any>(`${this.fakeAPIUrl}/${id}`).pipe(
map(response => response)
);
82
}
HTTP
Exemple pratique :
Supprimer un élément de votre mockAPI

83
Le routing Page81

Les composants du Angular Routing :

Ily a trois composantsprincipaux que nous utilisons pour configurer le
routage dansAngular:
Routes décrit les routes prises en charge par notre application
RouterOutlet estun composant"placeholder" qui indique à Angularoù
placerle contenu de chaque route
LadirectiveRouterLink estutiliséepour lier aux routes
Imports :
Afin d'utiliserle routeur dans Angular, nous importons desconstantes
du package@angular/router:

app.module.ts
Configurer les routes Page82

Remarques :
•path spécifiel'URLque cetteroute va
gérer
• component estcequi lie un chemin
d'accèsdonné à un composantqui
gérera l'itinéraire
•le redirectTo facultatif estutilisépour
rediriger un chemin donné versun
itinéraire existant

app.module.ts
 Installer les routes
Page83

1. Importer RouterModule 2. RouterOutlet : 3. RouterLink :

: <router-outlet> indique oùle
contenudu composantde routesera
rendu
.

app.module.ts

app.component.ts app.component.html
Affecter un style différent au menu
actif
Page84

Affecterlaclassecssàlattribut routerLinkActive.

Pour lesURLsqui peuvent faire partie d’URLsplus longues, on

peut forcer l’af ectation du style uniquement lorsque l’URL
exacte est sélectionnéeà l’aidede [routerLinkActiveOptions]
Naviguer programmatiquement Page85

Import Router from @angular/Router

Injectrouter in
constructor

Utiliserla méthode navigatedu router pour aller versune nouvelle URL:

Stratégie de routing Page86

Lafaçondont l'applicationAngularanalyseetcréedescheminsdepuis
et verslesdéfinitions de routes estappelée stratégiede routing.
Lastratégiepar défaut estPathLocationStrategy, ceque nous appelons
le routage HTML5. En utilisant cette stratégie, les routes sont
représentéespar descheminsréguliers, comme/home ou
/contact.
Nous pouvons changer la stratégie de localisation utilisée pour notre
applicationen liant laclasseLocationStrategy à une nouvelle classe de
stratégieconcrète.
Aulieu d'utiliserlaPathLocationStrategy par défaut, nous pouvons
également utiliserHashLocationStrategy.
La stratégie de hachage peut être choisie pour des raisons de
compatibilitéaveclesanciennesversionsde navigateurs(cheminsavec
#, ancres).
Passer des paramètres dans la route Page87

Pour ajouter un paramètre

à laconfiguration de notre
routeur, nous spécifionsle
cheminde l'itinéraire
comme ceci:

Pour utiliser lesparamètres

de route, nous devons
d'abord importer
ActivatedRoute:

Ensuite,nous injectons
l'ActivatedRoutedans le
constructeurde notre
composant. Par exemple,
disons que nous avons un
itinéraire qui spécifiecequi
 Validation des formularies angular

Introduction:
Un formulaire Angular est un élément clé d'une application Angular qui permet aux utilisateurs d'entrer des données et de les envoyer à un serveur ou de les traiter localement. Les
formulaires Angular sont basés sur la technologie HTML et permettent de collecter des données de manière interactive auprès des utilisateurs.

Les formulaires réactifs :

Les formulaires réactifs fournissent une approche basée sur un modèle pour gérer les entrées de formulaire dont les valeurs changent au fil du
temps. Dans les formulaires réactifs, nous devons importer "ReactiveFormsModule" à partir de la bibliothèque de formulaires angulaires. nous
utiliserons les classes FormControl, FormGroup, FormArray et Validation avec des formulaires réactifs dans les 15 applications angulaires.
Si vous avez des formulaires simples et basiques dans votre application angular 15 alors je préférerai utiliser des formulaires réactifs en
angular. ici j'écris un exemple simple de formulaires réactifs avec validation en angular 15.
Vous devez suivre les étapes ci-dessous pour créer des formulaires réactifs dans angular 15.

Étape 1 : Installer l'application Angular

Ici, dans cette étape, vous devez créer une nouvelle application ng pour cette
démo. si vous avez déjà créé, ne créez pas de nouvelle application angular 15.
ng new my-new-app
Étape 2 : Importer le module de formulaires

Si vous souhaitez créer un formulaire dans une application angulaire, vous devez importer
FormsModule à partir de la bibliothèque @angular/forms. par conséquent, ajoutons le code
suivant au fichier app.module.ts.
src/app/app.module.ts

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

import { BrowserModule } from '@angular/platform- browser';

import { AppComponent } from './app.component';
import { FormsModule, ReactiveFormsModule } from
'@angular/forms';
@NgModule({ declarations: [

AppComponent

],
imports: [ BrowserModule, FormsModule,

ReactiveFormsModule

],

providers: [],

bootstrap: [AppComponent]

})export class AppModule { }

Étape 3 : Formulaire avec ngModel

Dans cette étape, nous allons écrire du code de formulaire html avec
ngModel. par conséquent, ajoutez le code suivant au fichier app.component.html.
src/app/app.component.html
<h1>Angular 15 Reactive Forms Validation Example </h1>
<form [formGroup]="form" (ngSubmit)="submit()">
<div class="form-group">
<label for="name">Name</label>
<input
formControlName="name"
id="name"
type="text"
class="form-control">
<div *ngIf="f['name'].touched &&
f['name'].invalid" class="alert alert-danger">
<div *ngIf="f['name'].errors &&
f['name'].errors['required']">Name is required.</div>
<div *ngIf="f['name'].errors &&
f['name'].errors['minlength']">Name should be 3
character.</div>
</div>
Étape 3 : Formulaire avec ngModel

</div>
<div class="form-group">
<label for="email">Email</label>
<input
formControlName="email"
id="email"
type="text"
class="form-control">
<div *ngIf="f['email'].touched &&
f['email'].invalid" class="alert alert-danger">
<div *ngIf="f['email'].errors &&
f['email'].errors['required']">Email is required.</div>
<div *ngIf="f['email'].errors &&
f['email'].errors['email']">Please, enter valid email
address.</div>
</div>
</div>
<div class="form-group">
<label for="body">Body</label>
<textarea
formControlName="body"
id="body"
Étape 3 : Formulaire avec ngModel

type="text"
class="form-control">
</textarea>
<div *ngIf="f['body'].touched &&
f['body'].invalid" class="alert alert-danger">
<div *ngIf="f['body'].errors &&
f['body'].errors['required']">Body is required.</div>
</div>
</div>
<button class="btn btn-primary"
[disabled]="form.invalid" type="submit">Submit</button>
</form>
Étape 4 : fichier Ts mis à jour

Dans le fichier ts. nous allons écrire submit() et obtenir toutes les valeurs des
champs d'entrée. par conséquent, ajoutons le code suivant au fichier
app.component.ts
Étape 3 : Formulaire avec ngModel

src/app/app.component.ts

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

import { FormGroup, FormControl, Validators} from
'@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
form = new FormGroup({
name: new FormControl('', [Validators.required,
Validators.minLength(3)]),
email: new FormControl('', [Validators.required,
Validators.email]),
body: new FormControl('', Validators.required)
});
get f(){
return this.form.controls;
}submit(){
console.log(this.form.value);}}
Étape 3 : Formulaire avec ngModel

Formulaire basé modèle :

ngular 15 fournit des formulaires et un moyen de gérer les entrées de
l'utilisateur à l'aide de ngModel, ngSubmit. Angular 15 fournit des formulaires
basés sur des modèles et en utilisant des formulaires basés sur des modèles, vous
pouvez créer un formulaire de niveau très simple et basique.
Si vous avez un formulaire simple et basique dans votre application angular 15,
je préférerai utiliser des formulaires basés sur des modèles dans angular
Etape1+2 :
mêmes étape que l’exemple précédent
Étape 3 : Formulaire avec ngModel

Dans cette étape, nous allons écrire le code du formulaire HTML avec
ngModel. ajoutez donc le code suivant au fichier app.component.html.
Étape 3 : Formulaire avec ngModel

<h1>Template Driven</h1>
<form #contactForm="ngForm"
(ngSubmit)="submit(contactForm.value)">
<div class="form-group">
<label for="firstName">First Name</label>
<input required minlength="3" maxlength="10"
ngModel name="firstName" type="text" #firstName="ngModel"
class="form-control" id="firstName">
<div class="alert alert-danger"
*ngIf="firstName.touched && !firstName.valid">
<textarea required ngModel #comment="ngModel"
name="comment" id="comment" cols="30" rows="10"
class="form-control"></textarea>
<div class="alert alert-danger"
*ngIf="comment.touched && !comment.valid">
Comment is required.
</div>
</div>
<button class="btn btn-primary" type="submit"
[class.disabled]="!contactForm.valid">Submit</button>
</form
Étape 4 : fichier Ts mis à jour

Dans son dossier. nous allons écrire submit() et obtenir toutes les valeurs des
champs d'entrée. ajoutons donc le code suivant au fichier app.component.ts.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
submit(form:any){
var firstName = form.firstName;
console.log(firstName);
var lastName = form.lastName;
console.log(lastName);
var comment = form.comment;
console.log(comment);
}
Étape 4 : fichier Ts mis à jour

Dans son dossier. nous allons écrire submit() et obtenir toutes les valeurs des
champs d'entrée. ajoutons donc le code suivant au fichier app.component.ts.
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
submit(form:any){
var firstName = form.firstName;
console.log(firstName);
var lastName = form.lastName;
console.log(lastName);
var comment = form.comment;
console.log(comment);
}
Les formulaires

Exercices :
Exercice1 :
Validation des formulaires réactifs
Dans cet exercice, nous allons créer un formulaire de connexion réactif qui doit inclure une adresse email et
un mot de passe. Les exigences sont les suivantes:
• L'adresse e-mail doit être requise et doit être une adresse e-mail valide.
• Le mot de passe doit être requis et doit comporter au moins 6 caractères.
Voici les étapes pour créer ce formulaire de connexion réactif:
1. Créer un composant pour le formulaire: Tout d'abord, vous devez créer un composant pour le
formulaire. Vous pouvez le faire à l'aide de la commande Angular CLI ng generate component
login-form.
2. Importer ReactiveFormsModule: Importez ReactiveFormsModule dans le fichier du module
associé à votre composant.
3. Créer un formulaire réactif: Dans le fichier HTML de votre composant, vous pouvez créer un
formulaire réactif en utilisant la classe FormGroup. Définissez les champs e-mail et mot de passe
dans votre groupe de formulaire et ajoutez des validateurs requis et de longueur minimale pour
le mot de passe.
4. Configurer la liaison bidirectionnelle des champs: Vous pouvez lier les champs de saisie de
données à leurs valeurs de modèle en utilisant la directive formControlName.
5. Configurer la validation de formulaire: Définissez les messages d'erreur de validation pour les
champs de saisie de données à l'aide de la directive ngIf.
6. Gérer l'événement de soumission: Vous pouvez gérer l'événement de soumission du formulaire
en utilisant la méthode submit() de votre composant.
Les formulaires

Exercice2 :
Validation des formulaires template driven
Créez un formulaire de demande de stage intitulé demande de stage avec :
• Nom*
• Prénom*
• Adresse*
• La date de naissance*
• Code postale *
• Bac+ ? *
• Redoublement
• Email *
• Mot de passe*
• LinkedIn
• Type de stage cherché
Travail à faire :
• Vérifiez que le formulaire assure le suivant :
• Tous les champs avec (*) sont remplis
• Le nom et le prénom ne contiennent que des champs alphabétiques
• Le code postal est numérique de 4 chiffres
Dans cet exercice, nous allons créer un formulaire de demande de stage à validation de modèle piloté.
Nous allons vérifier que tous les champs obligatoires ont été remplis et que les champs nom et prénom
ne contiennent que des caractères alphabétiques, tandis que le code postal est numérique et composé
de 4 chiffres
Les formulaires

Voici les étapes pour créer ce formulaire de demande de stage à validation de modèle piloté:
1. Créez un composant pour le formulaire: Tout d'abord, vous devez créer un composant pour le
formulaire. Vous pouvez le faire à l'aide de la commande Angular CLI ng generate component
stage-form.
2. Importer FormsModule: Importez FormsModule dans le fichier du module associé à votre
composant.
3. Créez un formulaire à modèle piloté: Dans le fichier HTML de votre composant, vous pouvez
créer un formulaire à modèle piloté en utilisant la directive ngModel. Définissez les champs
Nom, Prénom, Adresse, Date de naissance, Code postale, Bac+?, Redoublement, Email, Mot de
passe, LinkedIn et Type de stage cherché dans votre formulaire et ajoutez des validateurs requis
pour les champs obligatoires et les validateurs personnalisés pour les champs nom, prénom et
code postal.
4. Créez les validateurs personnalisés: Dans le fichier TypeScript de votre composant, vous pouvez
créer des validateurs personnalisés pour les champs nom, prénom et code postal. Les
validateurs personnalisés sont des fonctions qui prennent le contrôle du champ et renvoient un
objet de validation qui indique si le champ est valide ou non.
Les formulaires

Le validateur de nom et de prénom : Nous allons créer une fonction alphabetic qui accepte une
chaîne de caractères en entrée et renvoie une valeur de validation qui indique si la chaîne de
caractères ne contient que des caractères alphabétiques. Cette fonction peut être utilisée pour
valider les champs nom et prénom.
6. Le validateur de code postal : Nous allons créer une fonction postalCode qui accepte une chaîne
de caractères en entrée et renvoie une valeur de validation qui indique si la chaîne de caractères
ne contient que 4 chiffres. Cette fonction peut être utilisée pour valider le champ code postal.
7. Configurer la validation de formulaire: Définissez les messages d'erreur de validation pour les
champs de saisie de données à l'aide de la directive ngIf.
8. Gérer l'événement de soumission: Vous pouvez gérer l'événement de soumission du formulaire
en utilisant la méthode submit() de votre composant.
Les formulaires

Le validateur de nom et de prénom : Nous allons créer une fonction alphabetic qui accepte une
chaîne de caractères en entrée et renvoie une valeur de validation qui indique si la chaîne de
caractères ne contient que des caractères alphabétiques. Cette fonction peut être utilisée pour
valider les champs nom et prénom.
6. Le validateur de code postal : Nous allons créer une fonction postalCode qui accepte une chaîne
de caractères en entrée et renvoie une valeur de validation qui indique si la chaîne de caractères
ne contient que 4 chiffres. Cette fonction peut être utilisée pour valider le champ code postal.
7. Configurer la validation de formulaire: Définissez les messages d'erreur de validation pour les
champs de saisie de données à l'aide de la directive ngIf.
8. Gérer l'événement de soumission: Vous pouvez gérer l'événement de soumission du formulaire
en utilisant la méthode submit() de votre composant.
Mini projet

Énoncé du projet : Nous souhaitons créer une application Angular pour gérer une liste d'utilisateurs.
L'application doit permettre de créer de nouveaux utilisateurs, afficher la liste des utilisateurs existants,
mettre à jour les informations d'un utilisateur et supprimer un utilisateur. Les informations des utilisateurs
comprennent leur nom, leur adresse e-mail et leur numéro de téléphone.
Explication : Voici les étapes pour implémenter cette application :
1.Création du projet Angular : Créez un nouveau projet Angular en utilisant la commande suivante dans
votre terminal :
ng new user-management-app
Création du service de gestion des utilisateurs :
Créez un service Angular appelé UserService pour gérer les requêtes HTTP vers
l'API MockAPI. Le service doit inclure des méthodes pour les opérations CRUD :
création d'un utilisateur, récupération de la liste des utilisateurs, mise à
jour d'un utilisateur existant et suppression d'un utilisateur.
Création des composants :
Générez les composants nécessaires pour l'application. Vous pouvez créer des
composants tels que UserListComponent, UserCreateComponent, UserEditComponent et
UserDetailsComponent. Ces composants seront utilisés pour afficher la liste des
utilisateurs, créer un nouvel utilisateur, mettre à jour les informations d'un
utilisateur existant et afficher les détails d'un utilisateur respectivement.
Mini projet

Mise en place du routage :

Configurez le routage dans votre application pour naviguer entre les différentes
pages. Vous pouvez définir les routes dans le fichier app-routing.module.ts en
associant chaque composant à une route spécifique.
Implémentation des fonctionnalités CRUD :
Dans chaque composant, utilisez le service UserService pour effectuer les
opérations CRUD. Par exemple, dans UserListComponent, appelez la méthode du
service pour récupérer la liste des utilisateurs et affichez-la dans le
template. De même, dans UserCreateComponent, appelez la méthode du service pour
créer un nouvel utilisateur à partir des données fournies par l'utilisateur.
Mini projet

Utilisation des formulaires réactifs :

Utilisez les formulaires réactifs d'Angular pour collecter les données des utilisateurs lors de la création ou
de la mise à jour d'un utilisateur. Les formulaires réactifs fournissent une approche plus souple et évolutive
pour la gestion des formulaires dans Angular.

Affichage des données dans les templates :

Utilisez les directives et les interpolations d'Angular pour afficher les données des utilisateurs dans les
templates. Par exemple, vous pouvez utiliser *ngFor pour itérer sur la liste des utilisateurs et afficher
chaque utilisateur dans le tableau.

Stylisation et améliorations supplémentaires :

Ajoutez du style CSS à votre application pour la rendre attrayante. Vous pouvez également ajouter des
fonctionnalités supplémentaires, telles que la pagination des utilisateurs, la recherche d'utilisateurs, etc.,
pour améliorer l'expérience utilisateur.
Internationalisation

L'internationalisation (i18n) est un processus qui permet d'adapter une application à différentes langues et
régions. Dans Angular, vous pouvez mettre en œuvre l'internationalisation en utilisant le module
`@angular/localize` et des fonctionnalités telles que les pipes de formatage de texte, les traductions de
messages et les formats de date et d'heure.

Voici les étapes générales pour mettre en place l'internationalisation dans une application Angular :

1. **Configuration de l'internationalisation** : Dans le fichier `angular.json`, ajoutez les options de

configuration pour l'internationalisation. Vous devez spécifier les langues prises en charge et les fichiers
de traduction correspondants. Par exemple :
Internationalisation

{
"projects": {
"your-project-name": {
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr-FR": "src/locale/messages.fr.xlf"
}
}
}
}
}
Étape 4 : fichier Ts mis à jour

Dans cet exemple, l'application prend en charge la langue par défaut `en-US` et la langue française `fr-FR`.
Les traductions pour la langue française sont stockées dans le fichier `messages.fr.xlf` dans le dossier
`src/locale`.

2. **Marquer les textes à traduire** : Dans les fichiers HTML de votre application, entourez les textes qui
doivent être traduits avec des balises `i18n`. Par exemple :
<h1 i18n="@@welcome">Welcome</h1>
<p i18n="@@greeting">Hello, {{ name }}!</p>
Les balises `i18n` attribuent une clé de traduction unique à chaque texte à traduire. Les clés de traduction,
comme `@@welcome` et `@@greeting`, sont utilisées pour identifier les messages à traduire.
3. **Extraction des messages à traduire** : Utilisez la commande `ng extract-i18n` pour extraire les
messages à traduire à partir des fichiers sources. Par exemple :
ng extract-i18n
Internationalisation

Dans cet exemple, l'application prend en charge la langue par défaut `en-US` et la langue française `fr-FR`.
Les traductions pour la langue française sont stockées dans le fichier `messages.fr.xlf` dans le dossier
`src/locale`.

2. **Marquer les textes à traduire** : Dans les fichiers HTML de votre application, entourez les textes qui
doivent être traduits avec des balises `i18n`. Par exemple :
<h1 i18n="@@welcome">Welcome</h1>
<p i18n="@@greeting">Hello, {{ name }}!</p>
Les balises `i18n` attribuent une clé de traduction unique à chaque texte à traduire. Les clés de traduction,
comme `@@welcome` et `@@greeting`, sont utilisées pour identifier les messages à traduire.
3. **Extraction des messages à traduire** : Utilisez la commande `ng extract-i18n` pour extraire les
messages à traduire à partir des fichiers sources. Par exemple :
ng extract-i18n
Internationalisation

Cela générera un fichier de traduction (`messages.xlf`) contenant les clés de traduction et les textes à
traduire.
4. **Traduction des messages** : Traduisez les messages dans les fichiers de traduction correspondants.
Vous pouvez utiliser un outil de traduction ou éditer les fichiers manuellement. Par exemple, pour la langue
française, modifiez le fichier `messages.fr.xlf` en ajoutant les traductions correspondantes.

5. **Chargement des traductions** : Dans votre application, utilisez le service `TranslateService` pour
charger les fichiers de traduction et activer la langue appropriée. Par exemple :
import { TranslateService } from '@ngx-translate/core';

constructor(private translateService: TranslateService) {

this.translateService.setDefaultLang('en-US');
this.translateService.use('fr-FR');
}
Internationalisation

Cela générera un fichier de traduction (`messages.xlf`) contenant les clés de traduction et les textes à
traduire.
4. **Traduction des messages** : Traduisez les messages dans les fichiers de traduction correspondants.
Vous pouvez utiliser un outil de traduction ou éditer les fichiers manuellement. Par exemple, pour la langue
française, modifiez le fichier `messages.fr.xlf` en ajoutant les traductions correspondantes.

5. **Chargement des traductions** : Dans votre application, utilisez le service `TranslateService` pour
charger les fichiers de traduction et activer la langue appropriée. Par exemple :
import { TranslateService } from '@ngx-translate/core';

constructor(private translateService: TranslateService) {

this.translateService.setDefaultLang('en-US');
this.translateService.use('fr-FR');
}
Étape 4 : fichier Ts mis à jour

Dans cet exemple, nous utilisons `TranslateService` pour définir la langue par défaut sur `en-US` et activer la
langue française `fr-FR`.

6. **Utilisation des traductions** : Utilisez des pipes ou le service `TranslateService` pour afficher les
traductions dans les fichiers HTML de votre application. Par exemple :
<h1>{{ 'welcome' | translate }}</h1>
<p>{{ 'greeting' | translate:{ name: 'John' } }}</p>
Dans cet exemple, nous utilisons le pipe `translate` pour afficher les traductions correspondantes en
utilisant les clés de traduction. Le service `TranslateService` récupère les traductions appropriées en fonction
de la langue active.
7. **Mise à jour de la langue** : Vous pouvez permettre aux utilisateurs de changer la langue de
l'application en utilisant le service `TranslateService` pour mettre à jour la langue active. Par exemple, vous
pouvez ajouter un sélecteur de langue dans votre application qui appelle une fonction pour changer la
langue :
Internationalisation

Dans cet exemple, nous utilisons `TranslateService` pour définir la langue par défaut sur `en-US` et activer la
langue française `fr-FR`.

6. **Utilisation des traductions** : Utilisez des pipes ou le service `TranslateService` pour afficher les
traductions dans les fichiers HTML de votre application. Par exemple :
<h1>{{ 'welcome' | translate }}</h1>
<p>{{ 'greeting' | translate:{ name: 'John' } }}</p>
Dans cet exemple, nous utilisons le pipe `translate` pour afficher les traductions correspondantes en
utilisant les clés de traduction. Le service `TranslateService` récupère les traductions appropriées en fonction
de la langue active.
7. **Mise à jour de la langue** : Vous pouvez permettre aux utilisateurs de changer la langue de
l'application en utilisant le service `TranslateService` pour mettre à jour la langue active. Par exemple, vous
pouvez ajouter un sélecteur de langue dans votre application qui appelle une fonction pour changer la
langue :
changeLanguage(lang: string) {
this.translateService.use(lang);
}
Internationalisation

Lorsque l'utilisateur sélectionne une langue, vous pouvez appeler cette fonction pour mettre à jour la
langue active.

C'est ainsi que vous pouvez mettre en œuvre l'internationalisation dans votre application Angular. Il existe
également des bibliothèques et des packages tels que `@ngx-translate/core` qui facilitent
l'internationalisation dans Angular en fournissant des fonctionnalités supplémentaires et des outils de
traduction.

Assurez-vous d'importer les modules et les dépendances nécessaires dans votre application pour utiliser les
fonctionnalités d'internationalisation. La configuration et les méthodes spécifiques peuvent varier selon la
version d'Angular et les bibliothèques utilisées.
Internationalisation

**Exercice 1: Changement de langue**

Objectif : Permettre à l'utilisateur de changer la langue de l'application en utilisant un sélecteur de langue.

Instructions :
1. Créez un composant `LanguageSelectorComponent` qui affiche un sélecteur de langue, tel qu'une liste
déroulante, avec plusieurs options de langues (par exemple, anglais et français).
2. Utilisez le service `TranslateService` pour mettre à jour la langue active lorsqu'un utilisateur sélectionne
une langue dans le sélecteur.
3. Assurez-vous que la langue active est correctement mise à jour dans toute l'application et que les
traductions correspondantes sont affichées en fonction de la langue sélectionnée
Internationalisation

**Exercice 2: Traduction de textes**

Objectif : Traduire des textes dans l'application en utilisant les clés de traduction et les fichiers de traduction.

Instructions :
1. Dans votre application, identifiez quelques textes qui doivent être traduits, tels que des titres, des libellés
ou des messages.
2. Ajoutez les balises `i18n` appropriées avec des clés de traduction uniques autour de ces textes dans vos
fichiers HTML.
3. Utilisez la commande `ng extract-i18n` pour extraire les messages à traduire et générer un fichier de
traduction.
4. Traduisez les messages dans le fichier de traduction correspondant pour chaque langue prise en charge.
5. Utilisez les pipes de traduction ou le service `TranslateService` pour afficher les traductions dans votre
application en fonction de la langue active.
6. Vérifiez que les textes sont correctement traduits en changeant la langue active et en vous assurant que
les traductions appropriées sont affichées.
Aperçu général des tests sous
Angular
Page96

Toutcommeson prédécesseurAngularJs1,Angulara étéconçuavecla

testabilité commeobjectif principal.
Quand nous parlons de testsdans Angular, nous parlons généralement
de
deux typesde tests différents:
Tests unitaires
Ceciestparfois appelé aussitestisolé. C'estla pratique de tester
de petitsmorceauxde codeisolés.Sivotretestutiliseune
ressource
externe, commeleréseauou une basede données, cen'estpasun
test unitaire.
Tests fonctionels
Ceciestdéfini commele testde la fonctionnalité complèted'une
application. En pratique, avec les applications Web, cela signifie
interagir avecvotreapplication carellefonctionne dans un navigateur,
tout commeun utilisateur interagirait avecelledans la vieréelle,
c'est- à-dire viadesclicssur une page. Ceciestégalementappelé Test
de
Les tests unitaires avec Jasmine & Page97

Karma (1)
Nous pouvons testernos applicationsAngularde toutes piècesen écrivant
eten exécutantdesfonctions javascript pures.

Créerdesinstancesdesclassespertinentes, appeler desfonctions et

vérifier lerésultatréel par rapport au résultat attendu.

Maispuisque testingestune activitésicouranteavecjavascript,il existe

un certainnombre de bibliothèques de testsetde frameworksque
nous pouvons utiliser pour réduire le tempsnécessairepour écriredes
tests.

Deuxoutils etframeworksde cetype qui sont utiliséslors des

tests Angularsont Jasmine et Karma.
 Page98

Les tests unitaires avec Jasmine &

Karma (2)
Jasmine : estun frameworkde testjavascriptqui prend en charge
une pratique de développement logiciel appelée Behaviour Driven
Development, ou BDD en abrégé. C'est une saveur spécifique du
développement piloté par les tests (TDD).
Jasmine,etBDDen général,tente de décrirelestestsdans un
format lisible par l'homme afin que lespersonnes non techniques
puissent comprendre cequi esttesté.
Lalecturedesteststechniquesau format BDD permet de
comprendre plus facilementle coded’une application etfacilite
l’intégrationde
nouveaux membresdans l’équipe.
 Page100

Les tests fonctionnels avec

Protractor (1)
Protractor estune bibliothèque officielleàutiliser
pour écriredessuites de tests E2Eavec une application
Angular. Ce n'est rien d'autre qu'une enveloppe au-
dessus de l'Api WebDriverJS de Selenium qui traduit
son codesuccinctetsesméthodes auxméthodes
WebDriverJS.Celadit, vous pouvezutiliserles
méthodes WebDriverJSaussidansvotrescript e2e.
Déploiement d’une application
Angular
Page101

Déploiement simple :
Lancerlacommande: ng build
Copier le contenu du dossier /dist
Sivouscopiezlesfichiersdans un sous-dossier de serveur, ajoutez
l'indicateur de construction,--base-href etdéfinissez <basehref>
de manière appropriée. Par exemple,siindex.html estsur le
serveur à
/my/app/index.html, définissezla basehref sur <basehref =
"/my/app/"> comme ceci: ng build --base-href=/my/app/
Configurez le serveur pour rediriger lesdemandes de
fichiers manquants versindex.html.

Optimisation pour la version prod :

Lancerla commande: ng build --prod
Déploiement

Déploiement simple :
Lancerlacommande: ng build
Copierlecontenudu dossier/dist
Sivouscopiezlesfichiersdansun sous-dossierdeserveur,ajoutez l'indicateurde
construction,--base-href etdéfinissez<basehref> de manièreappropriée.Parexemple,
siindex.htmlestsurleserveur à
/my/app/index.html, définissezlabasehref sur<basehref =
"/my/app/"> comme ceci: ng build --base-href=/my/app/ Configurezle
serveurpour redirigerlesdemandesdefichiers manquants versindex.html.
Optimisation pour la version prod :
Lancerlacommande: ng build --prod
Pour réduireencorelatailledu bundle,on peututiliser:
ng build --prod --build-optimizer
 Merci
vos questions?

195