Le bloc de Lego dont est faite toute application Angular moderne. Apprends à le lire, et tu peux lire 80 % de leur ERP.
Un composant = un morceau d'écran réutilisable = une classe TypeScript décorée, qui associe trois choses : un bout de logique (la classe), un bout de HTML (le template), et un nom de balise (le selector) pour l'invoquer.
[ApiController] au-dessus d'une classe pour dire au framework « traite-moi comme un contrôleur ». En Angular tu écris @Component({...}) au-dessus d'une classe pour dire « traite-moi comme un composant d'UI ». Le décorateur, c'est l'attribut. La classe reste une classe normale : champs, méthodes, constructeur.
Voici un composant minimal qui afficherait un poste de mesure dans l'ERP. Lis-le, on le décortique juste après.
import { Component } from '@angular/core';
@Component({
selector: 'app-poste-mesure', // le nom de balise
standalone: true, // autonome (cf. §3)
template: `
<h2>{{ nomPoste }}</h2>
<p>Dernière mesure : {{ derniereValeur }} mm</p>
`,
})
export class PosteMesureComponent {
nomPoste = 'Poste A — soudure'; // un champ, comme en C#
derniereValeur = 12.4;
}| Partie | Rôle | Équivalent mental |
|---|---|---|
@Component(...) | Décorateur : marque la classe comme composant | Attribut C# [...] |
selector | Le nom de balise pour l'utiliser : <app-poste-mesure> | Nom d'une balise HTML maison |
template | Le HTML affiché, avec des trous {{ }} | Une vue Razor .cshtml |
la class | La logique et les données du composant | Un ViewModel / code-behind |
Les doubles accolades {{ nomPoste }} s'appellent l'interpolation : Angular remplace le trou par la valeur du champ de la classe. C'est le pont entre la logique (la classe) et l'affichage (le template). On y reviendra en leçon 04.
Si tu as touché à AngularJS (ou à l'Angular de 2022), tu te souviens peut-être des NgModule : ces gros fichiers @NgModule({ declarations: [...], imports: [...] }) où il fallait déclarer chaque composant pour qu'il « existe ». C'était de la paperasse de câblage.
Angular moderne tue cette paperasse : un composant standalone se suffit à lui-même. Il déclare directement ce dont il a besoin (autres composants, directives) dans son propre tableau imports. Plus de module central obligatoire.
.csproj où tu devais lister à la main chaque fichier du projet pour qu'il compile. Standalone, c'est le monde moderne où le fichier déclare lui-même ses using et le build le trouve tout seul. Chaque composant porte ses propres dépendances.
| Avant (NgModule) | Maintenant (standalone) |
|---|---|
| Composant déclaré dans un module tiers | Composant autonome, se déclare lui-même |
declarations + imports dans le module | imports: [...] dans le composant |
| Beaucoup de fichiers de câblage | Un composant = un fichier qui se suffit |
standalone: true est la valeur par défaut — souvent tu ne verras même plus la ligne écrite. Mais sur un ERP qui existe depuis 2023, tu croiseras sûrement encore des NgModule legacy. Savoir lire les deux mondes, et reconnaître lequel tu as sous les yeux, c'est exactement ce qu'on attend d'un lead en reprise d'existant.
@Component({...}) ?selector: 'app-poste-mesure' ?@Component qui relie une logique, un template HTML et un selector. Standalone = il se suffit à lui-même, sans NgModule. C'est l'unité de base : tout l'ERP en est fait.
Documentation officielle Angular — Anatomy of components. Lis la section « Defining a component » et regarde leurs exemples. C'est la référence que tu citeras en équipe.