Cours Introductif sur Angular 15

1. Cours 2 : Frontend
Web — Applications web et mobile
Christophe Gonzales
Qu’est-ce qu’Angular
I Framework pour construire des applications clientes
=⇒ front-end
I Structure l’application
=⇒ simplifie programmation/maintenance/débuggage
I Mise en place de tests simple
I Utilise TypeScript/Javascript, HTML, CSS
Cours 2 : Frontend Angular 2/57
Structure d’une appplication Angular
Affichage de la page web :
barre de navigation
menu
contenu principal
contenu 1
contenu 2
contenu 3
I Affichage =⇒ structure
I Chaque rectangle = composant Angular
I Intérêt des composants : réutilisables plusieurs fois
I Un composant peut en inclure d’autres
Cours 2 : Frontend Angular 3/57
Logique de l’application : arbre de composants
barre de navigation
menu
contenu principal
contenu 1
contenu 2
contenu 3
comp.
navbar
comp.
menu
comp.
contenu
principal
comp.
App
comp.
contenu
=⇒ permet de structurer facilement le code!
Cours 2 : Frontend Angular 4/57

2. Contenu d’un composant Angular
Un composant Angular contient essentiellement :
1 un fichier TypeScript contenant :
I les données du composant
I la logique/le comportement du composant
2 un fichier html
I contenant le code HTML affiché par le browser
I des instructions pour interagir avec le code TypeScript
3 un fichier css contenant le style propre au composant
I Répertoire src/app contient les composants
I 1 composant principal appelé app ou root
Cours 2 : Frontend Angular 5/57
Génération d’un projet Angular
I ng new mon-projet
⇒ crée le composant app :
I Dans src/app :
I app.component.ts :
code TypeScript
I app.component.spec.ts :
pour faire des tests
I app.component.html :
template HTML
I Dans src :
I index.html :
point d’entrée de l’appli
Cours 2 : Frontend Angular 6/57
Index.html
lnsertion du
composant App
Cours 2 : Frontend Angular 7/57
Fonctionnement d’un projet Angular
1 Créer les composants (et les modules)
2 Les insérer dans l’application via des balises dans
les fichiers HTML
Exemple : <app-root></app-root>
I Pour compiler et servir votre application :
ng serve
Cours 2 : Frontend Angular 8/57

3. Le composant App et l’appli servie
Cours 2 : Frontend Angular 9/57
Le TypeScript du composant app
Cours 2 : Frontend Angular 10/57
Création d’un nouveau composant
I Utiliser la commande ng generate component courses
=⇒ crée un répertoire courses et des fichiers spécifiques
Cours 2 : Frontend Angular 11/57
TypeScript du nouveau composant
Cours 2 : Frontend Angular 12/57

4. Interactions entre le TypeScript et le HTML
TypeScript
du composant
Template
HTML
Interpolation
Property binding
Event binding
Two-way binding
Cours 2 : Frontend Angular 13/57
Interpolation
Cours 2 : Frontend Angular 14/57
Interpolation avec des méthodes
Cours 2 : Frontend Angular 15/57
Property binding
Cours 2 : Frontend Angular 16/57

5. Différence entre interpolation et property binding
I Interpolation {{}} :
Permet de transférer des données du TypeScript n’importe
où dans le template HTML
Évalué à runtime!
I Property binding [] :
Permet de mettre des valeurs dans les propriétés des
éléments du DOM
Exemple intéressant : [hidden]=valeur
Cours 2 : Frontend Angular 17/57
Event binding
Cours 2 : Frontend Angular 18/57
Two-way binding (1/2)
Cours 2 : Frontend Angular 19/57
Two-way binding (2/2)
Cours 2 : Frontend Angular 20/57

6. Interactions TypeScript-template HTML en résumé
Uniquement de TypeScript vers le template HTML :
I Property Binding : [propriété]=valeur
affecte des valeurs aux propriétés d’éléments du DOM
I Interpolation : {{ champ ou méthode }}
à utiliser quand on ne peut pas faire de property binding
Uniquement du template HTML vers le TypeScript :
I Event binding : (event)=”méthode()”
Appelle la méthode quand un événement du DOM arrive
Dans les deux sens :
I Two-way binding : [(ngModel)]=”valeur”
ne pas oublier d’importer FormsModule dans app.module.ts
Cours 2 : Frontend Angular 21/57
Rajout d’un composant Course enfant de Courses (1/2)
Cours 2 : Frontend Angular 22/57
Rajout d’un composant Course enfant de Courses (2/2)
Cours 2 : Frontend Angular 23/57
Passer des paramètres au constructeur de l’enfant (1/2)
Cours 2 : Frontend Angular 24/57

7. Passer des paramètres au constructeur de l’enfant (2/2)
Cours 2 : Frontend Angular 25/57
Interactions enfant → parent : préparation de l’enfant
Cours 2 : Frontend Angular 26/57
Interactions enfant → parent : l’émetteur de l’enfant
Cours 2 : Frontend Angular 27/57
Interactions enfant → parent : la réception du parent
Cours 2 : Frontend Angular 28/57

8. Interactions enfant → parent : le résultat
Cours 2 : Frontend Angular 29/57
Résumé des interactions enfant – parent
parent
enfant
@Input @Output
Il existe d’autres types d’interactions (@ViewChild, etc.)
Cours 2 : Frontend Angular 30/57
Listes de cours
Insérer une liste de cours dans l’appli :
1 Créer un composant Cours
2 Stocker la liste des cours dans le composant Courses
3 Dans le template de Courses, itérer l’insertion des cours
avec la directive *ngFor
Toutes les directives (*ngFor, *ngIf, etc.) débutent par une *
Peut nécessiter l’inclusion de CommonModule
dans app.module.ts
I *ngIf : le composant est utilisé si et seulement si ngIf=true
Cours 2 : Frontend Angular 31/57
La directive *ngFor
Cours 2 : Frontend Angular 32/57

9. La directive *ngIf
Cours 2 : Frontend Angular 33/57
La directive *ngIf : le résultat
Cours 2 : Frontend Angular 34/57
Les services : providers de données
I Actuellement : UE stockées en dur dans composant Courses
I Vraie application : UE récupérées d’un serveur
: les services récupèrent les données
I Créer un service : ng generate service nom service
I Utiliser le service comme n’importe quelle classe
Cours 2 : Frontend Angular 35/57
Anatomie d’un service
Cours 2 : Frontend Angular 36/57

10. Exploitation du service dans le composant Courses
Cours 2 : Frontend Angular 37/57
Exploitation du service : bonnes et mauvaises idées
Bonne idée :
I Faire en sorte que le constructeur connaisse le service
Mauvaises idées :
I Demander au constructeur de créer l’instance
I Plusieurs composants =⇒ plusieurs instances
I Modif du constructeur du service =⇒ modif du composant
I Utiliser le service dans le constructeur
=⇒ délais dans les affichages
Bonne pratique des services :
I Dependency injection
I Utiliser le service dans méthode ngOnInit
Cours 2 : Frontend Angular 38/57
Dependency injection
Cours 2 : Frontend Angular 39/57
Asynchronie et observables
I Service actuel : synchrone
=⇒ ngOnInit doit attendre les données
I Services HTTP : asynchrones
=⇒ évite de bloquer les affichages
Utilisation de services asynchrones :
1 Le service retourne tout de suite un Observable
2 ngOnInit appelle le service et récupère l’observable
3 ngOnInit souscrit à l’observable en donnant une callback
4 ngOnInit continue son exécution
5 Les données arrivent =⇒ l’observable émet une valeur
=⇒ la callback est appelée
Cours 2 : Frontend Angular 40/57

11. Mise en place des observables dans le service
Cours 2 : Frontend Angular 41/57
Mise en place des observables dans le composant
Cours 2 : Frontend Angular 42/57
Service HTTP : 1 importer le HttpClientModule
Cours 2 : Frontend Angular 43/57
Service HTTP : 2 notre service utilise HttpClient
Cours 2 : Frontend Angular 44/57

12. Service HTTP : 3 getCourses.php
Cours 2 : Frontend Angular 45/57
Service HTTP : Résultat
I Cross-Origin Resource Sharing (CORS) :
I Requête cross-origine : provient de localhost :4200
accède à localhost :80
=⇒ CORS refuse la requête
I Contre-mesure : dans getCourses.php, rajouter :
header(Access-Control-Allow-Origin: *);
Cours 2 : Frontend Angular 46/57
Service HTTP : 3 le bon getCourses.php
Cours 2 : Frontend Angular 47/57
Service HTTP : le bon résultat
Cours 2 : Frontend Angular 48/57

13. Service HTTP : 2 HttpClient avec méthode POST
Cours 2 : Frontend Angular 49/57
Service HTTP : 3 méthode POST et session
Cours 2 : Frontend Angular 50/57
Service HTTP : 4 problème et solution
I Contre-mesures : dans getCourses.php :
header(Access-Control-Allow-Origin: .
$_SERVER['HTTP_ORIGIN']);
header(Access-Control-Allow-Credentials: true);
Cours 2 : Frontend Angular 51/57
Service HTTP en résumé
1 Dans app.module.ts : importer le HttpClientModule
2 Faire ng generate service mon service
3 mon service importe la classe HttpClient
4 Constructeur de mon service : dependency injection
de HttpClient
5 Méthodes qui appellent get ou post de HttpClient
=⇒ renvoient des observables
6 Composant client importe le service
7 Dans son ngOnInit, on récupère les observables et on y souscrit
Le code dépendant des données est dans la callback
en paramètre de subscribe
Cours 2 : Frontend Angular 52/57

14. Navigation : les routes dans app-routing.module.ts
Cours 2 : Frontend Angular 53/57
Navigation : AppRoutingModule dans app.module.ts
Cours 2 : Frontend Angular 54/57
RouterLink : le lien de navigation
Cours 2 : Frontend Angular 55/57
Les liens paramétrés (1/2)
Cours 2 : Frontend Angular 56/57

15. Les liens paramétrés (2/2)
Cours 2 : Frontend Angular 57/57