Vous êtes sur la page 1sur 86

Angular

Walid HAMMAMI
ISET Gafsa 2020

1
Plan
• Présentation d’Angular

2
Introduction à ECMAScript 2015+
• Ce qu’on appelle JavaScript (JS) est une des implémentations d’une
spécification standardisée, appelée ECMAScript.
• La version de la spécification la plus connus est probablement la
version 5 : c’est celle utilisée depuis de nombreuses années.
• En 2015, une nouvelle version de cette spécification a été validée :
ECMAScript 2015, ES2015, ou ES6, puisque c’est la sixième version de
cette spécification.
• depuis une nouvelle version chaque année (ES2016, ES2017, etc.),
avec à chaque fois quelques nouvelles fonctionnalités.

3
Suite
• Le nom le plus populaire est ES2015, ES2015+ pour parler de ES2016,
ES2017…
• Elle ajoute une tonne de fonctionnalités à JavaScript, comme les
classes, les constantes, les arrow functions, les générateurs…

4
Transpileur
• La sixième version de la spécification a atteint son état final en 2015.
• Il est donc supporté par les navigateurs modernes, mais il y a encore
des navigateurs qui ne supportent pas toute la spécification, ou qui la
supportent seulement partiellement.
• certains navigateurs seront toujours en retard.
• Solution : Transpileur.
• Un transpileur prend du code source ES2015+ en entrée et génère du
code ES5, qui peut tourner dans n’importe quel navigateur.

5
Exemple de Transpileur
• Traceur, un projet Google, historiquement le premier, mais
maintenant non-maintenu.
• Babeljs, un projet démarré par Sebastian McKenzie, un jeune
développeur de 17 ans (oui, ça fait mal), et qui a reçu beaucoup de
contributions extérieures.
• Le code source d’Angular était d’ailleurs transpilé avec Traceur, avant
de basculer en TypeScript (1).
(1)- TypeScript est un langage open source développé par Microsoft. C’est un sur-ensemble typé de JavaScript
qui compile vers du JavaScript standard, mais nous étudierons cela très bientôt

6
Limite de Transpileur
• Transpileur prendra les fichiers sources ES2015+ et générera
l’équivalent en ES5.
• Ça fonctionne très bien mais, évidemment, certaines fonctionnalités
nouvelles sont difficiles voire impossibles à transformer, parce qu’elles
n’existent tout simplement pas en ES5.
• Néanmoins, l’état d’avancement actuel de ces transpileurs est
largement suffisant pour les utiliser sans problèmes.

7
• Jetons un coup d’oeil à ces nouveautés ES2015+.

8
let
• La déclaration de variable avec var peut être délicate.
• Dans à peu près tous les autres langages, une variable existe à partir
de la ligne contenant la déclaration de cette variable.
• Mais en JS, il y a un concept nommé hoisting ("remontée") qui
déclare la variable au tout début de la fonction, même si tu l’as écrite
plus loin.

9
Suite let
• Ainsi, déclarer une variable • est équivalent à la déclarer tout
name dans le bloc if : en haut de la fonction :

10
• ES2015 introduit un nouveau • L’accès à la variable name est
mot-clé pour la déclaration de maintenant restreint à son bloc.
variable, let, qui se comporte let a été pensé pour remplacer
enfin comme on pourrait s’y définitivement var à long terme,
attendre : donc tu peux abandonner ce bon
vieux var au profit de let.

11
Constantes
• ES2015 introduit aussi const
pour déclarer des… constantes !
• Si tu déclares une variable avec
const, elle doit obligatoirement
être initialisée, et tu ne pourras
plus lui affecter de nouvelle
valeur par la suite.

Comme pour les variables déclarées avec let, les constantes ne sont pas hoisted
("remontees") et sont bien déclarées dans leur bloc

12
Suite constante
• Il y a un détail qui peut • Mais tu ne peux pas assigner à la
cependant surprendre le constante un nouvel objet :
profane. Tu peux initialiser une
constante avec un objet et
modifier par la suite le contenu
de l’objet.

13
Raccourcis pour la création d’objets
• Il y a un nouveau raccourci pour créer des objets, quand la propriété
de l’objet que tu veux créer a le même nom que la variable utilisée
comme valeur pour l’attribut.
• Exemple :

14
Suite
• peut être simplifié en :

15
• Tu peux aussi utiliser un autre raccourci, quand tu veux déclarer une
méthode dans un objet :

16
Affectations déstructurées
• Il y a maintenant un raccourci pour affecter des variables à partir
d’objets ou de tableaux.

• Maintenant, en ES2015, tu peux écrire :

17
Affectation déstructurées - Tableau
• Et la même chose est possible avec des tableaux :

18
Paramètres optionnels et valeurs par défaut
• JS a la particularité de permettre aux développeurs d’appeler une
fonction avec un nombre d’arguments variable :
• si tu passes plus d’arguments que déclarés par la fonction, les arguments
supplémentaires sont tout simplement ignorés (pour être tout à fait exact, tu
peux quand même les utiliser dans la fonction avec la variable spéciale
arguments).
• si tu passes moins d’arguments que déclarés par la fonction, les paramètres
manquants auront la valeur undefined

19
• Ce dernier cas est celui qui nous intéresse. Souvent, on passe moins
d’arguments quand les paramètres sont optionnels, comme dans
l’exemple suivant :

• undefined, 0, false, "",

• Les paramètres optionnels ont la plupart du temps une valeur par


défaut.
• L’opérateur OR (||) va retourner l’opérande de droite si celui de
gauche est undefined (undefined, 0, false, "", etc)

20
• ES2015 offre désormais une façon plus formelle de déclarer des
paramètres optionnels, dès la déclaration de la fonction :

• Maintenant il est limpide que la valeur par défaut de size sera 10 et


celle de page sera 1 s’ils ne sont pas fournis.

21
Rest operator
• ES2015 introduit aussi une nouvelle syntaxe pour déclarer un nombre
variable de paramètres dans une fonction.
• ES2015 propose une syntaxe bien meilleure, grâce au rest operator …
("opérateur de reste").

22
• nombres est désormais un véritable tableau, sur lequel on peut itérer.
La boucle for … of utilisée pour l’itération est aussi une nouveauté
d’ES2015.
• Elle permet d’être sûr de n’itérer que sur les valeurs de la collection,
et non pas sur ses propriétés comme for … in

23
Classes
• Une des fonctionnalités les plus emblématiques, et qui va largement
être utilisée dans l’écriture d’applications Angular : ES2015 introduit
les classes en JavaScript ! Tu pourras désormais facilement faire de
l’héritage de classes en JavaScript.

24
• Les déclarations de classes, contrairement aux déclarations de fonctions, ne
sont pas hoisted ("remontées"), donc tu dois déclarer une classe avant de
l’utiliser.
• Tu as probablement remarqué la fonction spéciale constructor. C’est le
constructeur, la fonction appelée à la création d’un nouvel objet avec le mot-
clé new.
• Dans l’exemple, il requiert le nom et prénom, et nous créons une nouvelle
instance de la classe Etudiant avec la nom « HAMMAMI » et prénom
« Idriss>.
• Une classe peut aussi avoir des méthodes, appelables sur une instance,
comme la méthode toString() dans l’exemple.
25
• Une classe peut aussi avoir des attributs et des méthodes statiques :

26
• Une classe peut avoir des accesseurs (getters, setters), si tu veux
implémenter du code sur ces opérations :

27
Héritage

28
Callbacks en JS
• Callbacks sont généralement utilisés pour exécuter un morceau de
code après qu'un certain événement s'est produit.
• Exemple d’événements :
• Clique sur lien / bouton
• Fin d’enregistrement des données dans la base de données
• Fin d’exécution d’un programme
• …
• Une fonction callback est généralement une fonction anonyme (une
fonction déclarée sans nom) qui est transmise directement à la
fonction réceptrice en tant que paramètre.
29
setTimeout
• Le méthode setTimeout définit une action à exécuter et un délai
avant son exécution.

• Exemple

30
clearTimeout
• Cette méthode interrompt le délai et l'exécution du code associé à ce
délai. Le processus à supprimer est reconnu par l'identifieur retourné
par setTimeout.

• Remarque : setInterval déclenche une opération à intervalles


réguliers.

31
Promises
• L’objectif des promises est de simplifier la programmation
asynchrone.
• Le code JS est plein d’asynchronisme, comme des requêtes AJAX, et
en général on utilise des callbacks pour gérer le résultat et l’erreur.
• Une promesse est comme un contrat: elle indique qu'une valeur sera
disponible à l'avenir lorsqu'une opération de longue durée sera
terminée.

32
Suite
• Les promises sont plus pratiques que les callbacks, parce qu’elles
permettent d’écrire du code à plat, et le rendent ainsi plus simple à
comprendre.
• Une promise a trois états :
• pending ("en cours") : quand la promise n’est pas réalisée, par exemple
quand l’appel serveur n’est pas encore terminé.
• fulfilled ("réalisée") : quand la promise s’est réalisée avec succès, par exemple
quand l’appel HTTP serveur a retourné un status 200-OK.
• rejected ("rejetée") : quand la promise a échoué, par exemple si l’appel HTTP
serveur a retourné un status 404-NotFound.

33
Exemple
• Exemple avec setTimeout

34
Promise : Catch erreur

35
Arrow functions ("fonction fléchée")
• La nouvelle syntaxe arrow function ("fonction flèche"), utilisant
l’opérateur fat arrow ("grosse flèche") : ⇒.
• C’est très utile pour les callbacks et les fonctions anonymes !
• Syntaxe

36
Exemple

37
Map
• On utilisait jusque-là de simples objets JavaScript pour jouer le rôle de
map ("dictionnaire"), c’est à dire un objet JS standard, dont les clés
étaient nécessairement des chaînes de caractères.
• Mais nous pouvons maintenant utiliser la nouvelle classe Map :

38
Set
• On a aussi une classe Set ("ensemble") :

39
Suite Set
• Tu peux aussi itérer sur une collection, avec la nouvelle syntaxe for …
of :

40
Async/await
• Cette fonctionnalité n’est pas introduite par ECMAScript 2015 mais
par ECMAScript 2017, et pour utiliser await, la fonction doit être
marquée comme async.
• Quand tu utilises le mot-clé await devant une promesse, tu pauses
l’exécution de la fonction async, attends la résolution de la promesse,
puis reprends l’exécution de la fonction async.
• La valeur retournée est la valeur résolue par la promesse.

41
Exemple await/async

42
Modules
• Objectif : fournir un mécanisme pour diviser les programmes
JavaScript en plusieurs modules qu'on pourrait importer les uns dans
les autres.

43
Suite Module

44
TypeScript
• TypeScript, qui existe depuis 2012, est un sur-ensemble de JavaScript,
ajoutant quelques trucs à ES5.
• Le plus important étant le système de type, lui donnant même son nom.
• Depuis la version 1.5, sortie en 2015, cette bibliothèque essaie d’être un
sur-ensemble d’ES2015+, incluant toutes les fonctionnalités vues
précédemment, et quelques nouveautés, comme les décorateurs.
• Par convention les fichiers sources TypeScript ont l’extension .ts, et
seront compilés en JavaScript standard, en général lors du build, avec le
compilateur TypeScript.
• Installation : npm install -g typescript
45
Les types de TypeScript
• La syntaxe pour ajouter des informations de type en TypeScript est basique :
• let variable: type;
• Exemple : let nom:string;
• Les types de base supporté par TypeScript
• number : un nombre flottant (ex. : 1.5) ;
• string : une chaîne de caractères
• boolean : une simple valeur pouvant être vraie (true) ou fausse (false );
• any : un type désignant « n’importe quel type de données »;
• void : un type désignant du vide, rien, aucune valeur, souvent utilisé pour préciser qu’une
fonction/méthode ne retourne
• enum : un type de données permettant de créer son propre type de données exemple : enum Color
{Red, Green, Blue}) ;
• Array : un tableau pouvant contenir toutes sortes d’éléments (ex. : [10,true, "google"] ).
• null et undefined : équivalent des types null et undefined JavaScript.

46
• Le type peut aussi être défini dans ton application, avec par exemple
la classe suivante Etudiant :
• const etudiant: Etudiant = new Etudiant();
• TypeScript supporte aussi ce que certains langages appellent des
types génériques, par exemple avec un Array :
• const etudiants: Array< Etudiant > = [new Etudiant()];
• Cet Array ne peut contenir que des étudiants, ce qu’indique la
notation générique <>.

47
Suite – Les Types
• Et comment faire si tu as besoin d’une variable pouvant recevoir
plusieurs types ? TS a un type spécial pour cela, nommé any.

• C’est pratique si tu ne connais pas le type d’une valeur, soit parce


qu’elle vient d’un bout de code dynamique, ou en sortie d’une
bibliothèque obscure.

48
Suite –Les types
• Si ta variable ne doit recevoir que des valeurs de type number ou
boolean, tu peux utiliser l’union de types :

49
Valeurs énumérées (enum)
• TypeScript propose aussi des valeurs énumérées : enum. Par exemple,
un jour de travail peut être soit lundi, mardi, mercredi, jeudi ou
vendredi.

50
Return types
• Tu peux aussi spécifier le type de retour d’une fonction :

• Si la fonction ne retourne rien, tu peux le déclarer avec void :

51
Interfaces
• Le moyen le plus simple de voir comment les interfaces fonctionnent
est de commencer par un exemple simple:

• labelObj doit être un objet contenant une propriété appelé label

52
Suite - Interface
• Nous pouvons à nouveau écrire le même exemple, cette fois en
utilisant une interface pour décrire l'exigence d'avoir la propriété label
qui est une chaîne:

53
Paramètre optionnel
• Pour montrer qu’un paramètre est optionnel dans une fonction (ou
une propriété dans une interface), tu ajoutes ? après le paramètre. Ici,
le paramètre « b » est optionnel :

54
Des fonctions en propriété
• Tu peux aussi décrire un paramètre comme devant posséder une
fonction spécifique plutôt qu’une propriété :

• La définition de cette interface serait :

55
56
Classes

57
Décorateurs
• Cette fonctionnalité a été ajoutée en TypeScript 1.5, en partie pour le
support d’Angular.
• Un décorateur est une façon de faire de la métaprogrammation.
• Ils ressemblent beaucoup aux annotations, qui sont principalement
utilisées en Java, C#, et Python
• Les décorateurs sont vraiment puissants: ils peuvent modifier leur
cible (classes, méthodes, etc.) et par exemple modifier les paramètres
ou le résultat retourné, appeler d’autres méthodes quand la cible est
appelée, ou ajouter des métadonnées destinées à un framework
(c’est ce que font les décorateurs d’Angular).
58
• En Angular, on utilisera les annotations fournies par le framework.
• Leur rôle est assez simple: ils ajoutent des métadonnées à nos classes,
propriétés ou paramètres pour par exemple indiquer "cette classe est
un composant", "cette dépendance est optionnelle", "ceci est une
propriété spéciale du composant", etc.
• En TypeScript, les annotations sont préfixées par @, et peuvent être
appliquées sur une classe, une propriété de classe, une fonction, ou
un paramètre de fonction.
• Pas sur un constructeur en revanche, mais sur ses paramètres oui.

59
Exemple Décorateur

60
• Selon ce sur quoi nous voulons appliquer notre décorateur, la fonction
n’aura pas exactement les mêmes arguments. Ici nous avons un
décorateur de méthode, qui prend 3 paramètres :
• target : la méthode ciblée par notre décorateur
• name : le nom de la méthode ciblée
• descriptor : le descripteur de la méthode ciblée, par exemple est-ce que la
méthode est énumérable, etc.

61
Web Component
• Ils reposent sur un ensemble de standards émergents, que les
navigateurs ne supportent pas encore parfaitement.
• Ce standard émergent est défini dans trois spécifications :
• Custom elements ("éléments personnalisés")
• Shadow DOM ("DOM de l’ombre")
• Template

62
Custom elements
• Les éléments customs sont un nouveau standard qui permet au
développeur de créer ses propres éléments du DOM, faisant de <ns-
pony></ns-pony> un élément HTML parfaitement valide.
• DOM (Document Object Model): When a web page is loaded, the
browser creates a Document Object Model of the page.

63
DOM

64
Présentation d’Angular
• Angular a été créé en 2009 par Miško Hevery et Adam Abrons dans
une entreprise nommé Brat Tech LLC.
• Angular était initialement destiné à faire partie d'un JSON en ligne
service de stockage, mais ce concept a été abandonné et Angular a
été libéré monde open-source.
• Adam Abrons a depuis quitté le projet, mais Hevery continue travailler
sur le projet.
• Hevery est devenu employé par Google, qui est maintenant
étroitement associé à Angular.

65
• Angular est un framework orienté composant.
• Un composant est un groupe d’éléments HTML, dans un template,
dédiés à une tâche particulière.
• Pour cela, tu auras probablement besoin d’un peu de logique métier
derrière ce template, pour peupler les données, et réagir aux
événements par exemple.
• Les composants seront organisés de façon hiérarchique, comme le
DOM : un composant racine aura des composants enfants, qui auront
chacun des composants enfants, etc.

66
Single-page Applications SPA
• Single-page Application représentent la dernière évolution de la
conception Web.
• L'idée derrière les SPA, tout le code nécessaire peut être récupéré en
un seul chargement de page ou chargé dynamiquement si nécessaire.
• Lorsque l'utilisateur interagit avec l'application, les données est
envoyé et reçu du serveur à l'aide de requêtes Ajax.
• Cela offre une expérience utilisateur plus fluide que les recharges de
page et ressemble plus à une application native.

67
• Certaines des caractéristiques communes des SPA seront maintenant
explorées :

68
Installation
• Qu’est-ce que le CLI ?
• Le CLI, ou “Command Line Interface” (un outil permettant d'exécuter des
commandes depuis la console), d’Angular est l’outil qui vous permet d’exécuter des
scripts pour la création, la structuration et la production d’une application Angular.
• Vous devez installer les outils suivants si vous ne les avez pas déjà sur
votre machine :
• NODE.JS : Téléchargez et installez la dernière version LTS de Node.js ici :
• https://nodejs.org/en/download/
• NPM: NPM est un package manager qui permet l’installation d’énormément
d’outils et de libraries dont vous aurez besoin pour tout type de développement.
Pour l’installer, ouvrez une ligne de commande et tapez la commande suivante :
• npm install -g npm@latest

69
• ANGULAR/CLI : vous allez maintenant installer le CLI d’Angular de manière globale
sur votre machine avec la commande suivante (avec sudo si besoin) :
• npm install -g @angular/cli
• À partir de là, la commande ng est disponible depuis la ligne de commandes depuis
n’importe quel dossier de l’ordinateur.

70
Créez votre premier projet
• Pour créer un nouveau projet Angular, naviguez vers le dossier souhaité
depuis une ligne de commande et saisissez la commande suivante :
• ng new mon-premier-projet
• Ensuite, naviguez dans le dossier du projet et lancez le serveur de
développement :
• cd mon-premier-projet
• ng serve --open
• Si tout se passe bien, vous verrez les informations du serveur qui se lance
à l'adresse localhost:4200 et votre navigateur préféré se lancera
automatiquement avec le message "Welcome to app!!" et le logo Angular.

71
Les composants
• Les components sont les composantes de base d'une application
Angular : une application est une arborescence de plusieurs
components.
• Tes composants seront organisés de façon hiérarchique, comme le
DOM : un composant racine aura des composants enfants, qui auront
chacun des composants enfants, etc.
• Imaginez la page web suivante :

72
73
• Tout d'abord, AppComponent est le component principal : tous les
autres components de l’application seront emboîtés ou "nested" dans
celui-ci.
• Pour cette structure, on peut imaginer un component pour la barre de
menu, un autre pour la partie contenu et un dernier pour le menu à
droite.

74
Structure d’un projet Angular
• Le CLI crée énormément de fichiers au moment de la création d'une
nouvelle application.
• Le dossier e2e : les tests “End to end” permettent de vérifier des
scénarios complets et complexes, comprenant l’ensemble des flux.
• Dossier node_modules : contient toutes les dépendances pour
l’application : les fichiers source Angular et TypeScript, par exemple.
• Le dossier qui nous intéressera principalement est le dossier src , où
vous trouverez tous les fichiers sources pour votre application.

75
Fichier index.html
• Pour commencer à comprendre la structure d'une application
Angular, ouvrez index.html dans votre éditeur :

76
• Comme vous pouvez le constater, au lieu d'y voir tout le contenu que
nous voyons dans le navigateur, il n'y a que cette balise vide <app-
root> : il s'agit d'une balise Angular. Pour en savoir plus, ouvrez le
dossier app :
Ce dossier contient le module
principal de l'application et les
trois fichiers du component
principal AppComponent :
son template en HTML, sa
feuille de styles en CSS, et son
fichier TypeScript, qui
contiendra sa logique.

77
app.component.html

Ici, vous voyez le code


HTML correspondant à ce
que vous voyez dans votre
navigateur.

78
app.component.ts

79
Décorateur : @Component
• Ici, à l'intérieur du décorateur @Component() , vous trouvez un objet
qui contient les éléments suivants :
• selector : l s'agit du nom qu'on utilisera comme balise HTML pour
afficher ce component, comme vous l'avez vu avec <app-root> . Ce
nom doit être unique et ne doit pas être un nom réservé HTML de type
<div> , <body> etc. On utilisera donc très souvent un préfixe comme
app , par exemple ;
• templateUrl : le chemin vers le code HTML à injecter ;
• styleUrls : un array contenant un ou plusieurs chemins vers les feuilles
de styles qui concernent ce component ;

80
• Quand Angular rencontre la balise <app-root> dans le document
HTML, il sait qu'il doit en remplacer le contenu par celui du template
app.component.html , en appliquant les styles
app.component.css , le tout géré par la logique du fichier
app.component.ts .
• Exercice : modifier la variable title dans app.component.ts ,
d'enregistrer le fichier, et de regarder le résultat dans votre
navigateur.

81
package.json
• Le premier que tu reconnais peut-être est le fichier package.json :
C’est là que sont définies les dépendances de l’application. Tu peux
regarder à l’intérieur, il devrait contenir les dépendances suivantes
(entre autres) :
• les différents packages @angular.
• rxjs, une bibliothèque pour la programmation réactive.
• zone.js, qui assure la plomberie pour détecter les changements,
• quelques dépendances pour développer l’application, comme la CLI,
TypeScript, des bibliothèques de tests, des typings…

82
Fichier de configuration TypeScript

83
Créez un component
• Pour créer un nouveau component à l'aide du CLI d'Angular, depuis le dossier principal de
votre projet, tapez la commande suivante :
• ng generate component menu

• Comme vous le constaterez, le CLI a créé un nouveau sous-dossier menu et y a créé un


fichier template, une feuille de styles, un fichier component et un fichier spec : il s'agit d'un
fichier de test que vous pouvez supprimer

84
app.module.ts
• Le CLI nous prévient également qu'il a mis à jour le fichier
app.module.ts : ouvrez-le maintenant pour voir de quoi il s'agit :

85
86

Vous aimerez peut-être aussi