Framework Web Front-End

kallel.sahar@gmail.com
Objectifs
› Développer des Single Page Applications
› Créer des composants web
› Manipuler un Template avec le databinding, les directives
et les pipes
› Faire communiquer les composants
› Communiquer avec les utilisateurs à travers les
formulaires
› Faire communiquer une application avec un backend

2
Plan
› Chapitre 1 : Introduction
› Chapitre 2 : Création d’un projet Angular
› Chapitre 3 : Architecture Angular
– Les modules
– Les composants
– Les templates, databinding
– Les services, etc
› Chapitre 4 : Les formulaires Angular
› Chapitre 5 : Angular Routing

3
 Chapitre 1
Introduction

kallel.sahar@gmail.com
Quelques notions essentielles

5
Approche classique

Problème : pour chaque changement au niveau code HTML, le

client soumet une requête au serveur pour recharger le contenu
(toute la page sera rechargée)

7
Pourquoi un framework ?

8
Pourquoi un framework ?

9
Avantages d’un framework
› Réduire de la complexité
› Gain de temps et d’efficacité
› La richesse en animations
› Meilleure structuration du code
› Maintenance simplifiée

11
Single Page Application

12
SPA vs MPA
Approche SPA
• Une seule page
• Lors de la première requête le serveur
fournit au client des ressources de
l’application : modèle HTML (parties
statiques), scripts JS, CSS, etc.
• Le rôle du serveur est d’exposer les
données….
• Le client gère la partie IHM et toute partie
logique applicative y étant déportée.
• (+) Tout le conteneur est chargé une seule
fois
• (+) Navigation plus simple (scroller et
moins risqué et compliqué que cliquer)
Approche MPA
• Plusieurs pages
• Le serveur contient la logique applicative y
compris la logique d’IHM.
• Le rôle du serveur est d’interpréter chaque
requête utilisateur et fournit le HTML, les
données et les états.
• Le rôle du client est de recueillir les
informations, en organiser le rendu et
transmettre au serveur les actions de
l’utilisateur
• (-) Le site est plus lent à charger / naviguer
14
Cycle de vie : SPA vs MPA

MPA SPA

15
Framework Angular
› Angular est un Framework Javascript
› Open Source (MIT Licence)
› Développé par Google
› Ecrit avec TypeScript
› Framework Ionic

16
Framework Angular
› Fait partie de la nouvelle vague d’innovation de frameworks
JavaScript côté front-end à travers la conception des applications
web plus légères.

› Basé sur une approche SPA, dont le but est d'éviter le chargement
d'une nouvelle page à chaque action demandée (comme dans
Ajax).

› Offre une navigation plus fluide pour le visiteur via le design

pattern MVVM (Modèle-Vue-VueModèle), ce qui permet de diminuer
fortement la vitesse de chargement des pages et le nombre d’accès
serveur. 17
Framework Angular
› Offre une meilleure gestion de contenu dynamique par le biais
d'une synchronisation bidirectionnelle des données (two-way data-
binding), dès qu'une vue est modifiée, la donnée est envoyée au
model associé qui rafraîchit à son tour la vue.

› Améliore considérablement le travail en équipe à travers une

plateforme extensible et modulaire (approche de composants
réutilisables et partageables)

› Les applications développées avec Angular sont responsives et

s’adaptent à tous les écrans : desktop, mobile et tablette. 18
Framework Angular
› Une SPA est une application qui
contient une seule page HTML
(index.html) récupérée du serveur.

› Pour naviguer entre les différentes

parties de l’application, Javascript est
utilisé pour envoyer des requêtes http
vers le serveur pour récupérer du
contenu dynamique au format JSON
(généralement)

› Ce contenu JSON est affiché par la

suite coté client au format HTML sur la
même page. 19
Historique
› Apparu en 2010 sous le nom de AngularJS.
– Première version de Angular qui est la plus populaire.
– Les applications Angular sont écrites en Java Script.

› En 2016, apparition de Angular2

– Les applications de Angular2 sont écrites en TypeScript qui est compilé et traduit en
JavaScript avant d’être exécuté par les navigateurs Web.
– Angular2 est basé sur une programmation basée sur les composants (Web
component).
– Angular2+ appelé tout court Angular.

› Angular4,5,6,7,8,9,10,11,12,13,14,15 et 16 sont des simples mises à jour de

Angular2 avec des améliorations au niveau performances.
20
TypeScript
› Langage de programmation libre et open source, développé par
Microsoft
› C'est une surcouche de JavaScript (c'est-à-dire que tout code JavaScript
correct peut être utilisé avec TypeScript) permettant le typage des
variables via des annotations.
› Le code TypeScript est transcompilé en JavaScript (source-à-source via
le compilateur tsc)
› TS permet un typage statique optionnel des variables et des fonctions, la
création de classes et d'interfaces, l'import de modules, etc.
› les classes et les interfaces permettant de coder de manière beaucoup
plus modulaire et robuste
› Un fichier a extension « .ts », peut contenir un script JS valide. 21
TypeScript (Syntaxe)
› Déclaration des variables :
let variable: type;
› Déclaration des constantes :
const participantsNumber: number= 20;
const sessionName: string= ‘’Angular’’;

-> Dans ces cas, les types sont facultatifs, car le compilateur TS peut les
deviner depuis leur valeur (c’est ce qu’on appelle l’inférence de type)
› Types génériques :
const sessions: Array<Session> = [new Session()];
22
TypeScript (Syntaxe)
› Type anonyme :
let isCompleted: any;
isCompleted= true;
› Type dynamique :
let isCompleted: number|boolean= 0;
isCompleted= true;
› Paramètres optionnels :
function updateSessionParticipants(session: Session, nb?: number): void {
nb= nb||1;
session.nbParticipants+= nb;
}
23
TypeScript (Décorateur @)
› C’est une fonctionnalité toute nouvelle, ajoutée en TypeScript 1.5, juste
pour le support d’Angular.

› Ils ressemblent beaucoup aux annotations, qui sont principalement

utilisées en Java, C#, et Python.

› Un décorateur est une manière de faire de la méta-programmation : ils

ajoutent des métadonnées à une classes par exemple pour indiquer
«cette classe est un composant», «cette classe est un module», etc.

› En TypeScript, les annotations sont préfixées par @.

24