Angular et le développement Web
Angular est l’un des frameworks de développement les plus populaires au monde. Son utilisation est massive dans des pans entiers du secteur informatique !
Nous effectuerons tout d’abord un rapide historique de présentation du langage. Nous nous immiscerons dans ses forces et points faibles, et verrons comment ceux-ci influent sur ses applications pratiques !
Histoire d’Angular
Comment Angular est passé de projets interne à Google à (l’un des) framework le plus populaire pour le web ?
Penchons-nous sur sa jeune histoire !
Tout démarre en 2010 quand Misko Hevery, alors jeune ingénieur chez Google, travaille sur un projet interne visant à faciliter les développements web réalisés au sein de l’entreprise ! Ce projet s’appelle AngularJS.
Pourquoi Angular ? Le nom est trouvé par Adam Abrons, qui travaille lui aussi sur le projet, en référence au fait que les balises du langage HTML sont écrites entre des chevrons angulaires (angular brackets en VO ! < >)
Après avoir été utilisé pour son but premier : faciliter quelques développements web internes à Google, AngularJS est publié comme framework Open Source sur le Github de Misko !
Les années passent et l’évolution des standards dans le développement informatique rend AngularJS de plus en plus difficile à adapter aux projets modernes… La décision est donc prise de passer à Angular 2.0 !
Angular 2.0 : tabula rasa et développement long
L'une des meilleures évolutions d'AngularJS est l'intégration du versionnage sémantique. Sans lui, impossible de faire évoluer la solution efficacement : tous les problèmes rencontrés devaient être traités dans la version 1.xxx, ce qui bloquait l'innovation.
Pour résoudre ce gros souci, les équipes décident de repartir de zéro ("From scratch", comme on dit dans le jargon) avec Angular 2.0 et d'adopter des normes fortes. Parmi elles : la sémantique de versionnage !
La sémantique de versionnage, c’est quoi ?
Il s’agit de la méthode de numérotation des logiciels par les entreprises qui les mettent sur le marché. Elle est utile aussi bien en interne pour les chefs de projets, qui ont une feuille de route à tenir, que pour les utilisateurs qui peuvent s’assurer qu’ils disposent bien des dernières versions disponibles de leurs outils.
En général, le versionnage sémantique fonctionne comme suit : 3 chiffres séparés par des points. Le premier chiffre représente les changements de version majeurs, le second des changements dus à l’ajout de nouvelles fonctionnalités, et enfin le troisième concerne les correctifs de bugs publiés a posteriori.
L’excellent blog Code Garage explique ceci de manière très claire dans un billet rédigé par Nicolas Brondin-Bernard. On ne fera pas mieux alors nous vous partageons ce résumé :
Un identifiant minimal de version qui ressemble à 0.0.1 se lira tout simplement MAJOR.MINOR.PATCH.
Major : le chiffre « MAJOR » est le plus critique, c’est le seul qui indique une évolution de l’API tellement importante que la rétrocompatibilité n’est plus assurée, indiquant donc que cette version ne sera pas forcément compatible avec les versions précédentes.
Minor : ce chiffre permet de mentionner que des fonctionnalités ont été ajoutées (ou que des fonctionnalités ont été dépréciées) mais que l’API reste compatible avec les anciennes versions.
Patch : ce dernier indique que des bugs ont été corrigés mais que la rétrocompatibilité est assurée.
L’autre but du passage à Angular 2.0 était de tirer profit des composants web, mais pas que ! Il y avait également des nouvelles normes ES2015 qui ajoutent une quantité importante de fonctionnalités à JavaScript : classes, let/const, modules, arrow functions, etc.
Cette évolution permet aux langages basés sur ces normes (comme JavaScript) d'être de plus en plus optimisés et de plus en plus puissants. Chaque version ajoute des fonctionnalités, simplifie la syntaxe…
C’est l’organisme ECMA International (European association for standardizing information and communication systems, anciennement European Computer Manufacturers Association) qui édite ces normes. Leur but est de promouvoir des standards communs, principalement en matière de langage de script et de programmation.
Découvrez-en plus sur la nature de leur activité sur leur site internet.
Une refonte couronnée de succès ?
Cette refonte totale n'a pas reçu un accueil critique favorable au départ.
Pourquoi ? Car la rétrocompatibilité n'était pas assurée. Les projets développés sous AngularJS n'étaient pas portables vers Angular 2.0, ce qui théoriquement imposait un redéveloppement complet.
C'est pourquoi certaines applications, encore en 2022, tournaient toujours sur AngularJS. Mais attention : AngularJS n'est plus maintenu depuis 2022, ce qui le rend obsolète d'un point de vue technique et sécuritaire.
Après deux ans de développement, Angular 2.0 sort en version stable en 2016. Ce long délai aura notamment permis à React (autre framework JS) de s'imposer durant cette période.
Angular 19, le nouveau visage du framework
Angular 19 est disponible depuis mars 2025 ! Il confirme une ambition claire : moderniser Angular tout en renforçant sa performance et son accessibilité.
Parmi les nouveautés marquantes :
L’optimisation du rendering SSR (Server Side Rendering) grâce à des améliorations côté serveur.
Une meilleure intégration de l’architecture “Standalone Components”, introduite en preview dans Angular 14 et stabilisée avec Angular 15, qui permet une approche plus modulaire.
Le renforcement du système de signal, initié dans Angular 16, qui améliore la gestion de la réactivité en réduisant la charge sur le DOM.
Des outils de migration automatique plus puissants, pour faciliter les transitions entre versions.
Angular 19 vient également avec une compatibilité améliorée avec les bibliothèques modernes, ainsi qu’une meilleure prise en charge des outils d’accessibilité, ce qui répond aux exigences croissantes des normes web.
TypeScript, le BFF d'Angular
Nous vous en parlions déjà dans notre papier sur React, mais c’est encore plus vrai ici : TypeScript, c’est un sur-ensemble de JavaScript qui apporte un typage fort. Autrement dit, il aide à éviter bien des erreurs dès l’écriture du code, avant même de lancer l’appli.
Si Queen Britney le dit, c’est que c’est vrai !
TypeScript est un langage libre, open source, et “transpilé” en JavaScript, ce qui signifie qu’il peut être compromis par tous les navigateurs du marché. Son but ? faciliter la production de code propre, lisible et sécurisé.
Contrairement à React, qui est une bibliothèque JS, Angular est construit nativement avec TypeScript. Ce choix structurel renforce la robustesse du framework, et impose une architecture claire, particulièrement adaptée aux projets ambitieux.
Framework et Library, quelles différences ?
Il y a une différence importante à noter entre un « Framework » et une « Library » ; cependant ces termes sont souvent mélangés dans l’informatique. Un développeur va utiliser le code déjà existant d’une bibliothèque (library en anglais), alors que le rôle du framework (cadre de travail en français) sera lui d’exécuter le code du développeur dans son cadre technique. Le framework est vraiment la maquette en fil de fer de votre développement, qui cadre et donne une structure, alors que la librairie vous offrira un ensemble de fonctionnalités codées, parfois sans rapport les unes avec les autres, qu’il conviendra d’intégrer de manière adaptée dans le cadre applicatif du framework !
Pour l’anecdote, TypeScript est développé par Microsoft, ce qui rend Angular assez singulier car il fonctionne grâce aux efforts de Google et Microsoft, souvent concurrents.
Pourquoi c’est essentiel ?
JavaScript ne dispose pas nativement d’un typage fort. C’est donc théoriquement au développeur de se rappeler ce qu’il a mis dans son code ! Si cela peut être acceptable sur des petits scripts simples, c’est inopérationnel dès que l'on complexifie l’approche technique. S’il fallait donc impérativement TypeScript pour avoir un typage précis des variables auparavant, ce n’est plus le cas, car d’autres sur-couches existent aujourd’hui.
Avec des variables déjà typées, l’éditeur de code est capable de détecter des erreurs beaucoup plus facilement ! Cela aide également les IDE dans leur autocomplétion.
TypeScript dans son approche POO (Programmation Orientée Objet) s’accommode donc parfaitement à la programmation fonctionnelle d’Angular. De plus, TypeScript se rapproche fortement des langages comme Java dans la mesure où il est possible faire de l’héritage, des classes abstraites, de « vrais » objets.
Si certains de nos experts techniques remarquent les fortes similarités entre TypeScript et d’autres langages fortement typés tels que le Java, il reste des différences d’approches importantes. Notamment sur la manière de rentrer des variables ou des types. De plus, Java est un langage compilé alors que TypeScript est un langage transpilé !
Par exemple, en TypeScript un nombre décimal ou entier sera typé en number alors qu’en Java on peut avoir des Double ou des BigDecimal en fonction du besoin.
Angular est plein de surprises !
Fun Fact ! En mars 2017 Angular a sorti sa version 4.0… sans avoir jamais sorti la 3e ! Pourquoi donc ? Google a fait ça pour aligner toutes les versions des paquets Angular : dans la V2 Angular, le routeur était déjà en V3, donc en passant à la V4 direct, ils ont pu tout mettre au même niveau !
La roadmap d’Angular est très claire : une mise à jour majeure tous les 6 mois, 1 à 3 mineure(s) par majeure, et 1 patch par semaine environ !
Les équipes tiennent remarquablement leur calendrier de publication, malgré des objectifs très ambitieux !
Angular, poids (trop) lourd ?
Conçu d’abord pour les applications complexes, Angular peut avoir l’inconvénient d’être lourd !
Très structuré, il permet de bâtir une architecture de site solide et pérenne, mais au prix d’une certaine lourdeur globale de votre édifice. Globalement, la pertinence de son usage sur de petites applications se pose réellement.
Cette lourdeur s’associe à une prise en main et une montée en compétence qui peuvent être un peu rigides et lentes comparées aux autres frameworks JavaScript.
Si chaque version d’Angular se veut plus légère, le Build est globalement lourd ! Et même si les packages s’affinent avec le temps, ils restent plus volumineux que sur d’autres frameworks.
Tout n’est pas noir, et Angular a quelques solides arguments à faire valoir !
Angular, solide et structuré…
Il n’est pas l’un des frameworks les plus populaires pour rien !
Il sera plus facile à prendre en main pour les développeurs ayant déjà une expérience en C++ ou en Java.
Angular est pertinent pour les applications complexes grâce à sa structure solide. Si on peut toujours “tordre” Angular pour convenir à ses besoins, c’est moins le cas qu’avec d’autres frameworks. Mais c’est ici un vrai choix, car cela évite justement de sortir du cadre, au prix d’une restriction des possibilités. Le modèle d’Angular repose sur une programmation basée sur les composants, il est facile de réutiliser son code dans diverses parties de l’application.
Angular est conçu autour de principes solides : injection de dépendances, architecture modulaire, séparation claire des responsabilités (MVC). Ces fondations permettent de créer des projets maintenables à grande échelle — un point capital dans les environnements industriels ou fortement réglementés.
🔐 Et la sécurité dans tout ça ?
Angular s’intègre naturellement à une approche DevSecOps : gestion rigoureuse des dépendances, typage strict avec TypeScript, structure propice aux audits de sécurité… Des pratiques que nous développons en profondeur sur notre site dédié à la sécurité des applications.
… mais il reste malléable !
Malgré sa structure rigide, Angular est flexible dans la façon d’organiser cette structure. L’avantage ? Cela facilite la maintenance et la scalabilité future !
Angular permet d’empiler des briques applications jusqu’à faire une app, cela le rend plus modulaire, scalable, testable et réutilisable ! Par exemple, un bloc de code “sélecteur de date” réutilisable sur d’autres applications par la suite.
Angular est idéal pour les apps complexes, car il permet de tout faire. Il possède un outil de routing pour naviguer et en plus il gère le HTTP. Pas besoin donc d’ajouter une librairie ou un module pour faire des requêtes.
Angular se base sur le principe de la Single Page Application (SPA). Ce qui permet de charger directement un index avec un bundle associé, rendant possible le chargement partiel de la page. Le fichier HTML ne charge qu’une seule fois, et Angular choisira d’afficher ou non tel composant selon les pages consultées. Cela améliore grandement la performance et donc l’expérience utilisateur !
Attention cependant ! Le bundle initial peut être contre-performant s’il met trop de temps à s’afficher. D’autant plus si la connexion de l’utilisateur n’est pas puissante.
Angular dispose d’une architecture MVVM pour une meilleure flexibilité !
L’architecture MVVM (Model-View-ViewModel) est une façon de concevoir des logiciels qui vise à séparer les informations d’une application (le modèle) de la manière dont elles sont présentées (la vue).
Pour réaliser cette séparation, on utilise un élément appelé ViewModel, qui fait le lien entre le modèle et la vue. Le ViewModel fournit une interface que la vue peut utiliser pour accéder aux informations du modèle de manière appropriée.
En utilisant cette architecture, les vues deviennent moins dépendantes du modèle, ce qui rend la maintenance et l’évolution de l’application plus faciles. En d’autres termes, si vous devez apporter des modifications au modèle ou à la façon dont les données sont présentées, vous pouvez le faire sans avoir à modifier directement la vue.
Cela permet de mieux organiser le code et de le rendre plus modulaire, ce qui facilite la collaboration entre les développeurs et rend l’application plus flexible et évolutive.
Des questions ou un avis sur Angular ? Contactez-nous !
Notre article soulève chez vous des questions ou vous souhaitez nous donner votre avis ? Contactez-nous !
N’hésitez pas non plus à découvrir le reste de nos expertises sur notre Tech’Place ou sur notre site !
Pour aller plus loin :
