AngularJS : architecture et bonnes pratiques

Un document que je ne saurai trop recommander pour les développeurs désireux de connaitre les bonnes pratiques sous AngularJS : https://docs.google.com/document/d/1XXMvReO8-Awi1EZXAXS4PzDzdNvV6pGcuaF4Q9821Es/

C’est rempli de bonnes idées pour présenter sa solution, ainsi que sur les bonnes pratiques comme le nommage etc.

Architecture par fichier, répertoire ou bien modulaire ?

On a souvent l’habitude de voir des exemples d’applications AngularJS qui sont architecturés par ce que l’on appelle le « file pattern »:

AngularArchi02

 

L’ensemble des contrôleurs directives, services etc sont regroupés dans des fichiers.

Le problème avec cette approche, c’est qu’en terme d’évolution, on pourra vite se trouver avec des fichiers JS de taille importante… Imaginez que l’on ai une vingtaine de directives dans un même fichier ! Pour retrouver une directive spécifique il faudra prendre du temps pour scroller et la chercher…

Afin d’éviter cela, on préférera une architecture modulaire ou par features. Dans laquelle un ensemble de contrôleurs vues, services et directives seront répertoriées.

AngularArchi01
Dans cet exemple nous avons deux modules « bar » et « foo » qui ont des services et directives distincts. On préconise en général : 1 controlleur = 1 fichier .js etc
L’idéal ensuite est de créer un répertoire dans chaque module par type (Filters, Controllers, Directives, Partials etc.) afin d’avoir un classement des fichiers clair et lisible.

Il existe une démo qui applique de façon correcte ce pattern : https://github.com/angular-app/angular-app

Partagez: