Téléchargé 37 fois
![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](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-38-2048.jpg)
![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](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-40-2048.jpg)
![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](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-43-2048.jpg)
![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{...}](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-48-2048.jpg)
![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](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-52-2048.jpg)
![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](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-53-2048.jpg)
![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](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-55-2048.jpg)
![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](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-72-2048.jpg)
![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]](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-87-2048.jpg)
![É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 { }](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-92-2048.jpg)
![É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>](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-93-2048.jpg)
![É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"](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-94-2048.jpg)
![É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](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-95-2048.jpg)
![É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);}}](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-96-2048.jpg)
![É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](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-98-2048.jpg)
![É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);
}](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-99-2048.jpg)
![É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);
}](https://image.slidesharecdn.com/supportangular-240209101430-6c1b1966/75/Angular-developper-des-applications-pdf-100-2048.jpg)
Contenu connexe
Similaire à Angular développer des applications .pdf
Angular développer des applications .pdf
- 1. Formation : Angular développerdes application web Formateur Mr. Lakhdhar Khalil Directeur de Protech-IT Contact:khalillakhdharatc@gmail,com 24/03/2023
- 2. Introduction JavaScript ES5, ES6et 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éveloppeursback-end ▪ Assistant ▪ Full stack web developpers
- 6. Connaissance requise 6 • Connaissancesde base en informatique et algorithmique. • Les bases de Ja vascript
- 7. Page3 Bref Historique destechnologies 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 VUESvelte Principaux frameworks Javascript PlusieursfremeworksJavascriptMVCsontapparusaucoursdesdernières années www.angular.io www.reactjs.org www .vue.js www .svelte.dev
- 9. Page5 Approche classique vsApproche 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 frameworkAngular Framework Javascript Développé par Google Single PageApplications Open source Basé sur les composants Développé avec Typescript
- 11. Présentation de Typescript • Conçupar 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 Typescriptpar rapport à JSES5 (1) Types : String, Number, Boolean, Array,Enums, Any,Void Classes : Propriétés, méthodes, constructeur, héritage…
- 13. Page10 Avantages de Typescriptpar 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 Typescriptpar rapport à JSES5 (3) Utilitaires de langage : Fat Arraw function: Variables instrings MultilineString
- 15. Page12 Transpilation TypeScript est reconvertien 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 fichiersMap 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 JSetNPM GestiondespaquetsNPN npm estlegestionnairedepaquetspour JavaScriptetleplus grand registredelogicielsau monde. npm permetd’instaler,partageretdistrubuer du codesource npm facilitelagestiondesdépendancesdansvotre projet.
- 18. 18 Angular est unframework 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 unframework 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 Lescomposants 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 permetde 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 Angularfournit 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 )
- 24.
- 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 Lameilleure 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 lenom 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 lenom 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’uncomposant (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 ducomposant) : • 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 seproduisent 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 valeursavec 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 valeursavec 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 lesexpressions 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()">Deletehero</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 enstyle: 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: 1pxsolid 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éationd’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:
- 42.
- 43. Page54 NgStyle AvecladirectiveNgStyle,vouspouvezdéfinirdespropriétésCSSd'un élémentDOM donné àpartird'expressionsAngular. Lafaçonlaplussimpled'utilisercettedirectiveestdefaire [style. <Propriété css>] = "valeur" Exemples : ValeurStatique ValeurDynamique
- 44. Page55 NgClass La directive NgClass,représentéepar 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émentDOMdonné (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
- 46.
- 47. Page58 NgNonBindable NousutilisonsngNonBindablequand nousvoulonsdire àAngulardene pascompilerou lierune sectionparticulièredenotre page. Exemple :
- 48. Page59 Directives personnalisées Enplusdesdirectivespré-définis parAngular,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 fichierde 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 pipessont 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 unpipe 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 lefichier 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 templatepeut ê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éfinilavueassocié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érarchiedevues. 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 databinding 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éesdanslesbalisesHTMLetdetransformerlesré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.
- 59. Page38 Templates et Databinding
- 60. Page68 Avantages des services Leserviceenglobetoutevaleur,fonctionoufonctionnalité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écanismepermettant 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’Injectiondes 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 Vousdevezenregistrer 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 : Lesservices 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 sertun 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, lesfonctions 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 leservice : 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 desAPI 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 moduleHttpClientModule 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 : voiciun 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 lescodes 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 : voiciun 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 : voiciun 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 : Supprimerun élément de votre mockAPI HTTP
- 84. Page81 Le routing Les composantsdu 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 stylediffé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]
- 88. Page85 Naviguer programmatiquement ImportRouterfrom @angular/Router Injectrouterin constructor Utiliserlaméthodenavigatedurouter pour allerversune nouvelleURL:
- 89. Page86 Stratégie de routing Lafaçondontl'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ètresdans 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 Angularest 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 : Validationdes 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 validateurde 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 validateurde 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é duprojet : 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 enplace 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 desformulaires 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) estun 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 unfichier 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 unfichier 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électionneune 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: Changementde 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: Traductionde 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 destests 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 unitairesavec 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 unitairesavec 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 fonctionnelsavec 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éploiementsimple : 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
- 126.