1

Olfa Jabri

FRAME WORK Institut Supérieur de

ANGULAR Gestion de Gabés

Angular/Réaliser par Mme Jabri Olfa

Introduction
L’industrialisation du développement d’application Web exige de créer des application
modulaire .

le client (navigateur) doit accueillir une application complète et assez légère pour être charger
en mémoire centrale. Aussi l’utilisateur peut naviguer entre les vues internes à l’application qui
est dite « Monopage »

➔le problématique consiste à créer des applications web:

▪ Initialement charger sur le navigateur.
▪ Ecrite en Javascript/Html/Css.
▪ Construite modulairement.
▪ Dialogue avec un ou plusieurs serveurs via des services Web.
➔ solution utiliser un frameWork Angular

Angular/Réaliser par Mme Jabri Olfa

2
Définition

Angular/Réaliser par Mme Jabri Olfa

3
 Le développement Angular passe par trois langages principaux :

• le HTML pour structurer

• le SCSS pour les styles (le SCSS est une surcouche du CSS qui y apporte des
fonctionnalités supplémentaires)

• le TypeScript pour tout ce qui est dynamique, comportement et données. Le

typescript sera compilé et traduit en Java Script. Le Type script est un langage de
script structuré et orienté objet qui permet de simplifier le développement des
application.

Angular/Réaliser par Mme Jabri Olfa

4
 Quelques outils utilisées par angular

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. Angular CLI (Command Line
Interface) qui vous permet de générer, compiler, tester et déployer des projets angular

Quelques
Node.js sera notre plateforme de outils utilisées
développement En l’utilise pour créer un serveur
par Angular
javascript.
web côté serveur qui permet d'exécuter du Code TypeScript.
gestionnaire de packages npm: Angular dépendent des packages npm.

Angular/Réaliser par Mme Jabri Olfa

5
 angular architecture

MVVM:Model-View-ViewModel

▪ Model : représenté généralement par une classe référencée par la couche d’accées aux
MVVM:Model-View-ViewModel Model : repr´ esent´ e g´ en´ eralement par une classe r´ ef´ erenc´ ee par
données (classe ou interface TypeScript).
la couche d’acc` es aux donn´ ees (classe ou interface TypeScript). View contenant la disposition et
l’apparence de ce qu’un utilisateur voit ` a l’ ´ ecran, recevant l’interaction avec l’utilisateur : clic, saisie,
▪ View
survol... contenant
ViewModel la disposition
remplac et l’apparence
¸ant du contrˆ oleur dans de ce qu’un utilisateur
l’architecture voit `e a` al’la´ vue
MVC, connect´ ecran,
par le data
binding, repr´ esent´ e dans Angular par un fichier *.component.ts.
recevant l’interaction avec l’utilisateur : clic, saisie, survol...

▪ ViewModel remplacant du controleur dans l’architecture MVC, connecte ` a la vue par le data

binding, represente dans Angular par un fichier *.component.ts.

Angular/Réaliser par Mme Jabri Olfa

6
 La structure du code

Angular/Réaliser par Mme Jabri Olfa

7
 La structure du code

Angular/Réaliser par Mme Jabri Olfa

8
 La structure du code

Angular/Réaliser par Mme Jabri Olfa

9
Angular/Réaliser par Mme Jabri Olfa
10
Angular/Réaliser par Mme Jabri Olfa
11
Angular/Réaliser par Mme Jabri Olfa
12
Angular/Réaliser par Mme Jabri Olfa
13
Angular/Réaliser par Mme Jabri Olfa
14
Angular/Réaliser par Mme Jabri Olfa
15