Un modèle d’architecture AngularJS

Nul besoin de le présenter, AngularJS le frameword développé par Google est au cœur de bien des sujets et ouvre aux développeurs de nouvelles possibilités  de s’amuser. Pour vous rafraîchir la mémoire, sur Angular, n’hésitez pas… https://angularjs.org/

Au delà d’un tutoriel classique, je vous propose de mettre en place une architecture basée sur le MVVM (Model View ViewModel) à l’instar du MVC (Model View Controler) qui est plus souvent utilisé.

Angular JS : modèle d'architecture

Le Model View ViewModel (MVVM)

« Le Modèle-Vue-VueModèle (en abrégé MVVM, de l’anglais Model View ViewModel) est une architecture et une méthode de conception utilisée dans le génie logiciel. MVVM est originaire de Microsoft et adapté pour le développement des applications basées sur les technologies Windows Presentation Foundation et Silverlight via l’outil MVVM Light par exemple. Cette méthode permet, tel le modèle MVC (Modèle-Vue-Contrôleur), de séparer la vue de la logique et de l’accès aux données en accentuant les principes de binding et d’événement. » (source)

Pour vulgariser, la différence entre MVVM et MVC tient du fait que le MVVM, lui, se repose sur le DataBading et l’évènementiel.  Ça tombe bien, c’est ce qu’AngularJS est !

MVVM

La vue est couplée aux données via du DataBinding et invoque les méthodes du ViewModel.

Le ViewModel invoque les méthodes du modèle. Il contient la data spécifique à la gestion de l’écran et les méthodes de réponses aux interactions utilisateurs. Il contient également une référence vers un ou des modèles.

Le modèle contient la data et les méthodes de manipulation de cette dernière (calculs, appels de services, …).

MVVM sans AngularJs

« MVC vs MVVM vs MVP. What a controversial topic that many developers can spend hours and hours debating and arguing about.

For several years +AngularJS was closer to MVC (or rather one of its client-side variants), but over time and thanks to many refactorings and api improvements, it’s now closer to MVVM…

I hereby declare AngularJS to be MVW framework – Model-View-Whatever. Where Whatever stands for « whatever works for you ».» Igor Minar, lead of the AngularJS Framework » (source)

Qu’est ce que cela veut dire : on peut débattre autant que l’on veut sur comment mettre en place AngularJs, comment l’utiliser proprement, etc… Au final, il n’y a pas qu’une seule réponse valable. Suivant ces bons principes, j’ai donc mis en place –à ma manière- AngularJS avec du «MVVM ».

Modèle d’architecture combinant AngularJS et MVVM

MVVM

La vue principale, déclare l’application AngularJs. L’application AngularJs contient l’ensemble des modules nécessaires à l’application :

  • Les vues
  • Les directives / Les filtres
  • Les contrôleurs
  • Les modèles
  • Les services

Les vues

Chaque vue fonctionne de paire avec un contrôleur. La vue consomme les données en data-binding et appelle les méthodes du contrôleur. Elle peut également inclure des directives et faire appel aux filtres déclarés dans l’application.

Les directives / Les filtres

Les directives sont des add-on au HTML. Une directive est un composant qui peut déclarer ou non son propre scope / contrôleur.

Les filtres sont des méthodes permettant la transformation de la donnée : filtre d’un tableau, formatage d’une date, d’un nombre, … Les filtres peuvent être utilisés directement dans le code HTML ou via le Javascript.

Les contrôleurs

Le contrôleur contient un ou plusieurs model de donnée. Il contient des méthodes propres à la vue ainsi que des variables d’état ou d’affichage. Il sert également de proxy au model.

Les modèles

Les modèles sont dédiés à un type de données. Ils contiennent la donnée et toutes les méthodes de manipulation de cette dernière :

  • Appels de services
  • Ajout
  • Sélection

Les modèles font appels aux services en cas de besoin de communication serveur.

Lors du retour de l’appel de service, le modèle s’appuie sur le bus évènementiel ($rootScope) d’AngularJs pour notifier les changements. Le but de passer par le bus évènementiel est d’éviter toute dépendance du modèle envers les vues qui l’utilisent.

Les services

Les services sont des classes d’appels serveurs.

Conclusion

La chose importante a retenir est que la « connaissance » des instances (Model / vue / …) est unidirectionnelle. De ce fait, la vue connait son contrôleur qui connait un ou des modèle(s) qui connaissent les services.

Le fait d’avoir des couches modulaires permet ainsi de tester unitairement chaque couche métier de manière indépendante, mais aussi d’avoir un développement coupé par responsabilité (couche vue, couche métier, …), facilitant ainsi la maintenance et le bug tracking.

 

3 commentaires

votre commentaire

Se joindre à la discussion ?
Vous êtes libre de contribuer !

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *

Inscription newsletter

Ne manquez plus nos derniers articles !