33 votes

La structuration de mon application AngularJS

Je suis totalement néophyte en utilisant AngularJs et bien que j'ai été à travers les tutoriels, j'en ai encore plein de questions sans réponse dans mon esprit. Ma principale préoccupation maintenant est de savoir comment dois-je répartir mes application en modules ?

Essentiellement, j'ai besoin de construire une application qui va agir comme un portail pour des applications diverses, chacune représentant une entreprise fonctionnalité (parfois avec peu ou pas de relation les uns avec les autres).

Dans le tutoriel, ils montrent comment créer une application avec plusieurs points de vue. Ce dont j'ai besoin, est une application avec plusieurs modules, chaque module ayant son propre point de vue (et je vais probablement avoir partagé les points de vue trop).

Quelqu'un a travaillé sur une application avec ce genre de structure ? Pourriez-vous partager votre expérience et comment vous avez organisé les choses ?

Le AngularJS projet de Semences (https://github.com/angular/angular-seed) est bon, mais il n'a pas vraiment montrer comment construire une application complexe.

31voto

Sam Points 2760

[MODIFIER] J'ai écrit un article sur mon blog pour expliquer les choses plus en détails:

lire sur sam-dev.net et vous pouvez maintenant lire la partie II, avec l'exemple de code.

Je vais répondre à ma propre question. Non pas parce que je pense que c'est la meilleure approche, mais juste parce que c'est celui que j'ai décidé d'aller avec.

C'est de cette façon que j'ai divisé mon entreprise modules dans des dossiers

  • app
    • businessModule
      • les contrôleurs de
        • index.js
        • firstCtrl.js
        • secondCtrl.js
      • directives
      • services
      • vues
      • les filtres
    • anotherBusinessModule
    • partagé
    • app.js
    • index.html

Chaque module a sa propre structure de dossiers pour les contrôleurs, directives, etc...

Chaque dossier a un index.js fichier et puis d'autres fichiers sépare chaque contrôleur, chaque directive, etc...

L'index.js fichier contient la définition du module. Par exemple pour les contrôleurs de la businessModule ci-dessus:

angular.module('myCompany.businessModule.controllers', []);

Il n'y a pas ici de dépendances, mais il pourrait y en avoir.

Puis dans firstCtrl.js, je peux réutiliser ce module et ajoutez le contrôleur à elle:

angular.module('myCompany.businessModule.controllers').controller('firstCtrl',     

        function(){
});

Puis le app.js les agrégats, les modules que je veux pour mon application en les ajoutant dans les dépendances de la matrice.

 angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']);

Le dossier partagé contient des directives et d'autres choses qui ne sont pas spécifiques à un module d'entreprise et qui peut être réutilisé n'importe où.

Encore une fois, je ne sais pas si c'est la meilleure approche, mais cela fonctionne bien pour moi. Peut-être que ça peut inspirer d'autres personnes.

MODIFIER

Comme l'index.js les fichiers contiennent des modules déclarations, ils doivent être référencés dans le code html de la page avant que toute autre application de scripts. Pour ce faire, j'ai utilisé le IBundleOrderer de ASP.NET MVC 4:

 var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() };
 bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true));

public class AsIsBundleOrderer : IBundleOrderer
{
    public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)
    {
        files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1);
        return files;
    }
}

11voto

Ryan Q Points 1752

Sam méthode semble être la voie à suivre dans la plupart des cas. L'actuel Angulaire de la documentation a l'installation comme module pour chaque contrôleur, le service, etc, mais cela a été contredit par Miško lui-même à partir de google.

Dans une récente Angularjs les Meilleures Pratiques de la vidéo par Miško, il montre comment la structure des modules pourrait être aménagé pour la facilité du test et de la facilité de mise à l'échelle. Gardez à l'esprit la façon dont vous structurez les modules n'est pas censé affecter les performances au sein de l'angulaire de l'app.

À partir de l'élaboration angulaire apps, je vous recommande d'utiliser les meilleures pratiques de la méthode pour les raisons évoquées plus haut. Vous pouvez faire votre propre nœud de script pour générer vos contrôleurs, etc, pour le moment, ce qui pourrait inclure dire le module que vous souhaitez créer le contrôleur et le nom, qui serait alors de générer automatiquement votre contrôleur et bon test spec création.

Si vous souhaitez une bonne lecture sur le programme d'installation il y a un excellent post ici en rapport avec la mise en place du projet en fonction de l'endroit où vous pensez qu'il va être à la tête.

3voto

Stéphane Busso Points 46

vous devriez aller à la yeoman https://github.com/yeoman/yeoman et yeoman générateur de structure: https://github.com/yeoman/generator-angularil devient une meilleure solution pour l'installation de l'application que angulaire de la graine. Pour les différents modules métier, vous devez créer différents app et de partager des services et des directives

2voto

Sanford Redlich Points 406

Pour ceux qui sont intéressés, j'ai fait un "modulaire" version Angulaire de la Graine qui s'intègre mieux avec Misko meilleures pratiques: https://github.com/sanfordredlich/angular-brunch-seed-modularized

Il est mis en place avec le Brunch de sorte que vous obtenez rapidement recharger la page, de la marche d'essai et beaucoup plus. Vous pouvez développer rapidement, et si vous suivez les tendances dans le code, votre application doit échelle raisonnablement bien. Profitez-en!

1voto

rgaskill Points 938

Le retour que j'ai trouvé à l'approche de la yeoman générateur prend, c'est qu'il n'a pas vraiment de gamme avec l'angle de modules de sorte qu'il ne se sent pas très cohérent pour moi. Alors que le projet grandit et que vous travaillez sur un composant particulier, je me suis retrouvé retournement autour d'un lot dans l'arbre source.

J'ai récemment rencontré une approche différente ici. Cette approche regroupe les fichiers par angulaire modules et se sent plus cohérent pour moi. Un inconvénient possible à cela est le fait que vous êtes nécessaire à la construction du site, vous ne pouvez pas l'exécuter en place. Le grognement regarder tâche dans ce projet contribue à ce bien.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X