ANGULAR
Simulations réalisées
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 1
Angular
ü Est un framework permettant de développer le frontend d’une
application web
ü Se base sur SPA (Single Page Application)
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 2
Versions d’Angular
ü Angular JS: 2010
ü Basé sur MVC
ü Utilise Javascript
ü Angular : 2016
ü Basé sur MVC
ü Utilise Type script (il est compilé et traduit en JS)
ü Est un langage OO
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 3
ü Node js (pour utiliser npm) - Installation
https://nodejs.org/en
Vérifier l’installation du node js: node -v
Vérifier l’installation du node js: npm –v
Vérifier l’installation du angular: ng -v
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 4
ü Angular - Installation
Mac:
sudo npm install -g @angular/cli
Windows / Linux:
npm install -g @angular/cli
Ou en spécifiant la version
npm install -g @angular/cli@11
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 5
ü Angular - Désinstallation
Mac:
sudo npm uninstall -g @angular/cli
Windows / Linux:
npm uninstall -g @angular/cli
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 6
ü Créer un nouveau projet:
ng new my-first-project
Répondre par : Yes pour les deux questions
ng new my-first-project --minimal --style=css
ü Accéder au projet:
cd my-first-project
ü Lancer le projet:
ng serve
Permet de compiler et convertir le code source (écrit en TypeScript) en JS et démarrer le serveur
ü Ouvrir le lien:
http://localhost:4200/
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 7
Erreurs:
S’il y a une erreur d’exécution, lancer ces commandes:
npm uninstall @angular-devkit/build-angular
npm install --save-dev @angular-devkit/build-angular
//Ou
npm install @angular-devkit/build-angular
npm install @angular-devkit/build-angular --force
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 8
APPLICATION
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 9
Structure d’un projet Angular
node_modules: dépendances externes du projet
src: code source du projet
app: logique applicative du projet (composants, services, …)
assets: Contient des images et d'autres fichiers
Fichiers à part node_modules et src: configuration du projet (editorconfig,
angular.json, …)
package.json: contient la description de tous les modules NPM utilisé
angular.json: contient des paramètres important, tel que les builds de
production, les fichiers de styles ou encore les assets, la page HTML principal
à afficher, etc.
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 10
DATA BINDING
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 11
Data Binding
Est essentiel dans les Framework SPA (Single Page Application)
Permet la synchronisation entre la vue (Template html) et son modèle correspondant
(component).
Data Binding contient 4 Liaisons / Types :
o Interpolation: {{ }} Vue <- Modèle
o Property Binding : [] Vue <- Modèle
o Event Binding : () Vue -> Modèle
o Two-way Binding : [( )] Vue <-> Modèle
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 12
Data Binding
{{ }}
String Interpolation
Accéder / Afficher dans la vue les données parvenues du
modèle component. Il est utilisé pour les print/output des
propriétés, et convertit les valeurs reçu en string
[]
One-Way/Property Binding
Écrire dans toutes les propriétés du DOM via des attributs
spéciaux sur les éléments HTML entourés de []
()
Event Binding
Un évènement établi dans la vue appelle une méthode
existante dans le modèle
VUE MODÈLE
[( )]
Two-Way Binding
Les modifications établies dans la vue sont intégrées
directement dans le modèle est vice versa
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 13
http://localhost:4200
index.html
AppModule (app.module.ts)
AppComponent (app.component.ts)
Modèle Vue
Html-CSS
Data Binding
main.ts
Framework Angular
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 14
SERVICES/FONCTIONNALITÉS
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 15
LocalStorage
o L’API localStorage est simple à utiliser mais synchrone. Cela signifie que si vous l’utilisez
trop fréquemment, votre app va commencer à freezer par moment.
IndexedDB
o L’API IndexedDB est asynchrone et performante, mais c’est un enfer à utiliser. Vous
tomberez vite dans le « callbacks hell », l’API ne supportant pas encore les Promises.
LocalForage
o Mozilla a réalisé une super librairie, localForage : une API simple calquée sur le
localStorage natif, mais en interne stocké de façon asynchrone grâce à IndexedDB pour
que cela soit performant. Mais elle est écrite en ES5, et c’est donc compliqué de
l’intégrer dans Angular.
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 16
Guard (dans Angular)
o Comme un agent de sécurité à l’entré d’un bâtiment. Il décidera si vous avez le droit
d’entrer ou de sortir. Sauf que là cet agent de sécurité est une fonction typescript, et le
bâtiment c’est une page de votre application Angular ! Cette fonction doit être passée
dans le Router Angular.
o Permet de contrôler l'accès à des routes spécifiques dans votre application.
o Peut être utiliser des guards pour exécuter certaines vérifications ou actions avant de
permettre l'accès à une route, par exemple pour vérifier si l'utilisateur est authentifié ou
s’il a les droits d'accès appropriés.
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 17
JWT
JSON WEB TOKEN
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 18
JWT (JSON WEB TOKEN)
o Est un access token (jeton d’accès) aux normes qui permet un échange sécurisé de
donnée entre deux parties.
o Cette sécurité est établie par une vérification de l’intégrité des données à l’aide d’une
signature numérique.
o Cette sécurité est établie avec un algorithme HMAC ou RSA.
o HMAC (Hash-Based Message Authentication Codes) est une technique
d’authentification cryptographique qui utilise une fonction de hachage et une clé
secrète, sachante que sa force dépend de la fonction sous-jacente (SHA1 ou MD5
par exemple).
o RSA est un chiffrement asymétrique a pour principale caractéristique de nécessiter
deux clés (une clé publique et une clé privée) pour le décoder un fichier au lieu
d’une seule habituellement.
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 19
JWT (JSON WEB TOKEN)
o JWT est composé de trois parties, chacune contenant des informations différentes :
o Header : décrit le jeton
o Payload (les “claims”) : décrit les informations embarquées dans le jeton
o Signature : est créée à partir du header et du payload générés et d’un secret.
o La méthode la plus courante pour envoyer le token est de l’envoyer à travers l’en-tête
HTTP Authorization en tant que Bearer token : Authorization: Bearer 'token’
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 20
JWT (JSON WEB TOKEN)
1. Header
Exemple
{
"alg": "HS256",
"typ": "JWT"
}
2. Payload (les “claims”)
Exemple
{
"sub": "Mohamemd El Bakkali",
"exp": "1785462103",
"admin": “true”
}
3. Signature: est créée à partir du header et du payload générés et d’un secret.
Une fois ces 3 éléments générés, on peut assembler notre token JWT :
token = encodeBase64(header) + '.' + encodeBase64(payload) + '.' + encodeBase64(signature)
Token généré :
eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJzdWJqZWN0IjoiSm9obiBkb2UiLCJhZG1pbiI6dHJ1ZSwiaWF0IjoiMTQ4NTk2O
DEwNSJ9.fiSiLFuR4RYuw606Djr2KtQ7y2u-G6OzlHchzklBcd0
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 21
https://jwt.io
Spring Boot ARCHITECTURE & DÉVELOPPEMENT WEB Préparé par : Dr. Mohammed EL BAKKALI 22
