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

contenu principal

contenu 1
menu
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

comp.
barre de navigation App

contenu principal

contenu 1 comp.
comp. comp.
contenu
menu navbar menu
contenu 2 principal

contenu 3
comp.
contenu

=⇒ permet de structurer facilement le code !

Cours 2 : Frontend Angular 4/57

 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

 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

 Interactions entre le TypeScript et le HTML

Interpolation

Property binding
TypeScript Template
du composant Event binding HTML

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

 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

 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

 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

 Interactions enfant → parent : le résultat

Cours 2 : Frontend Angular 29/57

 Résumé des interactions enfant – parent

parent

@Input @Output

enfant

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

 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

 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

 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

 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

 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

 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

 Les liens paramétrés (2/2)

Cours 2 : Frontend Angular 57/57