On part de zéro. Comment une page web marche vraiment, pourquoi les « apps web » existent, et où Angular entre en scène.
LA STACK · Angular de 0 à expert · la façon MarQenti
À la fin de cette séance, tu sauras
Ce que tu comprendras
Ce qui se passe vraiment quand tu ouvres une page web
Ce qu'est le DOM, et pourquoi c'est le cœur de tout
La différence entre un site classique et une SPA
Ce qu'est un framework, ce qu'est Angular, et pourquoi on le choisit
Ton environnement installé, ton premier projet qui tourne
MarQentiCours 1 · Fondations · S.1
?
D'abord : comment marche une page web
Avant Angular, avant tout code — que se passe-t-il quand tu tapes une adresse et appuies sur Entrée ?
Étape 1 · la requête
Ton navigateur demande, un serveur répond
Tu tapes une adresse. Ton navigateur envoie une requête à un serveur quelque part dans le monde. Le serveur renvoie un document : du HTML.
1
Navigateur « donne-moi cette page »
2
Requête part sur le réseau
3
Serveur prépare la réponse
4
HTML revient au navigateur
On reviendra en détail sur les requêtes — méthodes, en-têtes, statuts — au Cours 2. Pour l'instant : une demande, une réponse.
MarQentiCours 1 · Fondations · S.1
Étape 2 · le HTML
Le HTML, c'est la structure
Le HTML n'est pas une image de la page — c'est du texte balisé qui décrit la structure : ici un titre, là un paragraphe, là un bouton. Le navigateur le lit et le dessine.
une page, en HTML<body>
<h1>Atelier</h1>
<p>Tes clients, tes projets.</p>
<button>Nouveau client</button>
</body>
MarQentiCours 1 · Fondations · S.1
Étape 3 · le DOM — le concept clé
Le navigateur transforme le HTML en un arbre vivant
En lisant le HTML, le navigateur construit une version en mémoire : le DOM (Document Object Model). C'est ton HTML transformé en un arbre d'objets que du code peut lire et modifier en direct.
le même HTML, vu comme un arbre (le DOM)document
└─ body
├─ h1 → « Atelier »
├─ p → « Tes clients, tes projets. »
└─ button → « Nouveau client »
Pourquoi ça change tout : change le DOM, et la page change à l'écran, instantanément. Tout le développement front — Angular compris — n'est qu'une façon organisée de modifier le DOM.
MarQentiCours 1 · Fondations · S.1
2
Deux façons de construire un site
La vieille — une page à la fois. La moderne — une seule page qui se transforme. C'est toute la différence entre un site et une app.
À l'ancienne, puis la SPA
Multi-pages vs page unique
Le site classique (MPA)
chaque clic = une nouvelle requête
le serveur renvoie une page entière
l'écran recharge — le flash blanc
tu perds l'état à chaque fois
La SPA
le navigateur charge la page une fois
ensuite, du code modifie le DOM en place
aucun rechargement — ça glisse
ça ressemble à une app, pas à un document
MarQentiCours 1 · Fondations · S.1
La bascule mentale
Un site classique livre des pages. Une SPA livre une application.
C'est le saut que ce cours te fait faire : arrêter de penser « des pages qu'on recharge », commencer à penser « un écran vivant qui réagit ». Le DOM ne se recharge plus — il se transforme.
MarQentiCours 1 · Fondations · S.1
Le problème
Une SPA à la main, c'est l'enfer
Sans outil, tu devrais gérer toi-même : quel écran afficher, comment mettre le DOM à jour à chaque changement, comment garder les données synchronisées, la navigation, les formulaires, la sécurité… pour chaque fonctionnalité.
Ce qui arrive : chacun le fait à sa façon, le code devient un plat de spaghettis, et au bout d'un mois plus personne ne sait pourquoi l'écran affiche la mauvaise valeur.
MarQentiCours 1 · Fondations · S.1
La solution
Un framework fait le travail lourd
Un framework, c'est une boîte à outils structurée : il gère le rendu du DOM, la navigation, les formulaires, les requêtes — pour que tu écrives ta fonctionnalité, pas la plomberie.
Il t'impose une structure
tout le monde écrit le code de la même façon — une équipe se relit.
Il gère le DOM pour toi
tu décris ce que tu veux à l'écran ; lui s'occupe de le dessiner et de le mettre à jour.
Il a déjà résolu les pièges
sécurité, performance, navigation — testés par des millions de projets.
MarQentiCours 1 · Fondations · S.1
Enfin — Angular
Angular : le framework complet
Angular n'est pas une petite librairie qu'on complète avec dix autres. C'est un framework complet : le routing, les formulaires, les requêtes HTTP, la sécurité, les tests — tout est inclus, et tout est fait pour marcher ensemble.
La conséquence : moins de choix à débattre, moins d'assemblage, plus de temps à construire. Le prix à payer : une structure plus stricte à apprendre — ce cours est là pour ça.
MarQentiCours 1 · Fondations · S.1
Le choix MarQenti
Pourquoi on construit sur Angular
Structure = équipe alignée
cinq développeurs, un seul style de code. On se relit sans friction.
Tout inclus
on ne perd pas une semaine à choisir et coller des librairies.
Ça passe à l'échelle
un petit site comme un gros produit, la même architecture tient.
Le SEO résolu (SSR)
une SPA visible sur Google — on le fera au Cours 3.
MarQentiCours 1 · Fondations · S.1
⌘
Installe ton atelier
Assez de théorie. On installe les trois outils dont tout développeur Angular a besoin, et on lance un vrai projet.
Outil 1 & 2 · Node et npm
Faire tourner du JavaScript hors du navigateur
Node.js permet d'exécuter du JavaScript sur ta machine, pas seulement dans un navigateur — c'est ce qui fait tourner tous les outils d'Angular. npm vient avec : c'est le gestionnaire de paquets, il installe les librairies dont ton projet a besoin.
terminal — vérifie que c'est installénode -v # doit afficher une version, ex : v20.x
npm -v # pareil — npm est venu avec Node
MarQentiCours 1 · Fondations · S.1
Outil 3 · le CLI Angular
La ligne de commande qui fait tout
Le CLI (Command-Line Interface) d'Angular crée le projet, génère les fichiers, lance le serveur, construit pour la prod. C'est ton outil de tous les jours.
terminalnpm i -g @angular/cli # installe le CLI, une fois pour toutes
ng new atelier # crée notre projet « Atelier »
--routing --style=scss --ssr
On détaillera chaque option (routing, scss, ssr) dans les séances où elles comptent. Aujourd'hui : on crée, on lance, on regarde.
MarQentiCours 1 · Fondations · S.1
Le serveur de développement
ng serve — ton atelier en direct
Un serveur de dev est un petit serveur qui tourne sur ta machine. Il compile ton code et le sert dans le navigateur — et à chaque fois que tu sauvegardes, il recharge tout seul. Tu codes, tu vois.
terminal, dans le dossier atelierng serve
# → ouvre http://localhost:4200# modifie un fichier, sauvegarde → l'écran se met à jour seul
À retenir : le serveur de dev est fait pour toi qui codes — rapide, rechargement automatique. Ce n'est pas ce qu'on met en ligne. Le « build de production », c'est une autre bête — on la dompte en Séance 4.
MarQentiCours 1 · Fondations · S.1
Ce que tu viens de créer
Un vrai projet, déjà debout
atelier/src/app/ # ton code à toi
src/index.html # la seule page HTML de la SPA
angular.json # la config du projet
package.json # la liste de tes librairies
node_modules/ # les librairies installées (on n'y touche jamais)
Une seule page HTML — souviens-toi, c'est une SPA. Tout le reste vit dans src/app, et Angular injecte tout dans cette page unique. On explore ce dossier en détail dès la Séance 2.
MarQentiCours 1 · Fondations · S.1
Le fil rouge des 12 séances
On construit « Atelier » ensemble
Pas des exemples jetables. Un vrai produit, brique par brique jusqu'à la mise en ligne : un gestionnaire de clients, projets et factures.
C1
Fondations comprendre & l'interface
C2
Construire données, formulaires, API
C3
Expert sécurité, SSR, mise en ligne
MarQentiCours 1 · Fondations · S.1
✎
À toi de jouer
On ne repart pas avec des notes — on repart avec un projet Angular qui tourne sur ta machine.
Exercice · 15 minutes
Lance ton premier projet
AVérifie node -v et npm -v (installe Node si besoin)
BInstalle le CLI : npm i -g @angular/cli
CCrée le projet : ng new atelier
DLance ng serve et ouvre localhost:4200
EEn une phrase : c'est quoi le DOM ?
Bloqué à l'installation ? C'est normal, c'est la partie la moins amusante. Une fois passée, tu ne la refais plus jamais.
MarQentiCours 1 · Fondations · S.1
Ton plan d'action — cette semaine
Trois gestes, pas plus
Fais tourner ng serve et change le texte dans app.html — regarde l'écran se mettre à jour
Ouvre les outils de développement du navigateur (F12) → onglet Elements : tu regardes le DOM en vrai
Explique le DOM et la SPA à quelqu'un qui n'y connaît rien — c'est le vrai test
MarQentiCours 1 · Fondations · S.1
Récapitulatif
La séance en une phrase
Le navigateur transforme le HTML en DOM ; une SPA le charge une fois puis le transforme sans recharger ; Angular est le framework complet qui gère ces transformations pour toi — et il tourne maintenant sur ta machine.
MarQentiCours 1 · Fondations · S.1
“
Tu ne construis pas des pages. Tu construis un écran vivant.