Angular est un framework développé par Google qui sert à
construire des applications web modernes. Avant d'écrire la moindre ligne de code, prenons le temps de
comprendre à quel problème il répond : c'est ce qui rend la suite beaucoup plus simple.
1. Le problème que résout Angular
Un site classique fonctionne ainsi : vous cliquez sur un lien, le navigateur demande une
nouvelle page au serveur, l'écran blanchit, puis la page s'affiche. À chaque clic, tout est rechargé : menu, en-tête, pied de page compris.
Avec Angular, la page est chargée une seule fois. Ensuite, seules les parties qui
changent sont mises à jour. L'application devient fluide, comme une application de téléphone. On parle
d'application monopage, ou SPA pour Single Page Application.
Site classique
Application Angular
À chaque clic
Toute la page est rechargée
Seule la zone concernée change
Ressenti
Coupure visible
Instantané
Où est la logique
Sur le serveur
Dans le navigateur
2. Ce qu'Angular apporte
Une structure imposée. Angular dit où ranger chaque chose. Sur un projet à
plusieurs, c'est précieux : tout le monde s'y retrouve.
Des composants réutilisables. Un bouton, une carte produit, un menu : on
l'écrit une fois, on l'utilise partout.
La liaison de données. Quand une donnée change, l'affichage se met à jour seul.
Plus besoin de manipuler le HTML à la main.
Une boîte à outils complète. Navigation, formulaires, appels réseau : tout
est fourni et conçu pour fonctionner ensemble.
3. Angular, AngularJS : ne pas confondre
Une confusion fréquente, qui fait perdre du temps quand on cherche de l'aide en ligne :
AngularJS : la version 1, sortie en 2010, écrite en JavaScript. Elle n'est
plus maintenue.
Angular : à partir de la version 2 (2016), entièrement réécrite, en
TypeScript. C'est celle que l'on apprend ici.
Si un tutoriel parle de $scope ou de ng-app, il traite d'AngularJS :
passez votre chemin.
4. Ce qu'il faut savoir avant de commencer
Angular n'est pas un premier langage. Pour avancer sereinement, il vaut mieux être à l'aise
avec :
Si JavaScript vous semble encore flou, consolidez-le d'abord : Angular deviendra alors beaucoup
plus lisible.
À retenir
Angular sert à construire des applications web monopage
La page se charge une fois, puis seules les zones utiles changent
Angular (v2 et au-delà) n'a rien à voir avec AngularJS
HTML, CSS et JavaScript sont des prérequis
Exercices d'application
Exercice 1. Observer la différenceOuvrez un site classique et une application monopage (par exemple une messagerie en ligne). Notez ce qui se passe à l'écran quand vous cliquez sur un menu. Décrivez la différence en trois phrases.
Exercice 2. Reconnaître la versionCherchez trois tutoriels Angular sur le web. Pour chacun, dites s'il parle d'AngularJS ou d'Angular, et sur quel indice vous vous appuyez.
Exercice 3. Faire le pointListez honnêtement ce que vous savez faire en JavaScript : déclarer une variable, écrire une fonction, parcourir un tableau, manipuler un objet. Ce qui manque est à revoir avant le chapitre 4.
Faites-les dans un vrai projet : c'est en pratiquant que l'on retient.