Télécharger en tant que PDF, PPTX
![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](https://image.slidesharecdn.com/cours2poly4-220921215546-807888d2/85/Cours-Angular-5-320.jpg)
![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](https://image.slidesharecdn.com/cours2poly4-220921215546-807888d2/85/Cours-Angular-6-320.jpg)
![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](https://image.slidesharecdn.com/cours2poly4-220921215546-807888d2/85/Cours-Angular-13-320.jpg)
Cours Angular
- 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 composantAngular 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 Appet 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 leTypeScript 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 interpolationet 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 HTMLen 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ètresau 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 Cours2 : 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 servicedans 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 placedes 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 : lesroutes 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