AngularJS : modules et services

La notion de module dans AngularJS n’a rien à voir avec celle de ECMAScript prévue pour la prochaine version. Le concept se rapproche plus de celui des modules de Guice pour permettre de faciliter les tests en ne chargeant que certains modules pour son test. C’est aussi une manière élégante d’organiser son code pour regrouper certaines classes.

Un module permet de déclarer :

Il permet aussi de déclarer un code d’initialisation de l’application via la méthode run et de configurer les routes (les URLs pointant vers les vues) avec la méthode config:

La directive ngApp initialise automatiquement l’application. L’affectation d’une valeur contenant un identifiant implique le chargement du module déclaré avec cet identifiant :

Le [ ] liste les modules dépendants

Les services

Ce qui dans nos applications Java est devenu une evidence pour mieux répartir la logique applicative se retrouve aussi dans AngularJS. Comme son nom l’indique le service permet de déclarer une classe dédiée à une fonction précise. Attention chaque service est, et ne peut qu’être (du moins pour l’instant), un singleton.
Dans l’exemple suivant le service MessageService a pour fonction de gérer une liste de message : ajouter, lister, afficher dans une alerte. $window est injecté dans notre service qui est lui-même injecté dans le controleur. Notez la syntaxe, bien qu’il y ait d’autres façons c’est celle qui est la plus lisible. Les injections se font en passant un tableau dont le dernier élement est la fonction avec autant de paramètres que d’éléments précédents dans le tableau tel que :

Vous pouvez toutefois ne pas utiliser le tableau et mettre directement la fonction en nommant les paramètres à l’identique des noms des dépendances (l’ordre n’a pas d’importance). Mais cela à un inconvénient, si vous obfusquer votre code cela ne fonctionnera plus.

Saisissez un message et cliquer sur « ajouter » pour ajouter un message au service. Répétez l’action plusieurs fois puis charger les messages. Ceux-ci s’afficheront en liste et pour chaque un message un bouton « afficher » ouvre une alert() avec le message comme contenu :

Même si cette syntaxe reste peu classique elle a pour avantage de présenter clairement l’injection de dépendances. Encore une fois c’est cette approche qui rend le tout facilement testable.
La tentation d’accumuler du code dans le controleur est forte, le service est la pour bien séparer les fonctionnalités.

Ici nous utilisons la méthode factory(name, fn) pour créer notre service, mais il existe aussi la méthode service(name, fn). La méthode factory prend en paramétre une fonction dont les parametres sont injectés et cette fonction retourne une instance de l’objet service :

La méthode service elle va instancier l’objet service en utilisant le constructeur fourni, simplement comme si il avait été appelé avec l’opérateur new, mais le constructeur est injecté avec ses dépendances

La syntaxe suivante est aussi possible :

La principale différence entre les 2 est que factory() renvoi l’objet service alors que service() fait un new sur l’ojet service et renvoi « this ».

Après avoir fait le tour des principaux concepts, nous verrons dans le prochain article comment construire une application AngularJS avant d’aborder les tests.

Une réflexion sur « AngularJS : modules et services »

Les commentaires sont fermés.