web-dev-qa-db-fra.com

AngularJS: structurer une application web avec plusieurs ng-apps

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

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

Je ne fais pas référence au cas où vous essayez d'avoir plusieurs déclarations ng-app Sur la même page; je veux dire plutôt différentes sections d'un grand site qui ont leur propre déclaration ng-app unique.

Comme Scott Allen l'écrit dans son blog OdeToCode :

Un scénario que je n'ai pas trouvé très bien résolu est le scénario où plusieurs applications existent dans la même application Web supérieure et nécessitent du code partagé sur le client.

Y a-t-il des approches recommandées à prendre, des écueils à éviter ou de bonnes structures d'échantillons de ce scénario que vous pouvez indiquer?

Mise à jour - 9/10/2015
Un projet avec une stratégie d'organisation intéressante est MEAN.JS et son dossier de modules.
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/MusicStorehttps://github.com/aspnet/MusicStore/tree/master/src/MusicStore.Spa/ng-apps

designweb-applicationsangularjs
40
mg1075

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 jusqu'à présent 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 votre infrastructure Web de serveur pour trouver apps/app1/index.html lorsqu'une demande de /app1 entre en jeu. Utilisez des URL conviviales (par exemple the-first-application/ au lieu de app1/ et mappez-les à l'aide de votre technologie de serveur si nécessaire.
  • La technologie de votre serveur doit inclure global.html dans index.html car il contient les inclusions du fournisseur (voir ci-dessous).
  • Incluez les éléments requis par l'application respective dans index.html (voir ci-dessous).
  • Mettez le ng-app et la racine <div ui-view></div> dans le index.html.
  • Chaque application et lib est un module angular angulaire.
  • Chaque application obtient un <app-name>.module.js fichier contenant la définition du module angular et la liste des dépendances).
  • Chaque application obtient un <app-name>.js fichier qui contient les blocs de configuration et d'exécution des modules, et la configuration de routage en faisant partie.
  • Chaque application obtient un dossier parts qui contient les contrôleurs, les vues, les services et les directives des applications dans une structure qui a du sens pour l'application spécifique. Je ne considère pas les sous-dossiers comme controllers/, views/ etc utile, car ils ne sont pas à l'échelle, mais YMMV.
  • Les bibliothèques suivent la même structure que les applications, mais omettent les choses 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 une bibliothèque. Essayez de créer des bibliothèques fonctionnellement cohérentes, pas seulement des bibliothèques toutes directives ou tous services.

Les atouts

Je minimise les fichiers JS et CSS pour les versions, mais je travaille avec des fichiers non minimisés pendant le développement. Voici une configuration qui prend en charge ceci:

  • Gérer le fournisseur inclut globalement dans global.html. De cette façon, les éléments 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.

8
theDmi

Les applications à page unique (SPA) ne sont pas vraiment destinées à être utilisées comme vous le suggérez avec une application vraiment grande et plusieurs mini-SPA au sein de l'application 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 aux différents SPA. La page de navigation sera assez légère, puis vous ne chargerez 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 SPAs afin que les utilisateurs n'aient pas toujours à revenir à la page de navigation lorsqu'ils doivent se rendre dans une autre zone.

L'utilisation de cette approche peut créer des défis avec la persistance des informations dans les SPA. Mais nous parlons de quelque chose que les SPA n'étaient pas censés faire. Il existe des cadres qui peuvent aider à la persistance des données côté client. Breeze est le premier qui me vient à l'esprit, mais il y en a d'autres.

Concernant la mise en page - plusieurs questions des programmeurs portent sur la mise en page de grands projets, en fonction de vos besoins particuliers. Je suis tombé sur celui-ci et celui-ci . Il n'y a rien de magique dans les SPA qui affecterait la disposition de votre application au-delà de ce qui est déjà répondu dans ces questions.

Cela dit, il existe différentes approches qui fonctionnent le mieux pour différents projets. Je recommanderais de m'en tenir à la disposition de base fournie par le projet initial angular. 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 correspond à vos besoins.

7
user53019