Si on veut utiliser Angular, au sens générique du terme, en tant que développeur freelance, dans son projet de développement, on a le choix entre ses deux versions majeures : AngularJS et Angular.
Bien que l’utilisation du premier décroisse avec le temps, AngularJS est toujours maintenu et présent dans bon nombre de projet ! Aussi, il n’est pas à jeter d’office lorsqu’on veut établir la partie frontend de sa stack technique.
Mais alors, quel version choisir ? AngularJS ou Angular ? Réponse dans cet article.
AngularJS et Angular, l’historique
Pour pouvoir faire son choix entre ces deux frameworks, il faut comprendre leurs différences. Et pour ça, il est bon de faire un retour en arrière pour savoir comment sont nés ces frameworks, comment ils ont évolué et gagné en popularité.
AngularJS
Si vous connaissez un peu ces frameworks, vous savez qu’Angular est en quelque sorte la version 2 d’AngularJS. Rien de surprenant donc à savoir qu’AngularJS lui est antérieur, avec une première version en 2009.
Développé et maintenu par Google, ce framework front-end, comme tout framework, est née dans le but de simplifier le développement (et les tests) de sites et applications web.
Utilisant le pattern MVC (dont on a déjà parlé dans cet article), AngularJS a gagné en popularité notamment grâce à son intégration à la stack technique MEAN. Cette dernière, toujours très utilisée, est composée des technos suivantes :
- MongoDB, pour la partie base de données ;
- Express.js, pour le serveur, le back-end ;
- AngularJS, pour le front end ;
- Node.js, le ciment qui lie toutes ces technos.
Pour en savoir plus sur la stack MEAN, on a aussi un article dédié qui en parle.
AngularJS a ensuite été complètement réécrit pour mener à une version 2, renommée en…
Angular
La réécriture d’AngularJS, donc, sortie en 2016, portait originellement le nom « Angular 2 ». Mais, suite aux confusions que ce nommage apportait, Angular 2 a tout simplement été renommé en Angular.
On distingue depuis AngularJS (version 1.x) et Angular (versions 2 et au delà). Angular sort très régulièrement de nouvelles versions majeures. À l’heure actuelle, sa dernière version est la 13, sortie en novembre 2021. Chaque version de ce framework front end est officiellement maintenue pendant 18 mois.
AngularJS vs Angular : 6 différences principales
On vient de le dire, Angular est une version réécrite d’AngularJS. Pourtant, les deux sont très utilisés (même si Angular a pris l’avantage sur son prédécesseur), et toujours maintenus, pour le moment – on en reparlera.
Bien que l’un soit la réécriture de l’autre, ils découlent de la même origine, et ont donc beaucoup de points communs. Cependant, de grandes différences séparent les deux frameworks, voyons les six plus importantes.
1) Le langage utilisé
La première grande différence entre ces deux versions de frameworks frontend, c’est évidemment le langage utilisé. Si AngularJS utilise, comme son nom l’indique, JavaScript, Angular utilise lui nativement du TypeScript – bien qu’il supporte également JavaScript.
TypeScript vient avec des nouveautés (dont, notamment, le typage statique) qui peuvent être bienvenues dans le monde du développement web.
2) Angular a été pensé pour le mobile
Angular permet la création de Single Page Applications (SPA), soit des applications web accessibles via une page web unique. Cela a pour avantage d’améliorer l’expérience utilisateur, et notamment sur un mobile. AngularJS, lui, probablement parce qu’il a été créé bien plus tôt, n’intègre pas cette fonctionnalité.
Il existe cependant des bibliothèques permettant de faciliter le développement mobile pour AngularJS.
3) La syntaxe des directives change
Entre AngularJS et Angular, la syntaxe des directives structurelles change.
Par exemple, pour boucler sur un tableau d’éléments, on utilise avec AngularJS :
Avec Angular 2+, la boucle se fait via la directive suivante :
Ainsi, ng-if devient également *ngIf.
4) Angular utilise directement la syntaxe du DOM pour les évènements
Autre changement syntaxique, on utilisera avec Angular directement la syntaxe « classique » du nom des évènements pour les gérer. Là aussi, ce sont les éléments de syntaxe commençant par « ng- » qui disparaissent. Prenons l’exemple de la gestion d’un évènement de clic ; on retrouve pour AngularJS :
<button ng-click="doSomething()">
Alors qu’avec Angular, on utilisera :
<button (click)="doSomething()">
Tous les évènements seront gérés de cette façon, en mettant son nom entre parenthèses. On retrouvera de cette manière (dbclick), (mouseenter), etc.
Pour retrouver la liste des évènements du DOM, voici la documentation.
5) La gestion du binding est différent
Si angularJS et Angular gèrent tous deux le two-way data binding (la valeur du modèle est synchronisé avec la vue, est réciproquement), ils le font différemment.
Avec AngularJS, le two-way data binding se fait automatiquement en utilisant la syntaxe suivante :
<input ng-model="vm.favoriteHero"/>
Avec Angular, le code que cela nécessite est le suivant :
<input [(ngModel)]="favoriteHero" />
Expliquons un peu cette syntaxe particulière au premier abord. Comme on l’a vu dans le point précédent, les parenthèses indiquent la gestion d’un évènement. Il s’agit ici de signifier au modèle que la vue a changé la valeur de l’élément (il s’agit donc d’un évènement). Quant aux crochets, ils sont utilisés pour le binding de propriété, donc pour synchroniser la valeur du modèle vers la vue.
Par exemple, on peut faire du one-way binding avec Angular en écrivant :
<input [ngModel]="favoriteHero" />
L’utilisation des parenthèses et des crochets signifie donc un binding dans les deux sens, de la vue vers le modèle, et réciproquement.
6) Performances
Une autres différence majeures entre ces deux versions de framework, ce sont les performances. Angular étant une réécriture d’AngularJS ; on se doute qu’il doit être en théorie au moins aussi performant. Mais jusqu’à quel point ?
Si on en croit les tests réalisés par ava.codes dont vous pouvez voir les résultats ici, on obtient les performances suivantes :
Angular, et c’est encore plus le cas dans ses dernières versions, est plus rapide sur tous les points testés. Bien que cette différence ne soit pas toujours énorme, elle est visible et peut impacter positivement l’UX.
Si vous voulez voir toutes les différences qu’il existe entre ses deux versions du framework, rendez-vous sur le site d’Angular, elles y sont expliquées, morceaux de code à l’appui.
Alors : Angular ou AngularJS ? Lequel choisir ?
Maintenant qu’on a vu les différences entre les deux frameworks, la question se pose : doit-on choisir AngularJS ou Angular ?
Si le deuxième choix semble plus judicieux (après tout le framework est plus récent, plus performant), c’est un peu plus compliqué que ça.
Les avantages d’AngularJS
En effet, bien qu’il soit plus ancien, AngularJS a toujours quelques points positifs pour lui :
- Le langage déclaratif d’AngularJS utilise HTML, il est donc plus intuitif, de base ;
- AngularJS est plus autonome, dans le sens ou Angular s’appuie généralement sur d’autres librairies pour fonctionner ;
- Cette version est compatible avec plus de navigateurs (surtout les anciens).
Les avantages d’Angular
Angular a bien sûr lui aussi ses propres arguments :
- On crée des SPA avec Angular, il est donc adapté nativement au mobile ;
- Le routing est plus simple qu’avec AngularJS ;
- Il est plus populaire que son ainé, et a donc une grosse communauté ;
- Possède une CLI (command-line interface) pour permettre d’initialiser et développer un projet ;
- Il est aussi plus performant que son prédécesseur.
On le voit, chacune de ces deux versions du framework front-end a ses avantages. Cependant, il reste un argument dont on n’a pas parlé qui devrait vous convaincre d’aller vers Angular…
Google va arrêter de maintenir AngularJS à partir du 31 décembre 2021. Bien que ce framework sera toujours utilisable, il n’aura pas de nouvelles versions officielles, pas de nouvelles fonctionnalités ni correctifs.
Il est donc, on le comprend, recommandé d’utiliser Angular 2+ pour de nouveaux projets.
Conclusion
Vous l’avez vu tout au long de cet article, AngularJS et Angular sont deux versions différentes (mais proches) du même framework. Bien qu’ayant les mêmes origines, ils ont des différences certaines, qui feront pencher la balance d’un côté ou de l’autre si jamais vous devez faire le choix entre les deux.
Pour résumer, et d’un point de vue général, il vaut mieux se diriger vers Angular plutôt qu’AngularJS, ne serait-ce que pour ses performances et le fait qu’AngularJS ne sera bientôt plus officiellement maintenu.
