Cours Angular · Module 1: Introduction à Angular
Qu'est-ce qu'Angular ?
Dans cette leçon3
Bienvenue à l'Académie des Samouraïs du Code ! Je suis Maître Ango-san, et je serai ton guide sur la voie d'Angular. Tout comme un jeune samouraï doit apprendre l'histoire de son clan, tu dois apprendre les origines du framework que tu vas maîtriser.
Histoire d'Angular - d'AngularJS à Angular 19
Angular est un framework puissant créé par Google, et son histoire est aussi fascinante que les récits de guerriers légendaires.
L'ère AngularJS (2010-2016)
En 2010 naît AngularJS (Angular 1.x) - l'un des premiers frameworks à avoir révolutionné le développement d'applications web. Il a popularisé dans le navigateur des concepts comme la liaison de données bidirectionnelle et l'injection de dépendances.
La naissance d'Angular 2+ (2016)
En 2016, Google a réécrit le framework depuis zéro, donnant naissance à Angular 2. Ce fut comme passer d'une épée de bois à un katana - un outil entièrement nouveau, construit sur TypeScript.
Angular aujourd'hui (v19+)
Aujourd'hui, Angular (dans ce cours, la version 19 et les suivantes) est un framework mature et « opinionated », qui propose :
- Standalone Components - des guerriers indépendants, sans besoin de modules
- Signals - un système de réactivité (depuis Angular 16, stable depuis la 17), comme des signaux de fumée entre les châteaux
- Zoneless - le futur sans Zone.js, pour de meilleures performances
La philosophie d'Angular - le code Bushido du framework
Angular est « opinionated » - il impose des règles et une structure clairement définies, un peu comme le code Bushido pour les samouraïs.
Les principes d'Angular :
- Structure - chaque projet a une organisation définie
- TypeScript - le typage, c'est la discipline et la précision
- Injection de dépendances - le système de ravitaillement du guerrier
- Composants - l'unité de base, comme un samouraï pris individuellement
1// Premier composant Angular - simple comme une salutation au dojo
2import { Component } from '@angular/core';
3
4@Component({
5 selector: 'app-dojo',
6 standalone: true,
7 template: `
8 <div class="dojo">
9 <h1>道場 Code Dojo</h1>
10 <p>Bienvenue, jeune guerrier : {{ name }}</p>
11 </div>
12 `
13})
14export class DojoComponent {
15 name = 'Apprenti';
16}Angular face aux autres frameworks
| Critère | Angular | React | Vue |
|---|---|---|---|
| Type | Framework complet | Bibliothèque | Framework progressif |
| Langage | TypeScript (obligatoire) | JavaScript/TypeScript | JavaScript/TypeScript |
| Structure | Stricte (opinionated) | Flexible | Flexible |
| Courbe d'apprentissage | Raide | Moyenne | Douce |
| Idéal pour | Entreprise, grands projets | UI, flexibilité | Prototypes, projets de taille moyenne |
Angular, c'est comme l'entraînement traditionnel des samouraïs : il exige discipline et temps, mais il pose des bases solides pour toute la carrière d'un développeur.
Code de cette leçon : src/app/app.component.ts
1import { Component } from '@angular/core';
2
3@Component({
4 selector: 'app-root',
5 standalone: true,
6 template: `
7 <div class="dojo">
8 <header class="dojo-header">
9 <h1>Académie des Samouraïs du Code</h1>
10 <p class="subtitle">道場 Angular Dojo - Module 1</p>
11 </header>
12
13 <main class="dojo-content">
14 <section class="welcome-panel">
15 <h2>Bienvenue, jeune guerrier !</h2>
16 <p>
17 Voici ton premier composant Angular dans notre Dojo.
18 Nous l'avons créé comme Standalone Component - un guerrier indépendant.
19 </p>
20 <p>
21 <strong>Maître Ango-san :</strong> « Chaque grand voyage commence par un seul pas.
22 Ta voie de samouraï du code vient de commencer ! »
23 </p>
24 </section>
25
26 <section class="info-panel">
27 <h3>Qu'est-ce qu'Angular ?</h3>
28 <ul>
29 <li>Framework créé par Google</li>
30 <li>TypeScript comme fondation</li>
31 <li>Standalone Components</li>
32 <li>Signals - la nouvelle réactivité</li>
33 </ul>
34 </section>
35
36 <section class="counter-demo">
37 <h3>Compteur d'entraînements</h3>
38 <div class="counter">
39 <button (click)="decrementTraining()" class="btn">-</button>
40 <span class="training-display">{{ trainingCount }} entraînements</span>
41 <button (click)="incrementTraining()" class="btn">+</button>
42 </div>
43 <p class="status" [class]="getStatusClass()">
44 Statut : {{ getStatusText() }}
45 </p>
46 </section>
47 </main>
48
49 <footer class="dojo-footer">
50 <p>道場 Code Dojo © 2024 - La voie du samouraï Angular</p>
51 </footer>
52 </div>
53 `,
54 styles: [`
55 .dojo {
56 font-family: 'Segoe UI', sans-serif;
57 max-width: 800px;
58 margin: 0 auto;
59 padding: 20px;
60 background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
61 min-height: 100vh;
62 color: #eee;
63 }
64
65 .dojo-header {
66 text-align: center;
67 padding: 20px;
68 border-bottom: 2px solid #c9a227;
69 }
70
71 .dojo-header h1 {
72 color: #c9a227;
73 margin: 0;
74 font-size: 2rem;
75 }
76
77 .subtitle {
78 color: #888;
79 font-style: italic;
80 }
81
82 .dojo-content {
83 padding: 20px 0;
84 }
85
86 .welcome-panel, .info-panel, .counter-demo {
87 background: rgba(255,255,255,0.05);
88 border: 1px solid #c9a227;
89 border-radius: 8px;
90 padding: 20px;
91 margin-bottom: 20px;
92 }
93
94 h2, h3 {
95 color: #c9a227;
96 }
97
98 ul {
99 list-style: none;
100 padding-left: 0;
101 }
102
103 ul li::before {
104 content: "» ";
105 }
106
107 .counter {
108 display: flex;
109 align-items: center;
110 justify-content: center;
111 gap: 20px;
112 margin: 20px 0;
113 }
114
115 .btn {
116 background: #c9a227;
117 color: #1a1a2e;
118 border: none;
119 width: 40px;
120 height: 40px;
121 font-size: 1.5rem;
122 border-radius: 50%;
123 cursor: pointer;
124 transition: transform 0.2s;
125 }
126
127 .btn:hover {
128 transform: scale(1.1);
129 }
130
131 .training-display {
132 font-size: 1.5rem;
133 min-width: 150px;
134 text-align: center;
135 }
136
137 .status {
138 text-align: center;
139 padding: 10px;
140 border-radius: 4px;
141 }
142
143 .status.beginner { background: #4a5568; }
144 .status.intermediate { background: #2d6a4f; }
145 .status.advanced { background: #7c3aed; }
146 .status.master { background: #c9a227; color: #1a1a2e; }
147
148 .dojo-footer {
149 text-align: center;
150 padding: 20px;
151 border-top: 1px solid #333;
152 color: #666;
153 }
154 `]
155})
156export class AppComponent {
157 trainingCount = 0;
158
159 incrementTraining(): void {
160 this.trainingCount++;
161 }
162
163 decrementTraining(): void {
164 if (this.trainingCount > 0) {
165 this.trainingCount--;
166 }
167 }
168
169 getStatusClass(): string {
170 if (this.trainingCount >= 100) return 'master';
171 if (this.trainingCount >= 50) return 'advanced';
172 if (this.trainingCount >= 10) return 'intermediate';
173 return 'beginner';
174 }
175
176 getStatusText(): string {
177 if (this.trainingCount >= 100) return 'Maître !';
178 if (this.trainingCount >= 50) return 'Avancé';
179 if (this.trainingCount >= 10) return 'Intermédiaire';
180 return 'Débutant';
181 }
182}Tu as repéré une erreur dans cette leçon ?
Teste tes connaissances
Réponds aux questions de cette leçon. Choisis une réponse pour voir tout de suite si elle est correcte.
1. En quelle année Angular 2+ a-t-il été publié (réécrit depuis zéro en TypeScript) ?
2. Quelle entreprise a créé et maintient le framework Angular ?
3. Que signifie le fait qu'Angular soit un framework « opinionated » ?
4. Lequel des éléments suivants est le nouveau système de réactivité d'Angular ?
Tâches pratiques dans le jeu
- Tri horizontal
Ordonne sur une seule ligne l'import correct du décorateur Component depuis la bibliothèque Angular :
- Clique dans l'ordre
Clique dans l'ordre pour construire le début du décorateur de composant : @Component({})