Angular

Qu'est-ce qu'Angular ?

Avant de commencer l'installation et les leçons, il est utile de comprendre ce qu'est Angular, à quoi il sert et pourquoi il est utilisé, avant de passer à la pratique.

C'est quoi, à quoi ça sert, pourquoi ?

• C'est quoi ? Angular est un framework (et non une simple bibliothèque) front-end open source, développé et maintenu par Google, basé sur TypeScript. Il fournit une structure complète et opinionated pour construire des applications web : gestion des composants, du routage, des formulaires, des requêtes HTTP, de l'injection de dépendances, etc.
• À quoi ça sert ? À construire des Single Page Applications (SPA) : des applications web qui se chargent une seule fois dans le navigateur, puis mettent à jour dynamiquement leur contenu (sans recharger la page entière) à chaque interaction ou changement de page.
• Pourquoi ? Développer une application web complexe uniquement en HTML/CSS/JavaScript "brut" devient vite ingérable : code dupliqué, DOM manipulé à la main, absence de structure commune entre développeurs. Angular impose une organisation claire (composants, services, modules) qui facilite le travail en équipe, la maintenance et le passage à l'échelle d'un projet.

Framework vs bibliothèque

Une différence importante à comprendre :

• Une bibliothèque (comme jQuery) est une boîte à outils : c'est le développeur qui décide quand et comment l'utiliser.
• Un framework (comme Angular) impose une structure : c'est le framework qui définit l'organisation du code, et le développeur s'y conforme.

Angular fournit "tout compris" : routage, gestion de formulaires, client HTTP, injection de dépendances, outils de build (Angular CLI)... contrairement à des bibliothèques comme React, où il faut souvent assembler soi-même plusieurs outils tiers.

Les briques de base d'Angular

Concept	Rôle	Où l'apprendre dans ce wiki
Composant	Brique d'interface réutilisable (classe + template + styles)	Composants
Template	Le HTML qui décrit l'affichage d'un composant	Composants
Signal	Conteneur de valeur réactif : le template se met à jour automatiquement	Composants
Routeur	Navigation entre plusieurs vues sans recharger la page	Routage
Formulaire	Collecte et validation de la saisie utilisateur	Formulaires
Service	Classe de logique/données réutilisable entre composants	Services
Injection de dépendances	Fourniture automatique d'une instance de service à un composant	Injection-de-dependances
Pipe	Transformation de l'affichage d'une donnée dans le template	Pipes

Exemple concret

Voici la plus petite application Angular possible : un unique composant qui affiche un message.

// hello.ts
import { Component, signal } from '@angular/core';

@Component({
  selector: 'app-hello',
  template: `
    <h1>Bonjour, {{ prenom() }} !</h1>
    <p>Ceci est ma première application Angular.</p>
  `,
})
export class Hello {
  prenom = signal('Fanny');
}

// main.ts
import { bootstrapApplication } from '@angular/platform-browser';
import { Hello } from './hello';

bootstrapApplication(Hello);

Ce qui se passe concrètement :

1. bootstrapApplication démarre l'application dans le navigateur en utilisant Hello comme composant racine.
2. Angular lit le template du composant et l'affiche dans la page.
3. {{ prenom() }} est de l'interpolation : elle insère la valeur du signal prenom dans le HTML.
4. Si prenom changeait (ex : prenom.set('Léo')), le texte affiché se mettrait à jour automatiquement, sans manipuler le DOM à la main.

C'est exactement ce mécanisme (composant + template + réactivité) que l'on retrouve, complexifié, dans toutes les leçons suivantes.

Pour résumer

Angular = TypeScript + composants + outils intégrés (routeur, formulaires, HTTP, DI) + Angular CLI, le tout pensé pour construire des applications web robustes et maintenables à grande échelle.

---