Qu’est-ce qu’Angular

 Framework pour construire des applications clientes

=⇒ front-end

 Structure l’application
=⇒ simplie programmation/maintenance/débuggage

 Mise en place de tests simple

 Utilise TypeScript/Javascript, HTML, CSS

Cours 2 : Frontend Angular 2/57

Structure d’une appplication Angular Logique de l’application : arbre de composants

Afchage de la page web :
comp.
barre de navigation barre de navigation App

contenu principal contenu principal

contenu 1 contenu 1 comp.

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

contenu 3 contenu 3
comp.
contenu
 Afchage =⇒ structure
 Chaque rectangle = composant Angular
 Intérêt des composants : réutilisables plusieurs fois =⇒ permet de structurer facilement le code !
 Un composant peut en inclure d’autres
Cours 2 : Frontend Angular 3/57 Cours 2 : Frontend Angular 4/57
 Contenu d’un composant Angular

Un composant Angular contient essentiellement :

1 un chier TypeScript contenant :

 les données du composant
 la logique/le comportement du composant

2 un chier html
 contenant le code HTML afché par le browser
 des instructions pour interagir avec le code TypeScript

3 un chier css contenant le style propre au composant

 Répertoire src/app contient les composants

 1 composant principal appelé app ou root

Cours 2 : Frontend Angular 5/57

Index.html 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 chiers HTML
Exemple : <app-root></app-root>

lnsertion du
composant App
 Pour compiler et  servir  votre application :
ng serve

Cours 2 : Frontend Angular 7/57 Cours 2 : Frontend Angular 8/57

 Le composant App et l’appli servie Le TypeScript du composant app

Cours 2 : Frontend Angular 9/57 Cours 2 : Frontend Angular 10/57

Création d’un nouveau composant TypeScript du nouveau composant

 Utiliser la commande ng generate component courses
=⇒ crée un répertoire courses et des chiers spéciques

Cours 2 : Frontend Angular 11/57 Cours 2 : Frontend Angular 12/57

 Interactions entre le TypeScript et le HTML Interpolation

Interpolation

Property binding
TypeScript Template
du composant Event binding HTML

Two-way binding

Cours 2 : Frontend Angular 13/57 Cours 2 : Frontend Angular 14/57

Interpolation avec des méthodes Property binding

Cours 2 : Frontend Angular 15/57 Cours 2 : Frontend Angular 16/57

 Différence entre interpolation et property binding Event binding

 Interpolation {{}} :
Permet de transférer des données du TypeScript n’importe
où dans le template HTML
Évalué à runtime !

 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 Cours 2 : Frontend Angular 18/57

Two-way binding (1/2) Two-way binding (2/2)

Cours 2 : Frontend Angular 19/57 Cours 2 : Frontend Angular 20/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 (2/2) Interactions enfant → parent : préparation de l’enfant

Cours 2 : Frontend Angular 25/57 Cours 2 : Frontend Angular 26/57

 La directive *ngFor

Cours 2 : Frontend Angular 32/57

 La directive *ngIf

Cours 2 : Frontend Angular 33/57

Anatomie d’un service

Cours 2 : Frontend Angular 36/57

 Mise en place des observables dans le service

Cours 2 : Frontend Angular 41/57

Service HTTP : 1 importer le HttpClientModule Service HTTP : 2 notre service utilise HttpClient

Cours 2 : Frontend Angular 43/57 Cours 2 : Frontend Angular 44/57

 Service HTTP : 3 getCourses.php

Cours 2 : Frontend Angular 45/57

Service HTTP : 3 le bon getCourses.php

Cours 2 : Frontend Angular 47/57

 Service HTTP : 2 HttpClient avec méthode POST Service HTTP : 3 méthode POST et session

Cours 2 : Frontend Angular 49/57 Cours 2 : Frontend Angular 50/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 Navigation : AppRoutingModule dans app.module.ts

Cours 2 : Frontend Angular 53/57 Cours 2 : Frontend Angular 54/57

RouterLink : le lien de navigation Les liens paramétrés (1/2)

Cours 2 : Frontend Angular 55/57 Cours 2 : Frontend Angular 56/57