Installation Node.
js (5–7 min)
Vérifier si Node est déjà installé
bash
CopierModifier
node -v
npm -v
Installer (si absent ou version trop vieille)
Site officiel : [Link]
Prendre la version LTS (Long Term Support).
Windows
Installer .msi téléchargé depuis le site.
Vérifier dans un terminal PowerShell :
powershell
CopierModifier
node -v
npm -v
Linux (Debian/Ubuntu)
bash
CopierModifier
sudo apt update
sudo apt install -y nodejs npm
node -v
npm -v
macOS
bash
CopierModifier
brew install node
node -v
npm -v
3) Installation Angular CLI (5 min)
Angular CLI = outil en ligne de commande pour créer, lancer et builder les projets Angular.
Installation globale :
bash
CopierModifier
npm install -g @angular/cli
ng version
Mise à jour de la CLI :
bash
CopierModifier
npm update -g @angular/cli
4) Créer un nouveau projet Angular (5–7 min)
bash
CopierModifier
ng new my-app
L’outil va demander :
Routing ? → Oui (Y) si besoin de navigation.
Style → choisir CSS ou SCSS.
Lancer le serveur de dev :
bash
CopierModifier
cd my-app
ng serve
Ouvrir : [Link]
5) Structure d’un projet Angular (5–6 min)
Arborescence après ng new :
mathematica
CopierModifier
my-app/
├─ src/
│ ├─ app/
│ │ ├─ [Link] ← Composant racine
│ │ ├─ [Link] ← Module racine
│ │ └─ ... autres composants
│ ├─ assets/ ← Images, fichiers statiques
│ ├─ environments/ ← Variables env (dev/prod)
│ ├─ [Link] ← Page HTML principale
│ ├─ [Link] ← Point d’entrée TS
│ └─ [Link] ← Styles globaux
├─ [Link] ← Config build Angular
├─ [Link] ← Dépendances npm
├─ [Link] ← Config TypeScript
└─ node_modules/ ← Modules installés
Éléments clés :
Composants = UI + logique + styles propres.
Modules = regroupent composants/services pour organisation.
Services = logique métier et appels API.
Routing = navigation entre vues.
6) Mini démo rapide (bonus 2–3 min)
Créer un composant :
bash
CopierModifier
ng generate component tasks
Ajouter un affichage simple dans [Link] :
html
CopierModifier
<h2>Liste des tâches</h2>
<ul>
<li *ngFor="let t of ['Apprendre Angular','Coder
API','Tester']">{{t}}</li>
</ul>
Inclure <app-tasks></app-tasks> dans [Link].
📌 Découpage 30 min :
0–5 min → Introduction Angular
5–12 min → Installation [Link]
12–17 min → Installation Angular CLI
17–24 min → Création projet & lancement serveur
24–30 min → Structure projet + mini démo