Angular - 1.2 Angular définition

Angular, qu'est-ce que c'est ? C'est un framework JavaScript qui permet de créer des Single Page Applications, ou SPA en abrégé. Une SPA, c'est une application sur laquelle on navigue d'une rubrique à l'autre sans jamais recharger la page : il n'y a qu'un seul fichier HTML, et c'est uniquement son contenu qui change à la volée.

Pour bien comprendre, comparez avec un site classique comme GitHub. Quand on clique sur une rubrique, on observe un léger clignotement dans le navigateur et une icône de chargement (le loader) dans l'onglet : c'est parce qu'une nouvelle page est demandée au serveur. À l'inverse, sur une SPA, le passage d'une rubrique à l'autre est instantané et aucun loader n'apparaît, puisque le serveur n'est plus sollicité pour recharger la page.

Pourquoi c'est intéressant

L'expérience utilisateur est très réactive : JavaScript s'exécute localement, bien plus rapidement qu'un aller-retour vers un serveur distant.
Les SPA donnent l'impression d'utiliser un logiciel client ou une application mobile native.
Si l'on a besoin de charger des données depuis un serveur, on le fait en arrière-plan (en tâche de fond) pour ne pas casser cette réactivité.

Concrètement, à chaque clic sur une rubrique, JavaScript modifie le DOM dynamiquement, c'est-à-dire qu'il change le code HTML pendant l'exécution de l'application. C'est pour cela qu'on ne voit jamais l'icône de rafraîchissement tourner et que l'affichage est immédiat. Si vous inspectez le code source d'une SPA, vous remarquerez qu'elle ne contient qu'une douzaine de lignes de HTML, sans la plupart des éléments visibles à l'écran : pas de <h1>, pas d'images, pas de paragraphes. Tout cela est en fait généré et injecté à la volée par Angular en modifiant le DOM en fonction de la navigation.

Tout au long de cette formation, vous allez apprendre exactement ce qui se passe en coulisses et comment Angular orchestre tout ce travail : composants, templates, data binding, modules et services. C'est cette mécanique qui rend les applications Angular si rapides et si agréables à utiliser.

En résumé

Angular est un framework JavaScript conçu pour développer des Single Page Applications (SPA). Une SPA est une application web fonctionnant sur une seule page HTML, où seul le contenu change dynamiquement au lieu de charger de nouvelles pages. Cette architecture offre une expérience utilisateur très réactive et instantanée, sans les loaders caractéristiques des sites web classiques, grâce à la modification du DOM par JavaScript.

Points clés

Angular est un framework JavaScript pour créer des Single Page Applications (SPA)
Une SPA utilise une seule page HTML et un seul fichier, le contenu change dynamiquement sans rechargement de page
Contrairement aux sites classiques (GitHub), il n'y a pas de loader — l'affichage est instantané car on ne demande pas de nouvelle page au serveur
Le JavaScript modifie le DOM dynamiquement pour construire la page selon la navigation utilisateur
L'expérience utilisateur est très réactive car seul le contenu change, pas toute la page
Le code HTML est minimal (environ 13 lignes) car c'est JavaScript qui construit la majeure partie de la page

Questions fréquentes

Qu'est-ce qu'une Single Page Application (SPA) ?

Une SPA est une application web avec une seule page HTML et un seul fichier. Au lieu de charger de nouvelles pages à chaque clic (comme sur GitHub), seul le contenu change dynamiquement, d'où une expérience plus réactive et fluide.

Pourquoi une SPA est-elle plus réactive qu'un site web classique ?

Car seul le contenu change, sans demander de nouvelle page au serveur. Il n'y a donc pas de loader et l'affichage est instantané. Le JavaScript modifie le DOM dynamiquement en réponse à la navigation utilisateur.

Comment Angular construit-il une page si le HTML est minimal ?

Angular utilise JavaScript pour modifier le DOM dynamiquement. Le fichier HTML minimal (environ 13 lignes) contient juste la structure de base, et Angular enrichit le contenu en temps réel en réponse aux interactions utilisateur.