Dans les grandes lignes, VueJS et Angular sont semblables ? Pourquoi, parce qu’Evan You avant de travailler sur son projet à travailler chez Google (créateur d’Angular) jusqu’en 2014 juste avant la sortie de la version 2 d’Angular, on peut donc penser qu’il s’est inspirer de beaucoup de concept d’Angular + de sa petite expérience chez Meteor en 2015.
Qu’est-ce qui change en bref ?
Jusqu’à Vue 3, c’est écrit en JS. Angular est uniquement du TypeScript. Il y a donc un webpack à l’intérieur qui transforme le code en JS et précompile par la même occasion le SCSS et CSS.
Pratique
Un composant VueJS c’est un seul fichier .vue qui contient le code HTML au-dessus, le code JS qui déclare le composant au centre, le CSS en-dessous. Pour Angular, c’est 3 fichiers séparés => .html, .css ou .scss et un .composant.ts contenu dans un dossier.
Plus propre
Angular utilise les « décorateurs », ainsi dans le fichier .composants.ts, on trouvera @Component dans lequel on fait appel au selecteur HTML (la balise du composant), le template .html et à notre ou nos fichiers de style.
Jusque là, ok
Au lieu de mettre tout le code dans les composants, Angular permet de créer des services. Ce sont des fichiers qui vont notamment faire appel à notre back-end et où aura aussi notre logique de transformation de code pour donner au composant tout ce dont il a besoin pour afficher la donnée. Ainsi, le code contenu dans mon composant devrait être composé uniquement de la « logique d’affichage ».
Bonne pratique, mais je pourrais faire de même avec Vue
Pour utiliser mon service dans le composant Angular, celui-ci sera injecté par « injection dépendance » dans le constructeur.
Là, ça se corse! Au final, si c’est juste une ligne à rajouter dans le constructeur de ma classe Component... ça va!
Dans mon service, les appels à mon back-end ne sont pas gérés par axios ou request comme avec VueJS, mais avec le service HttpClient d’Angular.
Du coup... ça signifie que pour utiliser ce service dans ce service, j’utilise à nouveau l’injection dépendance...
Mon service HttpClient ne retourne pas une promesse comme axios, mais un Observable.
Observable ? Kesako ?
Pour se représenter un « observable », il faut imaginer qu’au moment où j’en crée un, c’est comme si je crée un flux de données (un peu comme un streaming vidéo). Tant que je suis à l’écoute de ce flux, celui-ci peut par intervalle, m’envoyer des données, par contre lorsque j’arrête de l’écouter, même s’il y a des données qui pourraient continuer à circuler, c’est comme si ce flux n’existait plus. On parle donc de « souscription » à un observable.
Tiens, ça me rappelle les « event handler » quand je voulais récupérer le click de ma souris en Javascript.
En conclusion de tout ça, le service fait un appel HTTP vers le serveur, y récupère un observable, peut effectuer sur cette observable des transformations de données tout en le laissant à l’état d’observable et envoie cet observable vers mon composant par injection dépendance. Et c’est dans mon composant que je vais souscrire à cet observable pour récupérer les informations et les afficher sur mon template.
Encore assez vague, mais on dirait que la boucle est bouclée, youpi !
Et pour terminer, un petit PDF qui contient les différences d'écriture entre Angular et VueJS