Les 3 “briques” de base d’une appli Angular : Composants, Services, Modules

Toute application Angular se compose de trois briques fondamentales : les composants qui représentent l’interface, les services qui contiennent la logique applicative, et enfin les modules qui permettent d’organiser le code. Dans cette recette, je vais vous donner une rapide définition de chaque brique et je vais vous expliquer quand chacune doit être utilisée.

Composant

Définition : Un composant Angular représente un bout d’interface de l’application. C’est à vous de décider ce que vous mettez dans un composant ; ça peut aller d’un simple bouton à un écran entier.

Quand utiliser un composant ?

Utilisez les composants pour créer l’interface de votre application, c’est-à-dire pour tout ce qui est affiché à vos utilisateurs. Chaque écran spécifique de votre application se compose de plusieurs composants imbriqués les uns dans les autres, comme des poupées gigognes.

On part toujours d’un composant racine, qui représente l’ensemble de l’application. Il contient des sous-composants, qui représentent par exemple des zones de l’écran comme l’en-tête, le contenu et le pied de page. À leur tour, ces sous-composants peuvent contenir des sous-sous-composants, et ainsi de suite. Cette imbrication de composants s’appelle l’arbre des composants.

En tant que développeur, c’est à vous de décider comment vous découpez votre interface en composants, et donc à quoi ressemble votre arbre de composants.

Service

Définition : Un service Angular représente un bout de logique applicative. Par exemple, il est fréquent d’avoir un service qui gère la communication avec la base de données, ou un service qui gère l’authentification de l’utilisateur.

Quand utiliser un service ?

Vous utiliserez les services principalement dans deux scénarios :

  • Pour stocker du code partagé, c’est à dire du code que vous êtes susceptible de réutiliser à plusieurs endroits de votre projet. En effet, un service est accessible partout dans l’application*, grâce à un mécanisme qui s’appelle l’injection de dépendance. Par exemple, on a souvent un service qui gère la communication avec la base de données, car lire ou écrire des données dans la base est une chose qu’on veut faire un peu partout dans l’application.
  • Pour stocker des données uniques, c’est à dire des données qui ne doivent exister qu’en un seul exemplaire dans toute l’application. En effet, un service est un singleton*, ce qui signifie qu’un service donné n’existe qu’en un seul exemplaire dans toute l’application. Par exemple, on a souvent un service d’authentification qui contient l’identité de l’utilisateur connecté. C’est logique d’utiliser un service pour stocker cette information, car il ne peut avoir qu’un seul utilisateur connecté à un temps T, dans une instance donnée de l’application.

Module

Définition : Un module Angular permet d’organiser le code de l’application. Chaque composant et chaque service doit être rattaché à un module.

Quand utiliser un module ?

Vous pourriez mettre tous les composants et services de votre application dans un unique module Angular, mais il y a des avantages à découper son application en plusieurs modules :

  • Réutilisabilité. Un module peut facilement être réutilisé dans une autre application.
  • Performances. Un module peut être chargé à la demande, plutôt qu’au démarrage de l’application. Cela permet de réduire la taille du code téléchargé initialement.
  • Organisation. Plus généralement, un module permet de regrouper dans une unité cohérente tout le code (composants, services…) associé à une fonctionnalité donnée. Cela donne un projet bien organisé et cela facilite le travail à plusieurs.

En résumé

Un composant Angular représente un bout d’interface de l’application. Chaque écran se compose de plusieurs composants imbriqués les uns dans les autres. On appelle cette imbrication l’arbre des composants.

Un service Angular représente un bout de logique applicative. Les services Angular sont généralement globaux (accessibles partout dans l’application) et ce sont des singletons (ils n’existent qu’en un seul exemplaire).

Un module Angular permet d’organiser le code de l’application et d’améliorer ses performances, en créant une unité logique pour chaque grande fonctionnalité de l’application. Dans chaque module, on référence tous les composants et services associés à la fonctionnalité correspondante.

Application Angular minimale = 1 module + 1 composant

L’application Angular la plus simple possible doit posséder au moins UN module et UN composant.

S’il n’y avait pas de module, il n’y aurait pas d’application. Une application Angular doit donc posséder au moins un module. (Avec Angular CLI, ce module s’appelle AppModule par convention.)

S’il n’y avait pas de composant, il n’y aurait pas d’interface et rien ne serait affiché à l’utilisateur. Une application Angular doit donc posséder au moins un composant. (Avec Angular CLI, ce composant s’appelle AppComponent par convention.)

Informations

Titres alternatifs :

  • Structure d’une application Angular