AngularJS: structurer une application Web avec plusieurs applications ng

La blogosphère propose un certain nombre d'articles sur le sujet des instructions de structuration des applications AngularJS telles que celles-ci (et d'autres):

• http://www.johnpapa.net/angular-app-structuring-guidelines/
• http://codingsmackdown.tv/blog/2013/04/19/angularjs-modules-for-great-justice/
• http://danorlando.com/angularjs-architecture-understanding-modules/
• http://henriquat.re/modularizing-angularjs/modularizing-angular-applications/modularizing-angular-applications.html

Cependant, un scénario que je n'ai pas encore rencontré en matière de recommandations et de meilleures pratiques est le cas où vous avez une grande application Web contenant plusieurs applications "mini-spa", et les applications de mini-spa partagent toutes une certaine quantité de code.

Je ne parle pas du cas d’essayer d’avoir plusieurs ng-appdéclarations sur la même page; Je parle plutôt de différentes sections d’un grand site qui ont leur propre ng-appdéclaration unique .

Comme Scott Allen écrit dans son blog OdeToCode :

Un scénario que je n'ai pas trouvé très bien traité est le scénario dans lequel plusieurs applications existent dans la même application Web plus grande et nécessitent un code partagé sur le client.

Existe-t-il des approches recommandées à adopter, des pièges à éviter ou de bonnes structures d'échantillon de ce scénario que vous pouvez indiquer?

Mise à jour - 10/09/2015
MEAN.JS et son dossier de modules sont un projet doté d'une stratégie d'organisation intéressante.
https://github.com/meanjs/mean
https://github.com/meanjs/mean/tree/master/modules

Un autre exemple provient de l'exemple ASP.NET Music Store SPA. https://github.com/aspnet/MusicStore https://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

Voici le design avec lequel je travaille. Je l'ai trouvé utile sur deux projets plus importants que j'ai construits et je n'ai encore rencontré aucun obstacle.

Structure des dossiers

your-project/
  apps/
    global.html
    app1/
      index.html
      app1.module.js
      app1.js
      parts/
        foo.js
        foo.html
        ...
    app2/
  libs
    lib1/
      lib1.module.js
      parts/
        directive1.js
        directive1.html
    lib2/
  third-party/

• Configurez la structure Web de votre serveur pour rechercher le apps/app1/index.htmlmoment auquel une demande /app1est reçue. Utilisez des URL conviviales (par exemple, the-first-application/au lieu de app1/et associez-les à l'aide de la technologie de votre serveur, si nécessaire.
• Votre technologie de serveur doit inclure global.htmldans index.htmlcar elle contient le fournisseur inclut (voir ci-dessous).
• Inclure les actifs requis par l'application respective dans index.html(voir ci-dessous).
• Mettez le ng-appet la racine <div ui-view></div>dans le index.html.
• Chaque application et lib est un module angulaire distinct.
• Chaque application obtient un <app-name>.module.jsfichier contenant la définition du module angulaire et la liste des dépendances.
• Chaque application obtient un <app-name>.jsfichier contenant la configuration et les blocs d'exécution des modules, ainsi que la configuration du routage.
• Chaque application obtient un partsdossier contenant les contrôleurs, les vues, les services et les directives des applications dans une structure adaptée à l'application en question . Je ne considère pas les sous-dossiers tels que controllers/, views/etc. utiles, car ils ne sont pas redimensionnés, mais YMMV.
• Les bibliothèques suivent la même structure que les applications, mais laissent de côté les éléments dont elles n’ont pas besoin (évidemment).

Commencez avec les services et les directives de l'application où ils sont utilisés. Dès que vous avez également besoin de quelque chose dans une autre application, refactorisez-vous dans une bibliothèque. Essayez de créer des bibliothèques cohérentes sur le plan fonctionnel, pas seulement des bibliothèques à directives ou à services.

Les atouts

Je réduis à la fois les fichiers JS et CSS pour les versions, mais je travaille avec des fichiers non minés au cours du développement. Voici une configuration qui supporte ceci:

• Gérer les inclusions fournisseurs globalement dans global.html. De cette façon, les objets lourds peuvent être chargés à partir du cache lors de la navigation entre les SPA. Assurez-vous que la mise en cache fonctionne correctement.
• Les actifs par SPA sont définis dans index.html. Cela ne devrait inclure que les fichiers spécifiques à l'application ainsi que les bibliothèques utilisées.

La structure de dossiers ci-dessus facilite la recherche des bons fichiers pour les étapes de construction de la minification.

Les applications à page unique (SPA) ne sont pas vraiment conçues pour être utilisées comme vous le suggérez avec une application vraiment volumineuse et plusieurs mini-SPA dans la principale. Le plus gros problème sera le temps de chargement des pages, car tout doit être chargé à l’avance.

Une façon de résoudre ce problème consiste à utiliser une page de navigation qui vous mènera à des SPA individuels. La page de navigation sera relativement légère et vous ne pourrez alors charger qu'un seul SPA à la fois en fonction de ce qui a été sélectionné. Vous pouvez fournir une barre de liens avec des liens de navigation dans chacun de vos SPA pour que les utilisateurs ne soient pas toujours obligés de revenir à la page de navigation lorsqu'ils doivent se rendre dans une autre zone.

L'utilisation de cette approche peut créer des problèmes avec la persistance des informations dans les SPA. Mais nous parlons de quelque chose que les SPA ne sont pas destinés à faire. Certains cadres peuvent aider à la persistance des données côté client. Breeze est la première qui me vienne à l’esprit, mais il y en a d’autres.

En ce qui concerne la mise en page - plusieurs questions des programmeurs traitent de la mise en page de projets volumineux, en fonction de vos besoins particuliers. Je suis tombé sur celui-ci et celui-ci . Il n’ya rien de magique dans les SPA qui puisse affecter la présentation de votre application au-delà de ce qui a déjà été répondu à ces questions.

Cela dit, il existe différentes approches qui fonctionnent le mieux pour différents projets. Je recommanderais de rester avec la structure de base fournie par le projet de graine angulaire. Créez des dossiers distincts de ceux fournis pour vos packages personnalisés et votre code source. Et dans votre dossier source, utilisez une disposition de projet qui répond à vos besoins.

Si votre application nécessite plusieurs déclarations ng-app sur la même page, vous devez amorcer manuellement le module AngularJS en injectant un nom de module, comme indiqué ci-dessous:

angular.element(document).ready(function() {
  angular.bootstrap(document, ['TodoApp']);
});

Ce plunker explique comment amorcer manuellement AngularJS.