Angular

Composants

L'architecture est basée sur des composants, ce qui encourage un meilleur découplage de l'application et permet la réutilisation d'éléments d'interface. Chaque composant encapsule son propre code HTML (la vue), son CSS (le style) et sa logique métier (le code en TypeScript), ce qui facilite la gestion et le test des différentes parties d'une application.

Voici un exemple de composant:

@Component({
  selector: 'app-simple',
  template: `<h1>Bienvenue sur notre application!</h1>`,
  styles: `h1 { color: red; }`
})
export class SimpleComponent {
  // La logique du composant peut être ajoutée ici
}

Data binding

Le data binding facilite la synchronisation des données entre le modèle et la vue. Avec Angular, il peut être bidirectionnel.

Voici un exemple de data binding bidirectionnel avec un formulaire permettant de modifier le nom affiché:

@Component({
  template: `
    <input type="text" [(ngModel)]="name" />
    <p>Mon nom est {{ name }}</p>
  `
})
export class AppComponent {
  name = 'Emeline';
}

Injection de dépendance

L'injection de dépendances permet de fournir des services aux composants qui en ont besoin. Un service est une classe qui contient des fonctionnalités réutilisables, comme l'accès à un serveur web. Cela facilite le partage de code entre les composants, réduit le couplage et simplifie les tests unitaires.

@Injectable({ providedIn: 'root' })
export class UserService {
  getUsers() { /* logique pour récupérer des utilisateurs */ }
}

@Component({ selector: 'app-user', templateUrl: './user.component.html' })
export class UserComponent {
  constructor(private userService: UserService) {}
  
  loadUsers() {
    this.userService.getUsers().subscribe(users => console.log(users));
  }
}

Directives

Les directives étendent le HTML avec de nouvelles fonctionnalités spécifiques à l'application.

Routeur

Un routeur permet de naviguer entre les différentes vues de l’application. Il est possible par exemple de changer de vue en cliquant sur un lien.

Server-Side Rendering (SSR)

Le Server-Side Rendering consiste à générer le contenu de l'application côté serveur, puis à l'envoyer au navigateur. Angular permet de le mettre en place depuis la version 17. Les avantages sont un meilleur référencement du site et un chargement initial plus rapide.

Signal

Introduit avec Angular 16, Angular a repris le principe de signal déjà utilisé par d'autres frameworks, comme SolidJS ou Vue. L'objectif est d'améliorer les performances de détection des changements tout en simplifiant l'utilisation. Un signal est un conteneur pour une valeur qui permet d'être averti lorsque la valeur qu'il contient change. Tous les types de données sont pris en charge.

const count = signal(0);

// Lecture
console.log('Le compte est: ' + count());

// Ecriture
count.set(3);

// Mise à jour à partir de la valeur actuelle
// Incremente la valeur de 1.
count.update((value) => value + 1);

const double = computed(() => count() * 2);

Il est possible de créer un signal en lecture seule à partir d'un ou plusieurs signaux à l'aide de la méthode computed, ou d'exécuter du code lorsque la valeur d'un signal change à l'aide de la méthode effect. Ces valeurs peuvent alors être affichées dans un modèle HTML.

<div>  Compte : {{ count() }}</div>

Nom

À l'origine, la réécriture d'AngularJS avait été appelée « Angular 2 » par l'équipe mais cela avait conduit à des confusions entre les développeurs. Pour clarifier, l'équipe a décidé d'utiliser des termes différents pour chaque framework: « AngularJS », pour les versions 1.X, basées sur JavaScript, et « Angular » (sans le « JS »), pour les versions 2 et suivantes.

Version 2

Angular 2.0 est annoncé à la conférence ng-europe 2014, qui s'est déroulée les 22 et 23 octobre de cette même année^,. Les changements drastiques dans la version 2.0 ont créé beaucoup de controverses parmi les développeurs. Le 30 avril 2015, les développeurs d'Angular annoncent que la version 2 passe de la version alpha à la version d'essai pour les développeurs. Angular 2 passe en version bêta en décembre 2015 et la première version candidate à la production est publiée en mai 2016. La version finale est publiée le 14 septembre 2016.

Version 4

Le 13 décembre 2016, Angular 4 a été annoncé ; le saut de la version 3 étant fait pour éviter une confusion en raison de l'absence d'alignement de la version du routeur qui avait déjà été distribuée en v3.3.0. La version finale a été publiée le 23 mars 2017. Angular 4 est compatible avec Angular 2.

Angular 4.3 est une version mineure, ce qui signifie qu'il ne contient pas de modifications importantes et que c'est un remplacement direct pour les versions 4.x.x.

Fonctionnalités de la version 4.3 :

• Introduction de HttpClient, bibliothèque plus petite, plus facile à utiliser et plus puissante pour faire des requêtes HTTP ;
• Nouveaux évènements du cycle de vie du routeur pour les Gardes et les Résolveurs. Quatre nouveaux évènements : GuardsCheckStart, GuardsCheckEnd, ResolveStart, ResolveEnd rejoignent l'ensemble des évènements de cycle de vie tels que NavigationStart ;
• Désactivation conditionnelle des animations.

Version 5

Angular 5 est sorti le 1^er novembre 2017. Des améliorations-clés dans Angular 5 incluent le soutien des applications web progressives, un optimiseur de production et des améliorations liées à Material Design.

Version 6

Angular 6 est sorti le 4 mai 2018. Il s'agit d'une version majeure qui se concentre moins sur le framework sous-jacent et davantage sur la suite d'outils :

• ng update,
• ng add,
• Angular Elements,
• Angular Material + CDK Components,
• Angular Material Starter Components,
• CLI Workspaces,
• Library Support,
• Tree Shakable Providers,
• Animations Performance Improvements,
• RxJS v6.

Version 7

Angular 7 a été publié le 18 octobre 2018. Cette version ne présente que peu de nouveautés. L'interface en ligne de commande (CLI) a toutefois été améliorée. Angular Material prend désormais en charge le défilement virtuel et le glisser-déposer. Angular 7 est également plus rapide que les versions précédentes.

Version 8

Angular 8 est sorti le 28 mai 2019. Cette version intègre partiellement un nouveau compilateur: Ivy. Elle offre également un meilleur support des Web Workers. Le JavaScript est chargé plus rapidement sur les navigateurs modernes. La migration depuis AngularJS est également facilitée.

Version 9

Angular 9 est sorti le 6 février 2020.

• Mise en place du moteur de rendu Ivy par défaut, pour la compilation et le runtime.
• Des méthodes de test des composants, améliorées, sont introduites.

Version 10

Angular 10 est sorti le 24 juin 2020.

• Angular Material inclut désormais un nouveau sélecteur de plage de dates
• Un mode "strict" lors de la création d'un nouveau projet avec "ng new"
• Angular a été allégé des bundles ESM5 ou FESM5 (moins de téléchargement)

Version 11

Angular 11 est sorti le 10 novembre 2020. Les points essentiels sont des améliorations de performance (sur l'intégration des polices), une amélioration pour le développement et le cycle de construction des applications avec par exemple la prise en charge de TypeScript 4.0.

Version 12

Angular 12 est sorti le 13 mai 2021.

• IE 11 est déprécié.
• View Engine est déprécié ; Ivy devient le moteur de rendu par défaut.
• Le mode strict est activé par défaut.

Version 13

Angular 13 est sorti le 4 novembre 2021.

• Suppression du support d'IE 11.
• View Engine a été supprimé du mode de compilation au profit d'Ivy. Un avertissement est affiché pour les bibliothèques encore sous View Engine (Angular 12 et moins).
• Cache de build persistant, pour améliorer le temps de build

Version 14

Angular 14 est sorti le 2 juin 2022.

• Amélioration du support des micro-frontends
• Mise en place des composants autonomes (standalone) sans ngModule.
• La validation des formulaires est maintenant typable.

Version 15

Angular 15 est sorti le 16 novembre 2022 et apporte les nouveautés suivantes:

• L'API Standalone est désormais stable.
• Une directive image, pour un chargement amélioré des images.
• Les composants Material ont été migrés vers la base MDC (Material Design Components).
• Une API de composition de directives.

Version 16

Angular 16 est sorti le 3 mai 2023.

Cette version introduit, en aperçu développeur :

• Une refonte du système de réactivité : Angular Signals.
• Un nouveau système de construction des exécutables (builder) basée sur esbuild et intégrant Vite.

Cette version fournit également :

• Un script de migration vers des composants autonomes (standalone).
• Un paramètre booléen indiquant un Input comme étant requis.

Version 17

Angular 17 a été publiée le 8 novembre 2023.

• Cette version introduit un mécanisme de flux de contrôle déclaratif.
• On notera par ailleurs que la construction des exécutables (build) a été améliorée : elle se déroule plus rapidement et apporte des gains de performance
• De plus, la documentation a été revue.
• Mise en place d'une nouvelle syntaxe pour les templates. Par exemple :

  <ng-container *ngFor="let item of list">
    <div *ngIf="condition; else elseTemplate">
      A
    </div>
    <ng-template #elseTemplate>
      <div>
        B
      </div>
    </ng-template>
  </ng-container>
  

  est remplacé par :

  @for (item of list; track item) {
    @if (condition) {
      <div>A</div>
    } @else {
      <div>B</div>
    }
  }
  

Version 18

Angular 18 a été publiée le 22 mai 2024. Voici quelques nouveautés:

• Détection sans zone.js en mode expérimental
• Amélioration des signaux avec de nouvelles API en aperçu développeur
• Le mode SSR a été amélioré (hydratation partielle, rejeu des événements).
• Amélioration du débogage

Version 19

Angular 19 a été publiée le 19 novembre 2024. Voici les nouveautés sont:

• L'hydratation incrémentale qui permet un rendu côté serveur (SSR) plus rapide.
• Standalone activé par défaut.
• Une nouvelle API resource() pour gérer les données.
• De nouveaux signaux (dont linkedSignal).
• Modes SSR par route (client, server, prerender).
• L'HMR (Hot Module Replacement) a été amélioré et est plus rapide (il est même disponible même pour les templates).
• Un nouveau Time Picker dans Angular Material.
• Une configuration de sécurité du contenu (CSP) plus stricte.

Version 20

Angular 20 a été publiée le 28 mai 2025. Les nouveautés sont les suivantes:

• Un mode sans zone.js en prévisualisation (gain de performances en vue).
• Une meilleure intégration des signaux.
• Une amélioration de l'expérience de débogage, avec une meilleure intégration dans les outils de développement Chrome (DevTools).
• Une mise à jour du guide de style.

Version 21

La version 21 d'Angular a été publiée le 19 novembre 2025.

• Les formulaires utilisant la nouvelle librairie Signal sont disponibles de manière expérimentale.
• Une nouvelle bibliothèque, nommée Angular Aria, est annoncée, et l'accessibilité en sera la priorité.
• Les agents d'IA peuvent utiliser le serveur MCP d'Angular, ce qui permet aux LLM d'utiliser plus rapidement les nouvelles fonctionnalités d'Angular.
• Le CLI Angular intègre par défaut Vitest pour lancer les tests
• Les nouvelles applications Angular ne prennent plus en charge zone.js par défaut.

Version 22

La version 22 d'Angular a été publiée le 3 juin 2026.

Politique d'évolution

Chaque version est prévue pour être compatible avec la version antérieure. Il y a deux mises à jour par an.

Politique de support

Toutes les versions majeures bénéficient d'une assistance pendant 18 mois. Il s'agit de 6 mois de support actif, au cours desquels des mises à jour et des correctifs sont publiés à intervalles réguliers. Elle est suivie de 12 mois de support à long terme (LTS), au cours desquels seuls les correctifs critiques et les correctifs de sécurité sont publiés.

Les versions en cours sont:

Angular Material

Angular Material est une bibliothèque de composants d'interface utilisateur qui implémente le Material Design de Google dans Angular. Elle offre une expérience utilisateur cohérente sur différents appareils et plateformes.

Angular Material inclut divers composants tels que des boutons, des cartes, des boîtes de dialogue, des grilles et des contrôles de formulaire. Ces composants sont conçus pour être personnalisables et faciles à intégrer aux applications Angular. Parmi les autres fonctionnalités d'Angular Material, on retrouve la prise en charge du responsive design, des thèmes et de l'accessibilité.

Angular Aria

Angular Aria est une bibliothèque de composants d'interface utilisateur conçue pour améliorer l'accessibilité. À la différence d'Angular Material, les composants sont headless, c'est-à-dire dépourvu de tout style par défaut.

Articles connexes

• Framework
• Framework JavaScript
• React
• AngularJS
• Vue.js
• Svelte
• JHipster

Liens externes

• Site officiel
• (en) « Angular material (site officiel) », sur Angular Material (consulté le 2 septembre 2026)

• Portail de la programmation informatique