Développement Web Front End

Angular Framework
 Architecture Web

 Un client Web communique avec le serve web en utilisant

le protocole HTTP
 Une application web se compose de deux parties:
 La partie Backend: s’occupe des traitements effectués coté serveur:
o Technologies utilisées: JEE, PHP, Node Js, …
 La partie Frontend: s’occupe de la presentation des interfaces:
o Langages utilizes: HTML, CSS, Java Script

 La communication entre la partie Frontend et la partie

Backend se fait en utilisant le protocole HTTP
 Concepts fondamentaux

 Angular est un Framework open source écrit en JavaScript qui permet de créer des
applications Web SPA « Single Page Applications »
 Une application de type SPA contient une seule parge HTML
 Java Script est utilisé pour naviguer entre les différentes parties de cette application
en envoyant les requêtes http (AJAX) vers le serveur pour récupérer du contenu
généralement au format JSON
 Ce contenu JSON est ensuite formaté pour coté client pour être affiché en HTML dans
la même page
 Les version de Angular
Angular 1, 2, 4, … 12

 Angular 1 (Angular JS)

 Pernière version de Angular qui à été très pupulaire;
 Cette version est basée sur l’architecture MVC coté client;
 Les applications Angular 1 sont ecrite en Java Script.
 Angular 2 (Angular)
 C’est une réécriture complète de Angular 1, qui se veut plus performante, mieux structurée et qui
représente le futur de Angular;
 Cette version basée sur les composants web (Web Component);
 Les application Angular 2 sont écrite en Type Script qui est compilé et traduit en Java script avant d’être
exécuté par les navigateurs.
 Angular 4, 5, 6, … 12
 Sont des simples mise à jour de Angular 2, avec des améliorations au niveau des performances et des
modules existants;
 Angular avec Type Script

 Pour développer une application Angular, il est conseillé d’utiliser le langage

Type Script qui sera compilé et traduit en Java Script

 Type Script est un langage structuré et orienté objet qui permet de simplifier les
application Java Script

Futur Java Script

Langage structuré
et orienté objet
 Démarrer avec Angular
Installation des outils

 Pour faciliciter le développement d’une application Angular, les

outils suivants 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 les bibliothèques Java Script

 Installer ensuite Angular CLI (Command Line Interface) qui

vous permet de générer, compiler, testé et déployer les
applications Angulars (https://cli.angular.io)

 npm install –g @angular/cli

 Création d’un projet Angular
 Pour générer la structure d’un projet Angular, on utilise Angular
CLI via sa commande ng suivie des options new et le nom du
projet:
 ng new MyApp
 Cette commande génère les fichiers requis par une application
basique Angular et télécharge aussi toutes les dépendances
nécessaires pour le projet
 Pour lancer un projet Angular, exécuté la commande suivante à
partir de la racine du projet:
 ng serve
 Cette commande compile le projet afin de transpiler le code Ts
en Js et démarre un serve base sur Node Js pour déployer
l’application localement
 Pour tester le projet généré, il suffit de saisir l’url :
http://localhost:4200 dans votre navigateur
 Création d’un projet Angular
 Pour générer la structure d’un projet Angular, on utilise Angular
CLI via sa commande ng suivie des options new et le nom du
projet:
 ng new MyApp
 Cette commande génère les fichiers requis par une application
basique Angular et télécharge aussi toutes les dépendances
nécessaires pour le projet
 Pour lancer un projet Angular, exécuté la commande suivante à
partir de la racine du projet:
 ng serve
 Cette commande compile le projet afin de transpiler le code Ts
en Js et démarre un serve base sur Node Js pour déployer
l’application localement
 Pour tester le projet généré, il suffit de saisir l’url :
http://localhost:4200 dans votre navigateur
 Création d’un projet Angular
 Pour générer la structure d’un projet Angular, on utilise Angular
CLI via sa commande ng suivie des options new et le nom du
projet:
 ng new MyApp
 Cette commande génère les fichiers requis par une application
basique Angular et télécharge aussi toutes les dépendances
nécessaires pour le projet
 Pour lancer un projet Angular, exécuté la commande suivante à
partir de la racine du projet:
 ng serve
 Cette commande compile le projet afin de transpiler le code Ts
en Js et démarre un serve base sur Node Js pour déployer
l’application localement
 Pour tester le projet généré, il suffit de saisir l’url :
http://localhost:4200 dans votre navigateur
Page d’accueil
http://localhost:4200
Structure d’un projet Angular
Structure d’un projet Angular
index.html
Structure d’un projet Angular

app.module.ts
 Structure d’un projet Angular
app.component.ts

app.component.html

app.component.css

Fichier de test unitaires. La convention voudrais qu’on ait un fichier .spec.ts pour
chaque fichier .ts ils sont executes à l’aide du framework de test js Jasmine via le
programme de tâche Karma lorsque vous exécutez la commande: “ng test”
 Structure d’un module
 Angular est un framework destiné au développement font end des applications
web en utilisant du html et JavaScript
 Une application Angular se compose de:
 Un ou plusieurs modules dont un module principal
 Chaque module peut inclure:
 Des composants web : partie visible de l’application
 Des services pour la logique applicative: les composants peuvent utiliser les services via le principe de
l’injection de dépendance
 Les directives: un composant peut utiliser des tractives
 Les pipes: utilisés pour formater l’affichage des données dans les composants
 Structure d’un web component
 Les composants sont les élements important de Angular
 L’application est formée d’un ensemble de composants
 Chaque composant peut imbriquer d’autre composants formant ainsi une
structure hiérarchique
 Le composant racine s’appelle Root Component
Root Component
Component 1 Component 2 Component 3

Component 6
Component 4

Component 5
 Création de nouveaux composants
 Pour créer facilement des composants Angular, on peut utiliser à nouveau la
commande ng comme suit:
o ng generate component nom-du-composant (ng g c nom-du-composant)
 Dans notre exemple, nous allons créer deux composants: about et contacts
Structure du composant about
about.component.ts

about.component.html

about.component.css
Structure du composant contact
contacts.component.ts

contacts.component.html

contacts.component.css
 Vue interne d’un composant
@Component
 Un composant est une classe qui possède le décorateur
@Component.
 Ce décorateur possède les propriétés suivantes:
 Selector: indique le type d’élément permettant d’insérer le
composant dans le template html. Ce type peut être:
 Le nom de la balise associée à ce composant
 Selector : app-about
 Dans ce cas, le composant sera inséré par: <app-about></app-about>
 Le nom de l’attribut associée à ce composant
 Selector : [app-about]
 Dans ce cas, le composant sera inséré par: <div app-about></div>
 Le nom de la classe associée à ce composant
 Selector : .app-about
 Dans ce cas, le composant sera inséré par: <div class=“app-about”></div>

 template ou templateUrl:
 template: permet de définir à l’intérieur du décorateur le code html qui représente
la vue du composant
 templateUrl: permet d’associer un fichier html qui représente la vue du composant
 styleUrls: permet de spécifier les feuilles styles associées à ce
composant
 Déclaration d’un composant
 Pour utiliser un composant, ce dernier doit être déclaré dans le
module
 Utilisation des composants
 Un composant peut être inséré dans n’importe quelle partie HTML de
l’application en utilisant son sélecteur associé;
 Dans cet exemple, les deux composants générés sont insérés à l’intérieur du
composant racine AppComponent
 Data binding
 Pour insérer dynamiquement les données de l’application dans les
vues des composants, Angular définit des techniques pour assurer la
liaison des données.
 Data Binding = communication.
Data binding: exemple
Data binding: vue html
Ajouster la librerie Bootstrap CSS au projet
 Tout d’abord, installer Bootstrap en utilisant la
commande npm;
 Ensuite ajouter le chemin de bootstrap.min.css
dans le fichier angular.json (angular-ci.json pour les
version antérieurs)
 npm install --save angular@3
 Ensuite démarrer le serveur avec ng serve
Nouveau look avec Bootstrap
 Les Services
 Un service est une catégorie largeur qui englobe toute valeur fonction ou
fonctionnalité dont votre application a besoin;
 Un service est généralement une classe avec un but taillé sur mesure bien défini;
 Généralement les composants, se limitent à l’affichage et à la gestions des
événements dans la vue du composant. Exécution des traitements en local ou en
back end sont attribués aux services;
 Quand un événement survient dans la vue, le composant fait appel à des fonctions
qui se trouvent dans les services pour effectuer les traitements et fournir les
résultats;
 Généralement, c’est le service qui interagit avec la partie back end de l’application
en envoyant les requêtes HTTP;
 En général, c’est le composant qui consomme les services, toutefois, un services
peut consommer d’autres services;
 L’utilisation de services se fait via le principe d’injection de dépendance.
 Injection de dépendance
 Lorsque Angular crée un composant, il demande d’abord à un injecteur, les
services requis;
 L’injecteur maintient une collection d’instance de services qu’il a crée
précédemment;
 Et si une instance de service n’est pas dans le conteneur, il la crée et l’ajout au
conteneur avant de l’envoyer au service;
 Lorsque tous les services demandés ont été résolus, et retournés alors Angular
peut appeler le constructeur du composant avec les instances crées comme
paramètres;
 Il s’agit là d’une injection de dépendance.
 Enregistrement des services
 Pour utiliser un service, il faut au préalable enregistrer un fournisseur de ce service auprès de
l’injecteur;
 Un fournisseur de service est une fabrique qui permet de gérer l’instanciation des services;
 Vous pouvez enregistrer des fournisseurs au niveau du module ou du composant;
 Il est conseillé d’ajouter ces fournisseurs au niveau du module afin la même instance;

 Sinon enregistrez le au niveau du composant avec la propriété providers du décorateur

@Component. Mais dans ce cas le service est instancié pour chaque nouvelle instance du
composant.

Vs
.
 Configuration des routes
app-routing.module.ts app-module.ts
 Router outlet

 Lorsque l’utilisateur saisie :

http://localhost:4200/about,
 Le routeur cherche et charge le composant
AboutComponent et l’affiche dans l’élément
<router-outlet> </ router-outlet >
 Cet élément est sensé se trouver dans la vue
de l’élément racine.
 Routage et navigation
 Il est également possible de naviguer entre les différentes routes en utilisant la méthode
navigate() du service Routeur. Pour cela, le service routeur doit être injecté dans la classe
du composant
 L’exemple suivant montre comment cela est implémenté dans le composant
ContactsComponent
 Routage et navigation
 Il est également possible de naviguer entre les différentes routes en utilisant la méthode
navigate() du service Routeur. Pour cela, le service routeur doit être injecté dans la classe
du composant
 L’exemple suivant montre comment cela est implémenté dans le composant
ContactsComponent
 HTTP: interaction avec le back end

 La plupart des applications communiquent avec les services backend via le protocole
HTTP;

 HttpClient du module @angular/common/http, offre une API HTTP client simplifiée pour
les applications Angular;

 Les avantages supplémentaires de HttpClient inclus des fonctionnalités de test, des

objets de requêtes et de réponse typés, un mécanisme d’interception de requêtes et de
réponse, des apis observables et une gestion simplifiée des erreurs.
Exemple de service avec HttpClient
 HttpClientModule
 Pour utiliser HttpClient, vous devez importer le module HttClientModule de Angular;

 La plupart du temps, cela se fait dans le module racine AppModule.

Exemple dans un composant
 HttpHeaders
Les en-têtes permettent au client et au serveur de transmettre des
informations supplémentaires via une requête/réponse.

Un en-tête de requête est constitué de son nom (insensible à la casse)

suivi d'un deux-points :, puis de sa valeur:

 général : en-têtes s'appliquant à la fois aux requêtes et aux réponses

mais sans rapport avec les données éventuellement transmises dans
le corps de la requête ou de la réponse.
 requête : en-têtes contenant plus d'informations au sujet de la
ressource à aller chercher ou à propos du client lui-même.
 réponse : en-têtes contenant des informations additionnelles au sujet
de la réponse comme son emplacement, ou au sujet du serveur lui-
même (nom et version, etc.)
 d'entité : en-têtes contenant plus d'informations au sujet du corps de
l'entité comme la longueur de son contenu ou son type.
 HttpHeaders quelques valeurs
 Autorisation: transporte les informations d'authentification du client
pour la ressource demandée;
 WWW-Authenticate: Ceci est envoyé par le serveur s'il a besoin d'une
forme d'authentification avant de pouvoir renvoyer la resource
demandée. Souvent envoyé avec un code de réponse de 401, qui
signifie «non autorisé»;
 Accept-Charset: en-tête défini lors d’une requête et indique au serveur
quels jeux de caractères sont acceptables par le client;
 Accept: indique le type de réponse que le client peut accepter du
serveur (application/JSON) ;
 Content-Type: indique le type de donnée (text/html ou
application/JSON) renvoyée au client par le serveur;
 Cache-Control: Il s'agit de la politique de cache définie par le serveur
pour cette réponse, une réponse mise en cache peut être stockée par le
client et réutilisée jusqu'à l'heure définie par l'en-tête Cache-Control.
HttpHeaders exemple
 Template Driven Forms Vs
ReactiveForms
 Les froms ont besoin du module FormsModule, tandis que les
reactiveForms ont besoin du module ReactiveFormsModule;

 Les forms sont basés uniquement sur des directives de modèle, tandis
que les reactiveForms sont définis programmatiquement au niveau de
la classe du composant;

 Les reactiveForms sont un meilleur choix par défaut pour les nouvelles
applications, car ils sont plus puissants et plus faciles à utiliser;

 L'approche basée sur les forms est très familière aux développeurs
AngularJs et est idéale pour une migration facile des applications
AngularJs vers Angular;

 L'approche réactive supprime la logique de validation au niveau de la

vue, gardant ainsi les templates plus propres.
 Décomposition en sous-composant

 Envoi de données à un composant enfant

 Le décorateur @Input() dans un composant enfant ou une directive signifie que la propriété peut
recevoir une valeur de son composant parent.
 Envoi de données à un composant parent
 Le décorateur @Output() dans un composant ou une directive enfant permet aux données de
circuler de l'enfant vers le parent.
 Décomposition en sous-composant
Cas pratique
product.component.html

product.component.ts
 Décomposition en sous-composant
Cas pratique

product.state.ts
 NgRX: Reactive State Management
 NgRx est une librairie implémentant le pattern
Redux en utilisant la programmation réactive basé
sur RxJS;
 NgRX permet à une application Angular de
centraliser l’état de l’application dans un unique
objet; NgRX State Management Lifecycle
 Tous les composants peuvent accéder facilement
à l’état de l’application d’une manière réactive;
 Chaque composant peut faire une souscription
aux données du state dont il a besoin en utilisant
les sectors;
 A chaque fois que ces données du state change,
le composant est mis à jour d’une manière
réactive;
 Ce mécanisme NgRX propose des éléments
puissants alternatifs aux classiques fournies par
Angular:
 @Input et @Output permet de faire communiquer
d’une façon simple les composants à travers l’arbre
de composants
 Les services qui peuvent être utilisés pour partager
les données à travers l’application et aussi des
traitements pour l’ensembles des composants
 Architecture de NgRX
 NgRx est une implémentant le pattern Redux en utilisant RxJS;  Effects: est un observateur d’un certain
 L’architecture de NgRX repose sur les composants suivants; type d’action particulière qu’il faudrait
 Store: Objet Js contenant l’état de votre application. Le intercepter pour faire appel aux services de
store est un objet Js immuable. l’application qui sont utilisées pour interagir
avec le backend. Chaque interaction avec
 Web Component: Tout comosant web de l’application
le backend, entraine un évènement
souhaitant utiliser une partie de l’état doit souscrire un
(Succès ou Erreur) qui est traduit par
abonnement dans le Store.
l’Effect dispatchant une autre action
 Selector: pour permettre à un composant de souscrire à
destinée à être intercepté par un Reducer
une partie précise du state au lieu de souscrire à tout le en vu de mettre à jour le state du Store;
State
 Entities: pour féliciter la gestion de
 Action: ce sont des évènement émis par votre application
collections d’entités du State, NgRX fourni
au niveau des composants suites aux interactions IHM ou un mécanisme qui permet d’ajouter,
dans des services suite à des interaction avec le back end. rechercher, mettre à jour et supprimer des
Pour dispatcher une action, on utilise l’objet Store. Une entités du state de l’application en utilisant
action est un objet Js défini par deux attributs: EntityFactory.
 Type: String qui représente le type de l’évènement
 Payload: un objet Js contenant les paramètres de l’action
 Reducer: un reducer est une fonction Js pure représentant des
écouteurs d’évènements (Action) qui reçoit le state actuel et
l’action dispatchée par le Store. En fonction du type de l’action
et de son Payload, le Reducer retourne un nouveau Store,
permettant à l’application de passer d’un état courant à un
nouvel état. Les Reducers doivent préserver l’immuabilité du
Store. Ce qui offre la possibilité de concerver l’historique des
différents changement dans le state de l’application.
 Utilisation de NgRX
 Pour utiliser NgRx, on a besoin d’un ensemble de dépendances qui constituent les
éléments permettant d’implémenter le pattern Redux. Nous avons entre autre :
 Le Store: npm install --save @ngrx/store;
 Les Effects: npm install --save @ngrx/effects;
 Une outils très important pour la phase de développement : le Store-devtools:
npm install --save @ngrx/sotre-devtools.

 Importer les deux modules suivants dans votre application:

 StoreModule, et spécifier le Rducer via la fonction forRoot({});
 EffectModue:, et spécifier la liste des Effects via la fonction forRoot([]);
 StoreDevToolsModule et le configurer en faisant appel à sa fonction
instrument().

 Créer les Actions, les Rducers et les Effects

 Les Actions sont des classe définies par deux attribus (type & payload) qui
implémentent l’interface « action » de NgRx;
 Le Reducer est une fonction pure qui gère le state de l’application (listes,
entités, messages, …)
Exemple de projet avec NgRX
Développement Web Front End
Angular Framework

 Les sources des différentes présentations sont disponibles ici :

https://github.com/Tamal2017/angular-9-tutorial
https://github.com/Tamal2017/angular-ngrx-app