SlideShare une entreprise Scribd logo
1  sur  126
Télécharger pour lire hors ligne
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
Page3
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
Page4
Angular REACT VUE Svelte
Principaux frameworks Javascript
PlusieursfremeworksJavascriptMVCsontapparusaucoursdesdernières années
www.angular.io www.reactjs.org www
.vue.js www
.svelte.dev
Page5
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.
Page6
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
Page9
Avantages de Typescript par rapport à
JSES5
(1) Types : String, Number, Boolean, Array,Enums,
Any,Void
Classes : Propriétés, méthodes, constructeur,
héritage…
Page10
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).
Page11
Avantages de Typescript par
rapport à JSES5
(3) Utilitaires de langage :
Fat Arraw function:
Variables instrings MultilineString
Page12
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/
Page13
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
Page14
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 )
Page18
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
Page52
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:
Page53
NgSwit ch
Page54
NgStyle
AvecladirectiveNgStyle,vouspouvezdéfinirdespropriétésCSSd'un
élémentDOM donné àpartir d'expressionsAngular.
Lafaçonlaplussimpled'utilisercettedirectiveestdefaire
[style. <Propriété css>] = "valeur"
Exemples :
ValeurStatique ValeurDynamique
Page55
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
Page56
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
Page57
NgFor (2)
Commentparcourirun tableaud’objets
?
Commentrécupérerl’indexde
l’élémentencours ?
Page58
NgNonBindable
NousutilisonsngNonBindablequand nousvoulonsdire àAngulardene
pas compilerou lierune sectionparticulièredenotre page.
Exemple :
Page59
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
Page33
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:
Page34
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
Page35
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
Page36
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é,
Page37
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.
Page38
Templates et Data binding
Page68
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.
Page69
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.
Page70
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.
Page71
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
Injection des dépendances
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
Injection des dépendances
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.
Injection des dépendances
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 :
Injection des dépendances
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;
}}
Injection des dépendances
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
é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
Injection des dépendances
70
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) { }
Injection des dépendances
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 :
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
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
é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
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
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)
);
}}
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 :
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));}}
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 :
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));}}
HTTP
81
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)
);
}}
HTTP
82
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)
);
}
HTTP
83
Exemple pratique :
Supprimer un élément de votre mockAPI
HTTP
Page81
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
Page82
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
Page83
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 :
Page84
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]
Page85
Naviguer programmatiquement
ImportRouterfrom @angular/Router
Injectrouterin
constructor
Utiliserlaméthodenavigatedu router pour allerversune nouvelleURL:
Page86
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).
Page87
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>
É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.
Page96
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
Page97
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.
Page98
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.
Page100
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.
Page101
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
195
Merci
vos questions?

Contenu connexe

Tendances

Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
boulonvert
 
Dot Net Accenture
Dot Net AccentureDot Net Accenture
Dot Net Accenture
Sri K
 

Tendances (20)

VueJS Introduction
VueJS IntroductionVueJS Introduction
VueJS Introduction
 
Support de cours angular
Support de cours angularSupport de cours angular
Support de cours angular
 
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce  Basé sur Spring IOC MVC Security JPA HibernateSite JEE de ECommerce  Basé sur Spring IOC MVC Security JPA Hibernate
Site JEE de ECommerce Basé sur Spring IOC MVC Security JPA Hibernate
 
spring-boot-fr.pdf
spring-boot-fr.pdfspring-boot-fr.pdf
spring-boot-fr.pdf
 
Spring boot
Spring bootSpring boot
Spring boot
 
Un exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHPUn exemple élémentaire d'application MVC en PHP
Un exemple élémentaire d'application MVC en PHP
 
eServices-Chp5: Microservices et API Management
eServices-Chp5: Microservices et API ManagementeServices-Chp5: Microservices et API Management
eServices-Chp5: Microservices et API Management
 
PUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBootPUC SE Day 2019 - SpringBoot
PUC SE Day 2019 - SpringBoot
 
Laravel presentation
Laravel presentationLaravel presentation
Laravel presentation
 
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
Rapport j2ee: Gestion d’un compte bancaire En utilisant les EJB 3.0
 
Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)Sécurité des Applications Web avec Json Web Token (JWT)
Sécurité des Applications Web avec Json Web Token (JWT)
 
Introduction à Angular
Introduction à AngularIntroduction à Angular
Introduction à Angular
 
Angular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHTAngular Framework présentation PPT LIGHT
Angular Framework présentation PPT LIGHT
 
Formation JAVA/J2EE
Formation JAVA/J2EEFormation JAVA/J2EE
Formation JAVA/J2EE
 
Cours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdfCours Devops Sparks.pptx.pdf
Cours Devops Sparks.pptx.pdf
 
Node js for beginners
Node js for beginnersNode js for beginners
Node js for beginners
 
TP2 RMI
TP2 RMITP2 RMI
TP2 RMI
 
Dot Net Accenture
Dot Net AccentureDot Net Accenture
Dot Net Accenture
 
Servlets et JSP
Servlets et JSPServlets et JSP
Servlets et JSP
 
Ionic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,SassIonic, AngularJS,Cordova,NodeJS,Sass
Ionic, AngularJS,Cordova,NodeJS,Sass
 

Similaire à Angular développer des applications .pdf

Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
inesrdissi60
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
ENSIBS
 

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

Support cours angular
Support cours angularSupport cours angular
Support cours angular
 
Cours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrrCours n°1.1-Introduction.pdf angularrrrr
Cours n°1.1-Introduction.pdf angularrrrr
 
Angular 11
Angular 11Angular 11
Angular 11
 
CV REBAI Hamida
CV REBAI HamidaCV REBAI Hamida
CV REBAI Hamida
 
Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"Asp.net Présentation de L'application "Organizer"
Asp.net Présentation de L'application "Organizer"
 
Presentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub FoundationPresentation du socle technique Java open source Scub Foundation
Presentation du socle technique Java open source Scub Foundation
 
Introduction au Framework AngularJs
Introduction au Framework AngularJsIntroduction au Framework AngularJs
Introduction au Framework AngularJs
 
Scub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libreScub Foundation, usine logicielle Java libre
Scub Foundation, usine logicielle Java libre
 
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
Agile Tour Paris 2014 : Ma stack d'outils Agiles, tout un programme !, Cedric...
 
jQuery vs AngularJS
jQuery vs AngularJS jQuery vs AngularJS
jQuery vs AngularJS
 
Cours 1 introduction
Cours 1 introductionCours 1 introduction
Cours 1 introduction
 
Angluars js
Angluars jsAngluars js
Angluars js
 
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3 ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
ENIB 2013-2014 - CAI Web #1: Côté navigateur 3/3
 
PRESENTATION_webclient.pptx
PRESENTATION_webclient.pptxPRESENTATION_webclient.pptx
PRESENTATION_webclient.pptx
 
Conférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG MontpellierConférence Titanium + Alloy au JUG Montpellier
Conférence Titanium + Alloy au JUG Montpellier
 
Web gl
Web gl Web gl
Web gl
 
Architecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et XamarinArchitecturez vos applications mobiles avec Azure et Xamarin
Architecturez vos applications mobiles avec Azure et Xamarin
 
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
Etude rapide sur les frameworks Front-end (AngularJS vs *JS)
 
Introduction à Angular 2
Introduction à Angular 2Introduction à Angular 2
Introduction à Angular 2
 
Calculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stackCalculus System Academy:Devenez un développeur Full stack
Calculus System Academy:Devenez un développeur Full stack
 

Plus de imenhamada17 (7)

Présentation_wafa-hamada-utilastion safe internet children.pptx
Présentation_wafa-hamada-utilastion safe internet children.pptxPrésentation_wafa-hamada-utilastion safe internet children.pptx
Présentation_wafa-hamada-utilastion safe internet children.pptx
 
SUJET SUR veracrypt REALISE PAR -imen.pptx
SUJET SUR veracrypt REALISE PAR -imen.pptxSUJET SUR veracrypt REALISE PAR -imen.pptx
SUJET SUR veracrypt REALISE PAR -imen.pptx
 
Support_cours_certification_LPIC1-102.pdf
Support_cours_certification_LPIC1-102.pdfSupport_cours_certification_LPIC1-102.pdf
Support_cours_certification_LPIC1-102.pdf
 
الحملة الوطنية العنف-الاسري-و-الرقمي.pptx
الحملة الوطنية العنف-الاسري-و-الرقمي.pptxالحملة الوطنية العنف-الاسري-و-الرقمي.pptx
الحملة الوطنية العنف-الاسري-و-الرقمي.pptx
 
تعريف العنف الرقمي ايجابياته و سلبياته.pptx
تعريف العنف الرقمي ايجابياته و سلبياته.pptxتعريف العنف الرقمي ايجابياته و سلبياته.pptx
تعريف العنف الرقمي ايجابياته و سلبياته.pptx
 
ppt sur la Méthode Agile (adaptative).pdf
ppt sur la Méthode Agile (adaptative).pdfppt sur la Méthode Agile (adaptative).pdf
ppt sur la Méthode Agile (adaptative).pdf
 
ppt sur Le langage de modélisation UML.pdf
ppt sur  Le langage de modélisation UML.pdfppt sur  Le langage de modélisation UML.pdf
ppt sur Le langage de modélisation UML.pdf
 

Angular développer des applications .pdf

  • 1. Formation : Angular développer des application web Formateur Mr. Lakhdhar Khalil Directeur de Protech-IT Contact:khalillakhdharatc@gmail,com 24/03/2023
  • 2. 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
  • 3. 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
  • 4. 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
  • 5. Public concerné 5 ▪ Développeurs back-end ▪ Assistant ▪ Full stack web developpers
  • 6. Connaissance requise 6 • Connaissances de base en informatique et algorithmique. • Les bases de Ja vascript
  • 7. Page3 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
  • 8. Page4 Angular REACT VUE Svelte Principaux frameworks Javascript PlusieursfremeworksJavascriptMVCsontapparusaucoursdesdernières années www.angular.io www.reactjs.org www .vue.js www .svelte.dev
  • 9. Page5 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.
  • 10. Page6 Présentation du framework Angular Framework Javascript Développé par Google Single PageApplications Open source Basé sur les composants Développé avec Typescript
  • 11. 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
  • 12. Page9 Avantages de Typescript par rapport à JSES5 (1) Types : String, Number, Boolean, Array,Enums, Any,Void Classes : Propriétés, méthodes, constructeur, héritage…
  • 13. Page10 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).
  • 14. Page11 Avantages de Typescript par rapport à JSES5 (3) Utilitaires de langage : Fat Arraw function: Variables instrings MultilineString
  • 15. Page12 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/
  • 16. Page13 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
  • 17. Page14 Installer Node JSet NPM GestiondespaquetsNPN npm estlegestionnairedepaquetspour JavaScriptetleplus grand registredelogicielsau monde. npm permetd’instaler,partageretdistrubuer du codesource npm facilitelagestiondesdépendancesdansvotre projet.
  • 18. 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. 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. 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. 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. 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
  • 23. 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 )
  • 25. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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
  • 41. Page52 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:
  • 43. Page54 NgStyle AvecladirectiveNgStyle,vouspouvezdéfinirdespropriétésCSSd'un élémentDOM donné àpartir d'expressionsAngular. Lafaçonlaplussimpled'utilisercettedirectiveestdefaire [style. <Propriété css>] = "valeur" Exemples : ValeurStatique ValeurDynamique
  • 44. Page55 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
  • 45. Page56 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
  • 47. Page58 NgNonBindable NousutilisonsngNonBindablequand nousvoulonsdire àAngulardene pas compilerou lierune sectionparticulièredenotre page. Exemple :
  • 48. Page59 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. 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. 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. 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. 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. 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
  • 54. Page33 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:
  • 55. Page34 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
  • 56. Page35 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
  • 57. Page36 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é,
  • 58. Page37 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.
  • 60. Page68 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.
  • 61. Page69 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.
  • 62. Page70 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.
  • 63. Page71 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. 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 Injection des dépendances
  • 65. 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 Injection des dépendances
  • 66. 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. Injection des dépendances
  • 67. 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 : Injection des dépendances
  • 68. 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; }} Injection des dépendances
  • 69. 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 é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 Injection des dépendances
  • 70. 70 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) { } Injection des dépendances
  • 71. 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. 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. 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 : 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 des en-têtes HTTP, les requêtes avec authentification, etc. HTTP
  • 74. 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 é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 transforme la réponse en un objet JavaScript. HTTP
  • 75. 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. 76 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) ); }} HTTP
  • 77. 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. 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. 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 : 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));}} HTTP
  • 80. 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 : 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));}} HTTP
  • 81. 81 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) ); }} HTTP
  • 82. 82 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) ); } HTTP
  • 83. 83 Exemple pratique : Supprimer un élément de votre mockAPI HTTP
  • 84. Page81 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
  • 85. Page82 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
  • 86. Page83 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 :
  • 87. Page84 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]
  • 89. Page86 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).
  • 90. Page87 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
  • 91. 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
  • 92. É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 { }
  • 93. É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>
  • 94. É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"
  • 95. É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
  • 96. É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);}}
  • 97. É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.
  • 98. É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
  • 99. É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); }
  • 100. É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); }
  • 101. 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.
  • 102. 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
  • 103. 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.
  • 104. 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.
  • 105. 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.
  • 106. 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.
  • 107. 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.
  • 108. 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.
  • 109. 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 :
  • 110. Internationalisation { "projects": { "your-project-name": { "i18n": { "sourceLocale": "en-US", "locales": { "fr-FR": "src/locale/messages.fr.xlf" } } } } }
  • 111. É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
  • 112. 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
  • 113. 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'); }
  • 114. 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'); }
  • 115. É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 :
  • 116. 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); }
  • 117. 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.
  • 118. 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
  • 119. 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.
  • 120. Page96 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
  • 121. Page97 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.
  • 122. Page98 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.
  • 123. Page100 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.
  • 124. Page101 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
  • 125. 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