46 votes

Structure de projet AngularJS évolutive recommandée?

J'ai vu plusieurs AngularJS modèles de projet: le projet de semences sur le site officiel, Yeoman'généré, et AngularFun.

Existe-il des autres (de l'onu)opiniâtre des modèles que je devrait prendre un coup d'oeil à, ou tout modèle vous dirais pour une solution évolutive AngularJS projet?

Par évolutives je veux dire

  • être en mesure de séparer les contrôleurs, les directives, les filtres, etc. dans leurs propres dossiers;
  • être en mesure de charger ces fichiers à la demande plutôt que d'en faire le navigateur de charger tout;
  • être en mesure d'avoir commune, la croix-composantes du projet (par exemple: directives, des filtres ou des services).

30voto

Pete BD Points 4774

Vous pouvez prendre un coup d'oeil à une démo de l'application que Pawel Kozlowski et j'ai à mettre en place: https://github.com/angular-app/angular-app.

Il ne fournit pas de support pour le chargement des fichiers à la demande, mais vous pouvez le voir, nous cracher modules en fichiers séparés et définir les essais, comme un premier de la classe du composant. Nous avons un processus de construction (à l'aide de Grunt) qui concatène (et minifies à la libération) les fichiers js et peut fonctionner à l'unité et à la fin des tests.

Nous avons choisi de diviser nos modules en deux groupes fonctionnels des domaines d'application et de la croix commune de coupe de la bibliothèque de code, plutôt qu'un simple split en directives, de filtrer, de services et ainsi de suite. À côté d'une zone fonctionnelle nous pourrions avoir des services, des directives, des contrôleurs et des modèles.

Cela rend le développement à l'encontre d'un domaine fonctionnel de plus en plus facile de tous les éléments pertinents sont en un seul endroit.

Le projet s'appuie sur un simple serveur nodeJS pour remettre les fichiers (supportant le HTML5 mode "deep linking"), et aussi pour assurer l'authentification et l'autorisation des services.

8voto

matys84pl Points 3982

Je dirais que l'ensemble de vos points peuvent être facilement réalisée, au moins, sans aucune modification Angulaire.

  • être en mesure de séparer les contrôleurs, les directives, les filtres, etc. dans leurs propres dossiers;

cela peut être fait, bien entendu, avec de base Angulaire, comme vous pouvez inclure autant de balises de script avec les contrôleurs/services que vous le souhaitez. Bien sûr, il n'est pas évolutive à tous, donc la meilleure option serait d'utiliser AMD modules, comme RequireJS. C'est l'une des graines qui ont ce genre de configuration: https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

  • être en mesure de charger ces fichiers à la demande plutôt que d'en faire le navigateur de charger tout;

Comme pkozlowski suggéré dans les commentaires, il y est déjà et à l'entrée avec une description du problème, vous allez voir que je travaille aussi pour résoudre ce problème, et effectivement eu quelques résultats. J'ai un exemple de travail de chargement des contrôleurs, des modèles et des directives sur demande à l'aide de RequireJS et résoudre les param de la route de configuration.

  • être en mesure d'avoir commune, la croix-composantes du projet (par exemple: directives, des filtres ou des services)

Avoir les points précédents résolues, il pourrait être facilement réalisée à l'aide de RequireJs modules.


Je me demandais si à partir d'un agularjs-paresseux-projet de semences serait une bonne idée? Est-il de la demande pour qui? Nous pourrions même aller plus loin et de déplacer les itinéraires des configurations à l'extérieur de la configuration normale, disons que vous avez un point de vue.fichier json (idéalement un service qui répond avec json) avec les vues que vous souhaitez inclure dans votre demande:

{
    "views" : {
        ....
        "account" : {             
             "path" : "/account" // route path
             "name" : "Account", // view name
             "partial" : "views/account/account.html", // partial file
             "controller" : "account/main" // RequireJS module
             "directives" : [ "directives/version", "directives/menu" ] // directives used in the view
        }
        ....
    }
}

De cette façon, vous pouvez:

  • développer le point de vue de la séparation et de la construction de l'application basé sur json bootstrap
  • ont en commun certaines directives et des composants
  • lorsque bootstrap après la connexion, vous pouvez filtrer les vues que l'utilisateur est autorisé à voir
  • tout à l'intérieur de la ngView serait chargé à la demande

Bien sûr, votre demande doit alors être vraiment grand, de sorte qu'à faire tout ce travail supplémentaire aurait fait sens ;)

8voto

ottsch Points 172

Vous devriez essayer ng-boilerplate. Le modèle kickstart le plus prometteur pour les grands projets AngularJS: http://joshdmiller.github.io/ng-boilerplate/#/home

4voto

James Strachan Points 6144

Je suis d'accord avec les points de d'autres gens ont dit jusqu'à présent; il est très facile de diviser les choses en modules distincts et ont des modules dépendent les uns des autres avec des régulière AngularJS choses. Puis votre code JS peuvent être divisés en tous les fichiers et répertoires que vous préférez.

Juste pensé que je voudrais vous parler de ce que nous faisons dans l'open source hawtio projet, qui repose sur AngularJS. Nous avons pris la modularité pour un peu d'un extrême :) hawtio utilise des plugins qui peuvent être découverts à l'exécution dans le serveur en cours d'exécution (par exemple, de déployer et d'annuler le déploiement de l'INTERFACE utilisateur fonctions au moment de l'exécution). Après quelques RESTE de la requête ou de JMX de détection on peut dynamiquement et ou supprimer des plugins.

par exemple, voici tous nos cours par défaut des plugins

En termes de mise en page, chaque plugin a ses propres répertoires de code (js, html partiels (html) et rien d'autre (par exemple css / img répertoires) qui le rend facile de garder de belles choses et modulaire. par exemple, voici le chameau plugin qui a son propre code html, js et img dossiers.

Puis un plugin spécifique définit ses propres AngularJS module, les directives, les filtres et qui peut alors dépendre d'autres modules.

Nous n'avons pas venir avec terriblement utile beaucoup conventions de nommage pour les fichiers source jusqu'à présent bien :). Nous trouvons l'écriture d'un fichier par le contrôleur semble la plus simple; mais d'autres que la fooPlugin.fichier ts et les assistants.fichier ts (pour module spécifique des fonctions d'assistance), nous n'avons pas encore trouvé toutes les autres conventions de nommage jusqu'à présent.

1voto

Alessandro Arnodo Points 136

Ce projet semble prometteur http://vesparny.github.io/ng-kickstart

Il vous permet de scinder votre base de code par fonctionnalité et de garder votre code réutilisable, ainsi que de le recharger du papier grâce à une tâche Grunt personnalisée à cet effet.

Le projet est également orienté vers les tests unitaires et est livré avec une "tâche dist" personnalisée vous permettant de créer une version optimisée prête pour la production.

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