Angular développer des applications .pdf

Formation :
Angular développer des
application web
Formateur
Mr. Lakhdhar Khalil
Directeur de Protech-IT
Contact:khalillakhdharatc@gmail,com
24/03/2023

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

Lakhdhar Khalil
▪ Enseignant à l’université ISET Gabés
▪ Senior consultant chez Oracle northAfricaAnd Middle east
▪ Chefde projet et fondateur de protech-it
▪ Fondateur de l’association barmaja-ma
▪ Auteur de:backless web the full guide (le plus vendu surAmazon catégorie
technology en 2016)
3
Présentation du formateur

Objectifs pédagogiques
4
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

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

Connaissance requise
6
• Connaissances de base en informatique et algorithmique.
• Les bases de Ja
vascript

Bref Historique des technologies front-
end
Naissanc
e de
HTML
1991 1996 2005
CSS Js
1st
generation
NaissancesdeFrameworksXMLHttpReques Frameworks
2006
tspecification Js
2nd
generation
2010
Naissanc
e de
Javascript
1995 2014
HTML5
standard
2015
EcmaScript
6

Angular REACT VUE Svelte
Principaux frameworks Javascript
PlusieursfremeworksJavascriptMVCsontapparusaucoursdesdernières années
www.angular.io www.reactjs.org www
.vue.js www
.svelte.dev

Approche classique vs Approche moderne
Différencesentrelesarchitecturesclassiqueetmodernedesapplications 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 J
AX
pour récupérer les données
nécessaires.

Présentation du framework Angular
Framework Javascript
Développé par Google
Single PageApplications
Open source
Basé sur les composants
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
degénérerdu codeJavascriptstandard
interprétableparun navigateurweb.
• LesfichiersTypeScriptontl'extension.ts et
• Siteofficiel:
letranspilerproduitlesfichiers .js.
• LadernièreversiondeTypescriptestla3.0
sortieenJuilet2018
https:/www.typescriptlang.org/
• https:/github.com/Microsoft/TypeScript

Avantages de Typescript par rapport à
JSES5
(1) Types : String, Number, Boolean, Array,Enums,
Any,Void
Classes : Propriétés, méthodes, constructeur,
héritage…

Avantages de Typescript par rapport à
JSES5
(2D)écorateurs:
Les décorateurs fournissent un moyen
d'ajouter des annotations et de la méta-
programmation pour les déclarations de
classes, méthodes, propriétés…
Imports / Exports de modules:
Les modules en typescript sont
exécutés dans leur propre scope, pas
dans un scope global; cela signifie que
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).

Avantages de Typescript par
rapport à JSES5
(3) Utilitaires de langage :
Fat Arraw function:
Variables instrings MultilineString

Transpilation
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
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éboguervotre
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

Installer Node JSet NPM
GestiondespaquetsNPN
npm estlegestionnairedepaquetspour JavaScriptetleplus
grand registredelogicielsau monde.
npm permetd’instaler,partageretdistrubuer du codesource
npm facilitelagestiondesdépendancesdansvotre projet.

18
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
Introduction

19
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
Introduction

20
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érerdes 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
partagerdes fonctionnalités entre différents composants et services de manière
efficace.
Introduction

21
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'URLpour 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.
Introduction

22
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
Introduction

Hello World App
• InstallerNodeJs(node –v pout vérifiersiune versionestdé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 CSScomme format de feuille de style.
• Lancer leprojet
• Accéderaurépertoirecréé(cd angular-hello-world )
• Compilerleprojetetlancerleserveur(ng serve)
• Accéderauprojetdanslenavigateur(http://localhost:4200 )

Architecture
Thebigpicture
https:/angular.io/guide/architecture

25
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.
Approche composant

26
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
Approche composant

27
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éset 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.
Approche composant

28
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éset 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.
Approche composant

29
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
Approche composant

30
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é.
Approche composant

31
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
efficaceset 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 pours'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>.
Approche composant

32
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>
Approche composant

33
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>
Approche composant

34
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.
Approche composant

35
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.
Approche composant

36
<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.
Approche composant

37
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 :
Approche composant

38
: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.
Dans votre fichier CSS, vous pouvez définir les styles pour les classes "special" et "normal" comme suit :
Approche composant

39
.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.
Approche composant

40
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 ];
Approche composant

NgIf
LadirectivengIf estutiliséelorsquevoussouhaitezafficherou masquer
un élémentenfonctiond'une condition.
Laconditionestdéterminéepar lerésultatdel'expressionque vous
transmettezdansladirective.Silerésultatdel'expressionrenvoieune valeur
false,l'élémentserasupprimé du DOM.
Exemples:

NgStyle
AvecladirectiveNgStyle,vouspouvezdéfinirdespropriétésCSSd'un
élémentDOM donné àpartir d'expressionsAngular.
Lafaçonlaplussimpled'utilisercettedirectiveestdefaire
[style. <Propriété css>] = "valeur"
Exemples :
ValeurStatique ValeurDynamique

NgClass
La directive NgClass,représentée par un
attributngClassdansvotremodèleHTML,
vous permet de définir et de modifier
dynamiquement les classesCSSpour un
élément DOMdonné.
Exemples :
Utilisationsimple

NgFor (1)
Lerôledecettedirectiveestderépéterun élémentDOM donné (ouune
collectiond'élémentsDOM) etdepasserun élémentdu tableauà
chaque itération.
Lasyntaxeest*ngFor = "let item of items".
let item spécifieune variablequi récupèrel’élémentcourant
du tableau;
items faitréférenceàlacollectiond'élémentsdevotrecontrôleur.
Exemple :
Résultat

NgFor (2)
Commentparcourirun tableaud’objets
?
Commentrécupérerl’indexde
l’élémentencours ?

NgNonBindable
NousutilisonsngNonBindablequand nousvoulonsdire àAngulardene
pas compilerou lierune sectionparticulièredenotre page.
Exemple :

Directives personnalisées
Enplusdesdirectivespré-définis par Angular,nouspouvonscréernospropres
directivesàl’aidedu décorateur @Directive.
Créerune directiveressembleàlacréationd’uncomposantavecquelques
différences:
- Lescomposantsont touteslesfonctionnalitésdesdirectivesmaisont aussi
une vue,c’est-à-diredu HTMLqui estinjectédansleDOM lorsquenous
l’utilisons.
. . .
@Directive({ selector:"[ccCardHover]"}) <div class="cardcard-block"ccCardHover>...</div>
class CardHoverDirective{...}

49
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).
Approche composant

50
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 :
Approche composant

51
<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.
Approche composant

52
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();
}
Approche composant

53
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.
Approche composant

Les templates
Déclaration
Le template peut être inclus dans les métadonnées du composant (une
bonne solutionsiletemplateestpetit)ou stockédansun fichierséparéet
référencévialapropriété templateUrl.
L’exemplesuivant indique au composant de rechercher le fichier
League.htmldansledossierapp/Viewspour lecodedu templateassocié
au composant:

Templates et vues
LeHTML
Untemplatedéfini lavueassociéeà
un composant.
Lestemplatessontformésdecode
HTML,avecquelquesaméliorations
pour pouvoir les utiliser avecles
composantsAngular.
La plupart des éléments HTML
peuvent être utilisés dans un
template,àl'exceptionnotabledela
balise<script>,qui seraignorée.De
même,lecodeHTMLdu template
nedoitpascontenirlesbalises:
<html>,<header>et<body>.
<h2>Hero List</h2>
<p>
<i>Pick a hero from the
list</i>
</p>
<ul>
<li *ngFor="let hero of
heroes"
(click)="selectHero(hero)">
{{hero.name}} </li>
</ul>
<app-hero-detail
*ngIf="selectedHero"
[hero]="selectedHero">
</app-hero-detail>
Exempled’untemplate

Templates et vues
LeHTML
Untemplateestsouventcomposéd’une
hiérarchie devues.
Letemplateassociédirectementau
composantestappelé host-view
Lahiérarchiedevuespermetde modifier,
d'afficheretdemasquerdessections
entièresdel'interfaceutilisateurentant
qu'unité.
Uncomposantpeutintégrerdes
vues hébergéespar d'autres
composants.
Unehiérarchiedevuespeutincluredes
vues provenant de composants dans le
même NgModule, ou inclure des vues à
partir decomposantsqui sontdéfinis
dans

Templates et data binding
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
expressionsdescomposantsdansle
templategénéré.
• intercepter les interactions de
l’utilisateuravecletemplateetleslier
à des méthodes du composant
associé,

Templates et databinding
LeHTML
Sansframework,vousseriezresponsabled’insérerlesvaleursde
données danslesbalisesHTMLetdetransformerlesréponsesdes
utilisateursen actionsetmisesàjour de valeur.
Écrireune tellelogiquepush/ pull àlamainestfastidieux,sujetteaux
erreursetun cauchemaràlire,commen'importequel
programmeur jQuery expérimentépeuten attester.
Angularprend enchargelaliaisondedonnéesbidirectionnelle (two-way
databinding),un mécanismepermettantdecoordonner desparties
d'un modèleavecdespartiesd'un composant.
UnbalisagespécialajoutéaucodeHTMLpermetd’indiquer àAngular
commentconnecterlesdeux côtés.

Templates et Data binding

Avantages des services
Leserviceenglobetoutevaleur,fonctionou fonctionnalitédont
une applicationa besoin.
Unserviceestgénéralementune 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
travaild’uncomposantdoit selimiterà laliaisonentrelavueet
le modèle del’application.
Lesautrestâches(exemple: connexionau serveur)doivent être
déléguées auxservices.
Avantages :
Réutiliserlecode: servicesinjectablesdansplusieurs
composants.
Applicationplusadaptable: injecterdifférentsfournisseurs
du mêmetypedeservice,selonles circonstances.
Faciliter lestests.

Injection des dépendances
Mécanisme permettant d’injecter des services, des fonctions ou des
valeursdansdescomposants,desservices,despipesou des
NgModules. Pour définir une classeen tant que service dans Angular,
on utilise le décorateur@Injectable pour fournir lesmétadonnéesqui
permettentà Angulardel'injecterentantque dépendance.
De même, on utilise le décorateur @Injectable pour indiquer qu'un
composantou une autreclasse(telqu'un autreservice,un pipeou
un NgModule)aune dépendance.
L’injectiondesdépendanceestune fonctionnalitédebasedansAngular.
L'injecteurestlemé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épendancequ'il adéjà crééesetlesréutilisesi possible.
Un provider est nécessaire pour créer une dépendance. Pour un
service, ils'agitgénéralementdelaclassedeservice elle-même.

Fonctionnement de l’Injection des
dépendances
LorsqueAngularcréeune nouvelleinstanced'uneclassedecomposants,
il détermine les services ou autres dépendances dont cecomposant a
besoinenexaminantlestypesdesesparamètres constructeurs.
SiAngulardécouvrequ'un composantdépend d'un service,il
vérifie d'abord sil'injecteuradéjàdesinstancesexistantesdece
service.
Siune instancedeservicedemandéen'existepasencore,l'injecteur
crée une instanceenutilisantleprovider enregistréetl'ajouteà
l'injecteur
avantderenvoyerleserviceà Angular.
Quand touslesservicesdemandésont étérésolusetrenvoyés,
Angular peut appeler le constructeur du composant
aveccesservices en tant qu'arguments.

Fournir des services
Vousdevez enregistrer au moins un provider de tout service que vous
allezutiliser.Vouspouvezenregistrerdesprovidersdansdesmodulesou
dans descomposants.
Enregister un provider dansun
module :
Si le provider est enregistré au
module root, la même instance du
service est disponible pour tous les
composants del’application.
Enregister un provider dansun
composant:
Sileproviderestenregistréauniveau
du composant, une nouvelle instance
du service est créée pour chaque
instance ducomposant.

64
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

65
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

66
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.

67
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 :

68
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;
}}

69
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
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

70
La consommation des API REST :
Lecture HTTP (exemple pratique):
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) { }

71
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 :
HTTP

72
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.
HTTP

73
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 :
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
des en-têtes HTTP, les requêtes avec authentification, etc.
HTTP

74
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
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
transforme la réponse en un objet JavaScript.
HTTP

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

76
@Injectable({
providedIn: 'root
})
addData(data: any): Observable<any> {
return this.http.post<any>(this.fakeAPIUrl, data).pipe(
);
}}
HTTP

77
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 :
HTTP

78
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
HTTP

79
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 :
@Injectable({
providedIn: 'root'
})
deleteData(id: number): Observable<any> {
return this.http.delete<any>(`${this.fakeAPIUrl}/${id}`).pipe(
map(response => response));}}
HTTP

80
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 :
@Injectable({
providedIn: 'root'
})
map(response => response));}}
HTTP

81
@Injectable({
providedIn: 'root'
})
);
}}
HTTP

82
@Injectable({
providedIn: 'root'
})
);
}
HTTP

83
Exemple pratique :
Supprimer un élément de votre mockAPI
HTTP

Le routing
Les composants du Angular Routing :
Ilyatroiscomposantsprincipauxque nousutilisonspour configurerle
routage dansAngular:
Routes décrit les routes prises en charge par notre application
RouterOutlet estun composant"placeholder"qui indique àAngularoù
placerlecontenudechaque route
LadirectiveRouterLink estutiliséepour lieraux routes
Imports :
Afind'utiliserlerouteur dansAngular,nousimportons desconstantes
du package@angular/router:
app.module.ts

Configurer les routes
app.module.ts
Remarques :
•path spécifiel'URLque cetterouteva
gérer
• componentestcequi lieun chemin
d'accèsdonné àun composantqui
géreral'itinéraire
•leredirectTo facultatif estutilisépour
redirigerun chemindonné versun
itinéraireexistant

Installer les routes
app.module.ts
2. RouterOutlet :
<router-outlet> indique oùle
contenudu composantderoutesera
rendu
.
1. Importer RouterModule
:
app.component.ts app.component.html
3. RouterLink :

Affecter un style différent au menu
actif
Affecterlaclassecssàlattribut routerLinkActive.
Pour lesURLsqui peuventfairepartied’URLspluslongues,on
peut forcer l’af ectation du style uniquement lorsque l’URL
exacteest sélectionnéeàl’aidede [routerLinkActiveOptions]

Naviguer programmatiquement
ImportRouterfrom @angular/Router
Injectrouterin
constructor
Utiliserlaméthodenavigatedu router pour allerversune nouvelleURL:

Stratégie de routing
Lafaçondont l'applicationAngularanalyseetcréedescheminsdepuis
et verslesdéfinitionsderoutesestappeléestratégiede routing.
Lastratégiepar défaut estPathLocationStrategy, ceque nousappelons
le routage HTML5. En utilisant cettestraté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
applicationenliantlaclasseLocationStrategy àune nouvelleclasse de
stratégieconcrète.
Aulieud'utiliserlaPathLocationStrategy par défaut,nouspouvons
également utiliserHashLocationStrategy.
La stratégie de hachage peut être choisie pour des raisons de
compatibilitéaveclesanciennesversionsdenavigateurs(cheminsavec
#, ancres).

Passer des paramètres dans la route
Pour ajouterun paramètre
àlaconfigurationdenotre
routeur,nous spécifionsle
chemindel'itinéraire
comme ceci:
Pour utiliserlesparamètres
deroute,nousdevons
d'abord importer
ActivatedRoute:
Ensuite,nousinjectons
l'ActivatedRoutedansle
constructeurdenotre
composant. Par exemple,
disons que nous avons un
itinéraire qui spécifiecequi

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
Validation des formularies angular

É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>

</div>
<label for="email">Email</label>
<input
formControlName="email"
id="email"
type="text"
<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>
<label for="body">Body</label>
<textarea
formControlName="body"
id="body"

type="text"
</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

src/app/app.component.ts
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);}}

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
Dans cette étape, nous allons écrire le code du formulaire HTML avec
ngModel. ajoutez donc le code suivant au fichier app.component.html.

<h1>Template Driven</h1>
<form #contactForm="ngForm"
(ngSubmit)="submit(contactForm.value)">
<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

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.
@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.

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 :

{
"projects": {
"your-project-name": {
"i18n": {
"sourceLocale": "en-US",
"locales": {
"fr-FR": "src/locale/messages.fr.xlf"
}
}
}
}
}

Dans cet exemple, l'application prend en charge la langue par défaut èn-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 ì18n`. Par exemple :
<h1 i18n="@@welcome">Welcome</h1>
<p i18n="@@greeting">Hello, {{ name }}!</p>
Les balises ì18n` 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

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');
}

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 :

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);
}

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.

**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

**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
ToutcommesonprédécesseurAngularJs1,Angularaétéconçuavecla
testabilité commeobjectif principal.
Quand nousparlonsdetestsdansAngular,nousparlonsgénéralement
de
deuxtypesdetestsdifférents:
Tests unitaires
Ceciestparfoisappeléaussitestisolé.C'estlapratiquedetester
de petitsmorceauxdecodeisolés.Sivotretestutiliseune
ressource
externe,commeleréseauou une basededonnées,cen'estpasun
test unitaire.
Tests fonctionels
Ceciestdéfini commeletestdelafonctionnalitécomplèted'une
application. En pratique, avecles applications Web, cela signifie
interagiravecvotreapplicationcarellefonctionnedansun navigateur,
toutcommeun utilisateurinteragiraitavecelledanslavieréelle,
c'est- à-dire viadesclicssurune page.CeciestégalementappeléTest
de

Les tests unitaires avec Jasmine &
Karma (1)
NouspouvonstesternosapplicationsAngulardetoutespiècesenécrivant
etenexécutantdesfonctionsjavascript pures.
Créerdesinstancesdesclassespertinentes,appelerdesfonctionset
vérifierlerésultatréelpar rapport aurésultatattendu.
Maispuisquetestingestune activitésicouranteavecjavascript,ilexiste
un certainnombre debibliothèquesdetestsetdeframeworksque
nous pouvonsutiliserpour réduireletempsnécessairepour écriredes
tests.
Deuxoutilsetframeworksdecetypequi sontutiliséslorsdes
tests AngularsontJasmine etKarma.

Les tests unitaires avec Jasmine &
Karma (2)
Jasmine : estun frameworkdetestjavascriptqui prend encharge
une pratique de développement logiciel appelée Behaviour Driven
Development, ou BDD en abrégé. C'estune saveur spécifique du
développement piloté par les tests (TDD).
Jasmine,etBDDengénéral,tentededécrirelestestsdansun
format lisiblepar l'hommeafinque lespersonnesnon techniques
puissent comprendre cequiesttesté.
LalecturedesteststechniquesauformatBDDpermetde
comprendre plusfacilementlecoded’uneapplicationetfacilite
l’intégrationde
nouveauxmembresdans l’équipe.

Les tests fonctionnels avec
Protractor (1)
Protractor estunebibliothèqueofficielleàutiliser
pour écriredessuites de testsE2Eavecune application
Angular. Ce n'est rien d'autre qu'une enveloppe au-
dessus de l'Api WebDriverJSde Selenium qui traduit
son codesuccinctetsesméthodesauxméthodes
WebDriverJS.Celadit,vous pouvezutiliserles
méthodesWebDriverJSaussidansvotrescript e2e.

Déploiement d’une application
Angular
Déploiement simple :
Lancerlacommande: ng build
Copierlecontenudu dossier /dist
Sivouscopiezlesfichiersdansun sous-dossierdeserveur,ajoutez
l'indicateurdeconstruction,--base-href etdéfinissez<basehref>
de manièreappropriée. Parexemple,siindex.htmlestsurle
serveur à
/my/app/index.html, définissezlabasehref sur<basehref =
"/my/app/"> comme ceci: ng build --base-href=/my/app/
Configurezleserveurpour redirigerlesdemandesde
fichiers manquants versindex.html.
Optimisation pour la version prod :
Lancerlacommande: 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/"> commececi:ng build --base-href=/my/app/ Configurezle
serveurpour redirigerlesdemandesdefichiers manquantsversindex.html.
Optimisation pour la version prod :
Lancerlacommande: ng build --prod
Pourréduireencorelatailledu bundle,on peututiliser:
ng build --prod --build-optimizer

Angular développer des applications .pdf

Recommandé

Recommandé

Contenu connexe

Similaire à Angular développer des applications .pdf

Similaire à Angular développer des applications .pdf (20)

Angular développer des applications .pdf