web-dev-qa-db-fra.com

Structurer mon application AngularJS

Je suis totalement novice dans l'utilisation d'AngularJs et même si j'ai suivi les tutoriels, j'ai encore plein de questions sans réponse en tête. Ma principale préoccupation en ce moment est de savoir comment diviser mon application en modules?

Fondamentalement, j'ai besoin de créer une application qui agira comme un portail vers diverses applications, chacune représentant une fonctionnalité commerciale (parfois avec peu ou pas de relations les unes avec les autres).

Dans le didacticiel, ils montrent comment créer une application avec plusieurs vues. Ce dont j'ai besoin, c'est d'une application avec plusieurs modules, chaque module ayant ses propres vues (et j'aurai probablement aussi des vues partagées).

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

Le projet AngularJS Seed ( https://github.com/angular/angular-seed ) est bon mais il ne montre pas vraiment comment construire une application complexe.

htmlmoduleangularjs
33
Sam

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

lisez-le sur sam-dev.net et vous pouvez maintenant lire la partie II , avec un exemple de code.

Je répondrai à ma propre question. Non pas parce que je pense que c'est la meilleure approche, mais simplement parce que c'est celle avec laquelle j'ai décidé d'aller.

Voici comment j'ai divisé mes modules métier en dossiers

  • application
    • businessModule
      • contrôleurs
        • index.js
        • firstCtrl.js
        • secondCtrl.js
      • directives
      • prestations de service
      • vues
      • filtres
    • anotherBusinessModule
    • partagé
    • app.js
    • index.html

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

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

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

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

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

Ensuite, dans firstCtrl.js, je peux réutiliser ce module et y ajouter le contrôleur:

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

        function(){
});

Ensuite, app.js agrège tous les modules que je veux pour mon application en les ajoutant au tableau des dépendances.

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

Le dossier partagé contient des directives et d'autres éléments qui ne sont pas spécifiques à un module métier et qui peuvent être réutilisés n'importe où.

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

[~ # ~] modifier [~ # ~]

Comme les fichiers index.js contiennent des déclarations de modules, ils doivent être référencés dans la page html avant tout autre script d'application. Pour ce faire, j'ai utilisé l'IBundleOrderer d'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;
    }
}
31
Sam

La méthode de Sam semble être la voie à suivre dans la plupart des cas. La documentation actuelle de Angular l'a configurée comme module pour chaque contrôleur, service, etc., mais cela a été contredit par Miško lui-même de google.

Dans une vidéo récente Angularjs Best Practices de Miško, il montre comment la structure des modules pourrait être présentée pour faciliter les tests ainsi qu'une mise à l'échelle facile. Gardez à l'esprit que la structure des modules n'est pas censée affecter les performances d'une application angular.

En développant angular, je suggérerais d'utiliser la méthode des meilleures pratiques pour les raisons susmentionnées. Vous souhaiterez peut-être créer votre propre script de nœud pour générer vos contrôleurs, etc. pour le moment, ce qui pourrait inclure, par exemple, le module dans lequel vous souhaitez créer le contrôleur et le nom, qui générerait ensuite automatiquement votre contrôleur et la création des spécifications de test appropriées.

Si vous voulez une bonne lecture de la configuration, il y a n excellent article ici concernant la mise en place du projet en fonction de l'endroit où vous pensez il se dirigera.

11
Ryan Q

vous devez vous rendre sur le yeoman https://github.com/yeoman/yeoman et la structure du générateur yeoman: https://github.com/yeoman/generator-angular , cela devient une meilleure solution pour configurer l'application que la graine angulaire. Pour différents modules métier, vous devez créer différentes applications et partager des services et des directives

3
Stéphane Busso

Pour ceux qui sont intéressés, j'ai fait une version "modularisée" de Angular Seed qui correspond mieux aux meilleures pratiques de Misko: https: // github.com/sanfordredlich/angular-brunch-seed-modularized

Il est configuré avec Brunch afin que vous obteniez très rapidement le rechargement des pages, l'exécution des tests et bien plus encore. Vous pouvez développer rapidement et si vous suivez les modèles du code, votre application devrait évoluer raisonnablement bien. Prendre plaisir!

2
Sanford Redlich

L'inconvénient que j'ai trouvé dans l'approche adoptée par le générateur yeoman est qu'il ne correspond pas vraiment aux modules angular, donc il ne me semble pas très cohérent. plus grand et vous travaillez sur un composant particulier, je me suis retrouvé à beaucoup tourner dans l'arborescence source.

J'ai récemment rencontré une approche différente ici . Cette approche regroupe les fichiers par angular et me semble plus cohérent. Un inconvénient possible à cela est le fait que vous devez construire le site, vous ne pouvez pas simplement l'exécuter en place. Le grunt watch task dans ce projet aide à cela cependant.

1
rgaskill