Cours 3 : TypeScript et Angular

Applications web et mobile

Christophe Gonzales
 TypeScript

Cours 3 : TypeScript et Angular 2/68

 Généralités sur TypeScript

TypeScript ⊃ JavaScript

=⇒ code JavaScript valide = code TypeScript valide

I Principe d’utilisation :
1 Écrire du code en TypeScript (mon [Link])

2 Le compiler (transpiler) en JavaScript

tsc mon [Link] produit mon [Link]
3 Exécuter le JavaScript produit (mon [Link])

I Ajouts principaux par rapport à Javascript :

I Typage fort =⇒ facilite les débuggages
I Notions orientées objet : interfaces, etc.
I Erreurs à la compilation

Cours 3 : TypeScript et Angular 3/68

 Les types en TypeScript

Cours 3 : TypeScript et Angular 4/68

 Typage fort : une variable ne change pas de type

Cours 3 : TypeScript et Angular 5/68

 Le type any

Cours 3 : TypeScript et Angular 6/68

 Imposer le type d’une variable

Cours 3 : TypeScript et Angular 7/68

 Les tableaux et les tuples

Cours 3 : TypeScript et Angular 8/68

 Les énumérations

Cours 3 : TypeScript et Angular 9/68

 Les fonctions

Cours 3 : TypeScript et Angular 10/68

 Les arrow fonctions

Cours 3 : TypeScript et Angular 11/68

 Les interfaces

Cours 3 : TypeScript et Angular 12/68

 Les constructeurs

Cours 3 : TypeScript et Angular 13/68

 Les modules

I Classe Point définie dans le fichier [Link]

=⇒ accessible uniquement dans [Link]

Modules : étendent les accès à d’autres fichiers

I 2 étapes :
I Exportations :
export class Point {...}

I Importations :
import { Point } from './point';
Après le from, nom du fichier sans l’extension .ts

Module TypeScript/JavaScript 6= module Angular

Cours 3 : TypeScript et Angular 14/68

Cours 3 : TypeScript et Angular 15/68
 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 3 : TypeScript et Angular 16/68

 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 3 : TypeScript et Angular 17/68
 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 3 : TypeScript et Angular 18/68

 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 3 : TypeScript et Angular 19/68

 Génération d’un projet Angular

I ng new mon-projet
⇒ crée le composant app :

I Dans src/app :
I [Link] :
code TypeScript
I [Link] :
pour faire des tests
I [Link] :
template HTML
I Dans src :
I [Link] :
point d’entrée de l’appli

Cours 3 : TypeScript et Angular 20/68

 [Link]

lnsertion du
composant App

Cours 3 : TypeScript et Angular 21/68

 Fonctionnement d’un projet Angular

1 Créer les composants (et les modules)

2 Les compiler

3 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 3 : TypeScript et Angular 22/68

 Le composant App et l’appli servie

Cours 3 : TypeScript et Angular 23/68

 Le TypeScript du composant app

Cours 3 : TypeScript et Angular 24/68

 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 3 : TypeScript et Angular 25/68

 TypeScript du nouveau composant

Cours 3 : TypeScript et Angular 26/68

 Interactions entre le TypeScript et le HTML

Interpolation

Property binding
TypeScript Template
du composant Event binding HTML

Two-way binding

Cours 3 : TypeScript et Angular 27/68

 Interpolation

Cours 3 : TypeScript et Angular 28/68

 Interpolation avec des méthodes

Cours 3 : TypeScript et Angular 29/68

 Property binding

Cours 3 : TypeScript et Angular 30/68

 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 : [disabled]="valeur"

Cours 3 : TypeScript et Angular 31/68

 Event binding

Cours 3 : TypeScript et Angular 32/68

 Two-way binding (1/2)

Cours 3 : TypeScript et Angular 33/68

 Two-way binding (2/2)

Cours 3 : TypeScript et Angular 34/68

 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 [Link]
Cours 3 : TypeScript et Angular 35/68
 Rajout d’un composant Course enfant de Courses (1/2)

Cours 3 : TypeScript et Angular 36/68

 Rajout d’un composant Course enfant de Courses (2/2)

Cours 3 : TypeScript et Angular 37/68

 Passer des paramètres au constructeur de l’enfant (1/2)

Cours 3 : TypeScript et Angular 38/68

 Passer des paramètres au constructeur de l’enfant (2/2)

Cours 3 : TypeScript et Angular 39/68

 Interactions enfant → parent : préparation de l’enfant

Cours 3 : TypeScript et Angular 40/68

 Interactions enfant → parent : l’émetteur de l’enfant

Cours 3 : TypeScript et Angular 41/68

 Interactions enfant → parent : la réception du parent

Cours 3 : TypeScript et Angular 42/68

 Interactions enfant → parent : le résultat

Cours 3 : TypeScript et Angular 43/68

 Résumé des interactions enfant – parent

parent

@Input @Output

enfant

Il existe d’autres types d’interactions (ngOnChanges, etc.)

Cours 3 : TypeScript et Angular 44/68

 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 *

I *ngIf : le composant est utilisé si et seulement si ngIf=true

Cours 3 : TypeScript et Angular 45/68

 La directive *ngFor

Cours 3 : TypeScript et Angular 46/68

 La directive *ngIf

Cours 3 : TypeScript et Angular 47/68

 La directive *ngIf : le résultat

Cours 3 : TypeScript et Angular 48/68

 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 3 : TypeScript et Angular 49/68

 Anatomie d’un service

Cours 3 : TypeScript et Angular 50/68

 Exploitation du service dans le composant Courses

Cours 3 : TypeScript et Angular 51/68

 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 3 : TypeScript et Angular 52/68
 Dependency injection

Cours 3 : TypeScript et Angular 53/68

 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 3 : TypeScript et Angular 54/68

 Mise en place des observables dans le service

Cours 3 : TypeScript et Angular 55/68

 Mise en place des observables dans le composant

Cours 3 : TypeScript et Angular 56/68

 Service HTTP : 1 importer le HttpClientModule

Cours 3 : TypeScript et Angular 57/68

 Service HTTP : 2 notre service utilise HttpClient

Cours 3 : TypeScript et Angular 58/68

 Service HTTP : 3 [Link]

Cours 3 : TypeScript et Angular 59/68

 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 [Link], rajouter :

header("Access-Control-Allow-Origin: *");
Cours 3 : TypeScript et Angular 60/68
 Service HTTP : 3 le bon [Link]

Cours 3 : TypeScript et Angular 61/68

 Service HTTP : le bon résultat

Cours 3 : TypeScript et Angular 62/68

 Service HTTP : 2 HttpClient avec méthode POST

Cours 3 : TypeScript et Angular 63/68

 Service HTTP en résumé

1 Dans [Link] : 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 3 : TypeScript et Angular 64/68

 Navigation : utiliser des routes dans [Link]

Cours 3 : TypeScript et Angular 65/68

 RouterLink : le lien de navigation

Cours 3 : TypeScript et Angular 66/68

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

Cours 3 : TypeScript et Angular 67/68

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

Cours 3 : TypeScript et Angular 68/68