ANALYSE ET CONCEPTION DES

INTERFACES UTILISATEURS
FRAMEWORK FRONTEND
« ANGULAR »

mondherhadiji@gmail.com
PLAN

 Introduction

 Les Bases du Framework Angular

 DataBinding

 Routing

 Directives et pipes
 Services

 Angular et les services web

 MiniProjet
I. INTRODUCTION
I. INTRODUCTION
I. INTRODUCTION
I. INTRODUCTION
I. INTRODUCTION
I. INTRODUCTION
I. INTRODUCTION Framework Angular
 Angular Permet de créer la partie front end des applications web de
type SPA (Single Page Application réactive)

 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 partie de cette application,

Java Script est utilisé pour envoyer des requêtes http (AJAX)
vers le serveur pour récupérer du contenu dynamique
généralement au format JSON.

 Ce contenu JSON est ensuite affiché coté client au format HTML

dans la même page.
I. INTRODUCTION Framework Angular
I. INTRODUCTION Angular et Type Script
 Pour développer une application Angular il est recommandé
d’utiliser Type Script qui sera compilé et traduit en Java Script.
 Type Script est un langage de script structuré et orienté objet qui
permet de simplifier le développement d’applications Java Script
 ATELIER 1 : DÉMARRER AVEC ANGULAR 13

 https://angular.io/guide/setup-local

 Pour faciliter le développement d’une application Angular, les outils suivant

doivent être installés :
◦ Node JS :https://nodejs.org/en/download/
→ Node JS installe l’outil npm (Node Package Manager) qui permet de télécharger et installer des
bibliothèques Java Script.
node -v (Version du Nodejs)
→ Installer ensuite Angular CLI (Command Line Interface) qui vous permet de
générer,compiler, tester et déployer des projets angular (https://cli.angular.io/ ) :
 npm install -g @angular/cli@13.1.3
 ATELIER
ATELIER 1 : DÉMARRER
1 : DÉMARRER AVECAVEC ANGULAR 13
ANGULAR
 Création d’un nouveau projet Angular

 Pour générer la structure d’un projet Angular, on utilise Angular CLI

via sa commange ng suivie des options new et le nom du projet.
◦ ng new Atelier1
 Cette commande génère les différents fichiers requis par une
application basique Angular et installe aussi toutes les dépendances
requise par ce projet.
 ATELIER 1 : DÉMARRER AVEC ANGULAR 13

 Exécuter un projet Angular

 Pour excuter un projet Angular, on exécute la commande suivante à partir de la racine du
projet
◦ ng serve
 Cette commande compile le code source du projet pour transpiler le code TypeScript en
Java Script et en même temps démarre un serveur Web local basé sur Node JS pour
déployer l’application localement.

 Pour tester le projet généré, il suffit de langer le Browser et taper l’url :

http:// localhost:4200
 ATELIER 1 : DÉMARRER AVEC ANGULAR 13

 Exécuter un projet Angular

Remarque :
En cas de problème
lancer la commande

npm install --force

 ATELIER 1 : DÉMARRER AVEC ANGULAR 13

 Edition d’un projet Angular

 Plusieurs IDE professionnels peuvent être utilisé pour éditer le code:

◦ Web Storm, PHP Storm
◦ Visual Studio Code
◦ Eclipse avec pluginAngular
 D’autres éditeurs classiques peuvent être aussi utilisé :
◦ Atom
◦ SublimeText
◦ Etc …
 ATELIER 1 : DÉMARRER AVEC ANGULAR 13

 Edition d’un projet Angular

 ATELIER 1 : DÉMARRER AVEC ANGULAR 13
 Structure du projet
 ATELIER 1 : DÉMARRER AVEC ANGULAR 13
 Structure du projet
 Structure du projet
 Structure du projet
 Structure du projet
 Structure du projet
II. LES BASES D’ANGULAR
TypeScript
 Est un langage de programmation libre et open source développé par
Microsoft qui a pour but d'améliorer et de sécuriser la production de code
JavaScript.
 C'est un sur-ensemble de JavaScript (c'est-à-dire que tout code JavaScript
correct peut être utilisé avec TypeScript).
 Le code TypeScript est transcompilé en JavaScript,pouvant ainsi être
interprété par n'importe quel navigateur web
ou moteur JavaScript.
 Il a été cocréé par Anders Hejlsberg, principal inventeur de C#
 TypeScript permet un typage statique optionnel des variables et des fonctions,
la création de classes et d'interfaces, l'import de modules, tout en conservant
l'approche non- contraignante de JavaScript.
 Il supporte la spécification ECMAScript 6.
II. LES BASES D’ANGULAR
Architecture d’Angular
 Angular est un Framework pour créer la partie Front End des applications
web en utilisant HTML et JavaScript ou TypeScript compilé en JavaScript.
 Une application Angular se compose de :
◦ Un à plusieurs modules dont un est principal.
◦ Chaque module peut inclure :
 Des composants web : La partie visible de l'application Web (IHM)
 Des services pour la logique applicative. Les composants peuvent utiliser les services
via le principe de l’injection des dépendances.
 Des directives : un composant peut utiliser des directives
 Des pipes : utilisés pour formater l’affichage des données dans les composants.
II. LES BASES D’ANGULAR
Architecture d’Angular
II. LES BASES D’ANGULAR
Modules

 Les projets Angulars sont modulaires

 Angular possède son propre système de modularité
appelé modules angulaires ou NgModules.
 Chaque application Angular possède au moins une classe de module angulaire:
le module racine,appelé classiquement AppModule.
 Un module angulaire est une classe avec un décorateur @NgModule.
 Les décorateurs sont des fonctions qui modifient les classes JavaScript.
 Angular possède de nombreux décorateurs qui attachent
des métadonnées aux classes pour configurer et donner
le sens à ces classes.
II. LES BASES D’ANGULAR
Architecture Modulaire
II. LES BASES D’ANGULAR
Module
 II. LES BASES D’ANGULAR
@NgModule

 Est un décorateur qui pend en parameter un objet javascript

qui contient des métadonnes dont les propriétés décrivent le
module. Les propriétés les plus importantes sont:
◦ declarations : la classe représentant le module. Angular a trois types de
classes de modules : components,directives, and pipes.
◦ exports – Pour exporter les classes utilisables dans d’autres modules.
◦ imports – Pour importer d’autres modules.
◦ providers – Pour déclarer les fabriques de services.
◦ bootstrap – Pour declarer le composant Racine du module.
Seul le module racine doit définir cette propriété.
II. LES BASES D’ANGULAR
Démarrage de l’application
 Le module racine est démarré dans le fichier main.ts
 Par défaut le module racine s’appelle AppModule
 II. LES BASES D’ANGULAR
Components
 Les composants sont des éléments importants dans Angular.
 L’application est formée par un ensemble de composants.
 Chaque composant peut imbriquer d’autres composants définissant ainsi une structure
hiérarchique.

 Le composant racine s’appelle :

 Root Component
II. LES BASES D’ANGULAR
Exemple de structure
 II. LES BASES D’ANGULAR
Structure d’un composant
 II. LES BASES D’ANGULAR
Structure d’un composant
 Chaque composant se compose principalement des éléments suivants:
◦ HTML Template : représentant sa vue
◦ Une classe représentant sa logique métier
◦ Une feuille de style CSS
◦ Un fichier spec sont des tests unitaires Ils sont exécutés à l'aide du
framework de test javascript Jasmine via le programme de tâches
Karma lorsque vous utilisez la commande 'ng test'.
 Les composants sont facile à mettre à jour et à échanger entre les
différentes parties des applications.
 II. LES BASES D’ANGULAR
Structure d’un composant
II. LES BASES D’ANGULAR
Création de nouveaux composants
 Pour créer facilement des composantsAngular, on peut utiliser à nouveau la
commande ng comme suit :
◦ ng generate component NomComposant ou bien ng g c NomComposant
 Dans notre exemple,nous allons créer deux composants : about et contacts
 II. LES BASES D’ANGULAR
@Component
 Un composant est une classe qui possède le décorateur @Component
 Ce décorateur possède les propriétés suivantes :
1) selector : Indique la déclaration qui permet d’insérer le composant dans le document
HTML. Cette déclaration peut être :
 Le nom de la balise associé à ce composant
 selector : app-about
 Dans ce cas le composant sera inséré par : <app-about></app-about>
 Le nom de l’attribut associé à ce composant
2) template ou templateUrl :
 template : permet de définir dans à l’intérieur du décorateur le code HTML
représentant la vue du composant
 templateUrl : permet d’associer un fichier externe HTML contenant la structure de la
vue du composant
3) styleUrls : spécifier les feuilles de styles CSS associées à ce composant
 II. LES BASES D’ANGULAR
 Déclaration du composant dans le module
 Pour utiliser un composant, ce dernier doit être déclaré dans le
module :
 II. LES BASES D’ANGULAR
Utilisation du composant
 Un composant peut être inséré dans n’importe que partie HTML de l’application en utilisant son selecteur associé.
 Dans cet exemple les deux composants générés sont insérés à l’intérieur du composant racine AppComponent
 II. LES BASES D’ANGULAR
 Ajouter le framework Boostrap : www.getbootstrap.com

bootstrap@3.4.1

angular.json

Vider la cache :
npm cache clear
--force
II. LES BASES D’ANGULAR
Ajouter le framework Boostrap
III. TYPESCRIPT
ATELIER 2 : TYPESCRIPT FONCTION, CLASS ET COMPONENT
 Créer un fichier bonjour.component.ts dans le dossier app et
développer les traitements suivants :
1) Développer une fonction hello() qui renvoie la chaîne "Bonjour tout le monde"
au composant
2) Ajouter une classe Bonjour au fichier et faire les modifications nécessaires pour
garder la même solution
3) Faire les changements nécessaires dans ce projet afin de rendre le fichier
bonjour.component.ts un component défini par :
- selector: 'bonjour',
- template: '<h1>Bonjour tout le monde</h1>',
- styles: ['h1 { font-family: Arial; }']
 III. DATA BINDING
Définition
 Pour insérer dynamiquement des données de l’applications dans les vues des composants,
Angular définit des techniques pour assurer la liaison des données.
 Data Binding = Communication
 ATELIER 3 : DATABINDING
Créer 2 composants : contacts et about
Insérer ses 2 composants dans app.component
ATELIER 3 : DATABINDING
ATELIER 3 : DATABINDING
On doit Importer FormsModule pour ngModel, pour cette
raison, ajouter dans le fichier app.module.ts les deux lignes
suivantes :
import {FormsModule} from "@angular/forms";
imports: [BrowserModule, FormsModule],
Ajouter le framework Bootsrap
Afficher uniquement l’heure de la publication
Et appliquer la template suivante :
IV. ROUTING

• Angular propose une librairie angular@router qui permet de gérer le routing

• Cette librairie est importée dans un module dédié au routage,

• ce module portera le nom suivant app-routing.module.ts

• La configuration du "Routing" sera transmise au module RouterModule

 ATELIER 4 : ROUTING

Créer cinq composants qui seront utilisés dans le routing : Home, Contact,
About, Signin, NotFound
ng generate component modules/general/home
ng generate component modules/general/contact
ng generate component modules/general/about
ng generate component modules/general/signin
ng generate component modules/general/not-found
Modifier le fichier src/app/app-routing.module.ts
Rajouter l'élément <router-outlet> au niveau du fichier app.component.html.
→Il indiquera au router ou afficher les éléments graphiques routés.
L'élément routerLink permettra de créer le lien vers les pages souhaitées.
Le fichier src/app/app.component.html deviendra :

Utiliser le
plugin emmet
• Ajouter le composant produit dans le dossier modules/general/
• Ajouter les bibliothèques nécessaires pour intégrer Bootstrap
4.6, jquery 3.3.1 et popper.js 1.12.9
npm install jquery@3.3.1 popper.js@1.12.9 –save
npm install font-awesome@4.7.0 --save
npm install bootstrap-social@5.1.1 --save
• Créer, dans produit.component.ts, les attributs « nomSte » et «
produits ».
• Ce dernier étant un tableau ayant les éléments suivants : « id »,
« designation », « prix » et « description ».
• Afficher, dans produit.component.html, les valeurs des attributs
précédemment initialisés
• Ajouter l’appel de la page produit.component.html dans
app.component.html.
• Ajouter la route vers la page app.component.html
Angular.json
Faire les modifications nécessaires pour ajouter le champ input pour saisir le
nom du client donnant le résultat suivant :
produit.component.html
produit.component.ts
app.module.ts
 V. DIRECTIVES NG ET PIPES

1. Directives : ngStyle, ngClass, ngIf, ngFor

2. Pipe permettant de convertir une chaine en majuscule

3. Pipe permettant d’afficher une date sous ce format :

Monday, June 15, 2015

4. Bootstrap 4.6 : système de grille

5. Class Bootstrap : container, row, col, …

 ATELIER 5 : DIRECTIVES ET PIPES
1. Créer un nouveau projet.
2. Dans le répertoire « src\assets\images », mettre des images des différents livres.
3. Installer Bootstrap 4.6, Jquery3.3.1, popper.js@1.12.9
4. Ajouter les appels nécessaires dans le fichier angular.json
5. Créer les composants : Livre et retourLivre
6. Créer un système de grille formé de 3 colonnes
livre.component.ts
Livre.component.html
retourLivre.component.ts
retourLivre.component.html
App-routing.module.ts
 ATELIER 6 : INSÉRER UN MENU RESPONSIF
Dans cet atelier, on va apprendre comment développer un menu responsif
1. Consulter la balise navbar : https://getbootstrap.com/
2. Utiliser un theme bootstap : https://bootswatch.com/
3. Insérer des icones fontawesome : https://fontawesome.com/
4. Développer ce menu et insérer les liens nécessaires :

5. Déplacer ce menu dans un nouveau composant et faire les modifications

nécessaires pour le bon fonctionnement de votre projet
VI. SERVICES D’ANGULAR
Création d’un service :
 ng generate service produit
 ng g s produit
 ATELIER 7 : BACKEND FAKE JSON SERVER
Dans cet atelier, on va apprendre comment créer et consommer un service
RESTful API avec un fake JSON Server dans un projet Angular.
1. Créer un nouveau projet.
Puis créer un répertoire intitulé backend sur la racine de votre projet dans
lequel un fichier qui a le nom database.json. Ce fichier aura les données fake
JSON ayant la structure suivante :

2. Installer le serveur Backend Fake JSON Server dans l’application :

npm install -g json-server
3. Pour monter le serveur fake JSON dans l’application, exécuter la
commande suivante pour démarrer le serveur fake JSON :
json-server --watch backend/database.json

4. Installer Bootstrap 4.6, Jquery3.3.1et popper.js@1.12.9

5. Ajouter les appels nécessaires dans le fichier angular.json

6. Ouvrir le fichier src/app/app.module.ts pour ajouter :

- L’import de FormsModule et HttpClientModule:

- Leurs ajouts dans le tableau imports :

7. Créer la classe produit : ng g class shared/produit
8. Ecrire le fichier shared/produit.ts

9. Créer le service produit :

ng g service services/produit
10. Télécharger et installer Advenced Rest Client (ARC) ou postman

11. Tester les requêtes HTTP avec l’un de ces 2 logiciels avec notre BD locale
produit en utilisant les méthodes : get, post, put, delete
VII. SERVICES WEB (RAPPEL)
Deux familles de Services Web se distinguent actuellement
 Services Web « étendues »
 S’appuie sur des standards UDDI / WSDL / SOAP
 Annuaire de Services Web : UDDI
 Contrat : WSDL
 Consommer : SOAP
 Services Web REST (Representational State Transfer)
 Défini par la thèse de Roy Fielding en 2000
 Utilise directement HTTP au lieu d’utiliser une enveloppe SOAP
 URI est utilisée pour nommer et identifier une ressource
 Méthodes HTTP (POST, GET, PUT et DELETE) sont utilisées pour effectuer
les opérations de base CRUD
 SERVICES WEB REST

 Exploités pour les Architectures Orientées Données (DOA)

 REST n’est pas un standard, il n’existe pas de spécification W3C définissant
une spécification
 REST est un style d’architecture basé sur un mode de compréhension du Web
 REST s’appuie sur des standards du Web :
 Protocole HTTP
 URLs

 Formats de fichiers
 Sécurisation via SSL
REST : CARACTÉRISTIQUES
 Les services Web REST sont sans états (stateless)
 Chaque requête envoyée vers le serveur doit contenir toutes les
informations à leur traitement
 Minimisation des ressources systèmes, pas de session ni d’état
 Les
services Web REST fournissent une interface uniforme basée sur les
méthodes HTTP
 GET, POST, PUT, DELETE
 Lesarchitectures orientées REST sont construites à partir de ressources qui sont
uniquement identifiées par des URL
REST : CARACTÉRISTIQUES
 Ressources (Identifiant)
 Identifié par une URI
 Exemple : http://mywebsite.com/books/87/comments/1568
 Méthodes ( Verbes)
 Méthodes HTTP : GET, POST, PUT & DELETE
 Représentation

 Information transferee entre le client et le serveur

 Exemple : XML, JSON
 REST : MÉTHODE
 Dans une architecture REST il faut utiliser les verbes HTTP existants plutôt que
d’inclure l’opération dans l’URI de la ressource.
 Ainsi, généralement pour une ressource, il y a 4 opérations possibles (CRUD) :
 Créer (create)
 Afficher (read)
 Mettre à jour (update)
 Supprimer (delete)
 HTTP propose les verbes correspondant :
 Créer (create) => POST
 Afficher (read) => GET
 Mettre à jour (update) => PUT
 Supprimer (delete) => DELETE
REST : REPRÉSENTATION
 Fournir les données suivant une représentation pour
 Le client (GET)
 Pour le serveur ( PUT et POST)
 Données retournées sous différents formats
 XML
 JSON
 XHTML
 CSV
 Le
format d’entrée (POST) et le format de sortie (GET) d’un service
Web d’une ressource peuvent être différents
 ATELIER 8 : CONSOMMER UN FAKE SERVICE
1. Organiser votre projet :
a. Installer la dépendance : concurrently
→ npm install --save concurrently
→ Exécuter plusieurs commandes en parallèle
b. Modifier package.json :
"start": "concurrently \"ng serve\" \"json-server --watch
backend/database.json\"",
c. Exécuter la commande npm start pour charger les 2 serveurs
d. Définir une constante host dans le fichier environment.ts
 2. Définir dans le fichier services/produit.service.ts les
méthodes suivantes :

Méth. ListProduit() GetProduit AddProduit UpdateProduit DeleteProduit

(id: string) (prod: Produit ) (id: string,prod: (id: string)
any)

Verbe get get post put delete

services/produit.service.ts
 VIII. OBSERVABLE - RXJS

Un observable est une fonction de la bibliothèque

JavaScript RxJS. Cette bibliothèque offre des
fonctionnalités gérant les appels de données asynchrones
pour les programmes réactifs.

Un observable attache les valeurs qui sont attendues à

partir d’une demande http dans la méthode subscribe en
cas de succès ou bien dans la méthode erreur en cas
d’échec.
3. Créer 3 composants : listproduit, ajoutproduit et modifproduit
ng g c produit/listproduit
ng g c produit/ajoutproduit
ng g c produit/modifproduit

4. produit/listproduit.component.ts
produit/listproduit.component.html
5. Définir les routes nécessaires dans le fichier app/app-routing.module.ts
6. Garder uniquement dans le fichier app.component.html l’instruction :
<router-outlet></router-outlet>
7. Exécuter : npm start
8. Puis écrire dans le navigateur http://localhost:4200/listproduits
9. Tester le bouton Supprimer
10. Modifier fichier produit/ajoutproduit/ajoutproduit.component.ts
11. Modifier fichier produit/ajoutproduit/ajoutproduit.component.html
12. Modifier fichier produit/modifproduit/modifproduit.component.ts
13. Modifier fichier produit/modifproduit/modifproduit.component.html
 ATELIER 9 : CONSOMMER UN WEB SERVICE RESTFUL
1. Présentation: https://openweathermap.org/
OpenWeatherMap est un service en ligne qui fournit des données
météorologiques actuelles, des prévisions et des données historiques.
Plus de vingt API météorologiques ont été développées pour obtenir différents
types de données météorologiques. Ils prennent en charge plusieurs langues,
unités de mesure et formats de données.
2. Utiliser openweathermap nécessite de s'enregistrer afin d’obtenir une clé API
3. Le service OpenWeatherMap fournit une API de météo actuelle, ainsi que
plusieurs types de prévisions avec différentes profondeurs et étapes de mesure.
Dans cet atelier, nous allons utiliser 2 APIs :
a) Données météorologiques actuelles :
http://api.openweathermap.org/data/2.5/weather?q={city name}&appid={your
api key}
b) Prévision par étapes de 3 heures pour 5 jours :
http://api.openweathermap.org/data/2.5/forecast?q={city name}&appid={your
api key}
La réponse JSON de cette requête
http://api.openweathermap.org/data/2.5/weather?q=sfax&appid=c109c07bc4df77a88c923e6
407aef864 est la suivante :
4. Créer un service services/meteo (ng g s services/meteo)
5. Ajouter 2 constantes dans le fichier environment.ts : meteoKey et meteohost
6. Définir dans le fichier meteo.service.ts 2 methodes getMeteo1jour(ville) et
getMeteo5jours(ville)
7. Créer un composant meteo meteo.component.ts
8. Développer la page meteo.component.html