INTRODUCTION

La tendance actuelle dans le développement web et la conduite de projet informatique est

l’utilisation des FRAMEWORKS. Ce terme signifie, en français, « Cadre de travail ». L’utilisation d’un
FRAMEWORK permet à plusieurs développeurs de travailler sur un même projet de façon organisée
et plus efficace. En effet, le FRAMEWORK impose un ensemble de conventions à suivre et met à la
disposition des développeurs des outils à utiliser. Les géants du web tels que GOOGLE (ANGULAR :
Framework) ou FACEBOOK (REACT JS : bibliothèque JavaScript) ont suivi cette tendance et ont créé
des plateformes de développement d’applications web qui permettent aux développeurs web de
collaborer efficacement et de gagner en qualité et en temps de travail.

1. QU’EST-CE QUE ANGULAR ?

Le développement web de nos jours, repose sur le principe de séparation entre la partie cliente
d’une application « FRONT-END » et la partie serveur « BACK-END ». Le FRONT-END représente la
partie qui s’affiche sur le navigateur de l’utilisateur d’un site et il contient du code HTML, CSS et
JavaScript. Alors que le BACK-END représente la partie qui s’exécute sur le serveur et il contient des
scripts en langages dynamiques tels que PHP ou JAVA.

ANGULAR est l’un des FRAMEWORKS utilisés dans le développement web FRONT-END. Il permet de
développer des applications web robustes, ainsi que des sites web et des applications mobiles.
ANGULAR permet, par ailleurs, de développer des applications SPA (Single Page Application) qui offre
une meilleure expérience utilisateur (UX)

2. QU’EST-CE QU’UNE SPA ?

Dans les applications Web traditionnelles, le client initie la communication avec le serveur en
demandant une page. Le serveur traite alors la requête et envoie le HTML de la page au client.
Chaque interaction ultérieure entraîne l'envoi d'une nouvelle requête au serveur. Le serveur traite
ces demandes et répond avec une nouvelle page qui sera rechargé par le navigateur. Cela implique
beaucoup de temps d’attente et une mauvaise UX.

Une application SPA est une application à une page unique qui contient qui ne recharge pas la page
sur le navigateur web pendant son utilisation. En effet, tout le code HTML, CSS et JavaScript est
récupéré avec le chargement initial de la page. Le serveur n’envoie qu’une seule page au client,
ensuite JavaScript prend le relais pour gérer la navigation. Les applications SPA offrent une UX plus
rapide et plus fluide. Comme la page ne se recharge jamais, cela réduit le nombre d'aller-retour vers
le serveur.

Exemples d’application SPA : Gmail, Trello, Github, Facebook, Instagram, etc.

3. HISTORIQUE

ANGULAR JS a été développé par GOOGLE en 2009. Au début, le framework avait une architecture
qui repose sur le pattern-design MVC (Model-Vue-Controller). En octobre 2014, GOOGLE a annoncé,

3BI - IHEC | Framework de développement web 1

pendant la NG-CONF, la création de la première version du framework ANGULAR en insistant sur le
fait qu’il s’agit d’un nouveau framework et non d’une nouvelle version de ANGULAR JS.

La création d’un nouveau framework par GOOGLE a été motivée par le lancement des nouveaux
standards du web, notamment, celui des composants web (Web Components) qui a été utilisé, par
exemple, par REACT JS de la société FACEBOOK depuis 2013. En plus, l’apparition de la version ES6 de
JavaScript a offert des fonctionnalités pouvant améliorer les performances du framework.

Plusieurs versions ont, ensuite succédé la première version. La version 2 est sortie en septembre
2016, alors que la version 3 n’a jamais vu le jour. Depuis la version 4 sortie en mars 2017, chaque
année deux nouvelles versions voient le jour. En 2022, la dernière version stable est ANGULAR 14.

4. ARCHITECTURE D’ANGULAR

L’architecture d’un projet ANGULAR est une arborescence de components parents et enfants. Ces
components sont réutilisables et indépendants.

ANGULAR est écrit en TypeScript qui est un métalangage basé sur JavaScript. Le code TypeScript est
transpilé en JavaScript avant d’être exécuté.

Chaque application ANGULAR fonctionne grâce à au moins un component. C’est le component

racine qui lie la hiérarchie des components au DOM. Chaque component contient un modèle
HTML qui définit une vue à afficher dans le navigateur et une classe JavaScript qui contient les
données et la logique de l’application.

Les autres éléments de l’architecture sont les modules et les services. Les modules, les services et
les components sont des classes qui utilisent des decorators TypeScript. Ces decorators fournissent
des métadonnées qui indiquent à ANGULAR comment les utiliser.

Les métadonnées d’un component s’associent à un modèle pour définir une vue. Un modèle est
l’association d’un code HTML avec des directives et un binding markup (opérateur d’interpolation)
permettant à ANGULAR de modifier le HTML avant de l’afficher.

Les métadonnées d’un service fournissent les informations dont ANGULAR a besoin pour les mettre à
la disposition des components par le biais de l’injection de dépendances.

Les components définissent généralement de nombreuses vues, disposées hiérarchiquement. Le

service Router permet de définir les chemins de navigation entre les vues.

3BI - IHEC | Framework de développement web 2

Root component

CONCLUSION

ANGULAR repose sur trois standards, à savoir, le méta langage TypeScript, l’integration des Web
Component et les langages HTML, CSS et JavaScript. Pour pouvoir développer des projets ANGULAR,
il faut maîtriser ces trois concepts.

3BI - IHEC | Framework de développement web 3