Sur la gauche, nous avons l'application organisée par type. Pas trop mal pour les petites applications, mais même ici, vous pouvez commencer à voir qu'il devient plus difficile de trouver ce que vous cherchez. Lorsque je veux trouver une vue spécifique et son contrôleur, ils sont dans des dossiers différents. Il peut être bon de commencer ici si vous ne savez pas comment organiser le code autrement, car il est assez facile de passer à la technique de droite: structure par fonctionnalité.
Trier par fonction (préféré)
Sur la droite, le projet est organisé par fonctionnalité. Toutes les vues de mise en page et tous les contrôleurs vont dans le dossier de mise en page, le contenu de l'administrateur va dans le dossier d'administration et les services qui sont utilisés par toutes les zones vont dans le dossier des services. L'idée ici est que lorsque vous recherchez le code qui fait fonctionner une fonctionnalité, il se trouve au même endroit. Les services sont un peu différents car ils «desservent» de nombreuses fonctionnalités. J'aime cela une fois que mon application commence à prendre forme car elle devient beaucoup plus facile à gérer pour moi.
répondez-vous à votre propre question juste après l'avoir publiée?
Jakub
34
@Jakub Il existe une option appelée "répondre à votre propre question en contribuant au wiki" lorsque vous créez la question.
Michael J. Calkins
3
@MichaelCalkins, j'aime l'idée. Je viens de vérifier certains de vos tuts youtube sur angular aussi, gentil
Ronnie
5
@Ronnie Je me souviens juste que c'était l'une des étapes les plus difficiles de la courbe d'apprentissage d'AngularJS, alors j'espère que cela aide les gens. Je pense que j'ai parcouru 10 mises en page différentes après avoir lu des blogs et que sais-je encore.
Michael J. Calkins
5
Voici une page des meilleures pratiques angularJS dirigée par la communauté. Leur suggestion de structure de fichier est une combinaison de vos deux idées dans deux exemples. J'aime mieux le deuxième exemple car il est plus derrière l'idée de tri par fonctionnalité.
John
32
Après avoir construit quelques applications, certaines dans Symfony-PHP, certains .NET MVC, certains ROR, j'ai trouvé que le meilleur moyen pour moi est d'utiliser Yeoman.io avec le générateur AngularJS.
C'est la structure la plus populaire et la plus courante et la mieux entretenue.
Et surtout, en conservant cette structure, cela vous aide à séparer votre code côté client et à le rendre indépendant de la technologie côté serveur (toutes sortes de structures de dossiers différentes et différents moteurs de modèles côté serveur).
De cette façon, vous pouvez facilement dupliquer et réutiliser le vôtre et d'autres codes.
Le voici avant la construction de grunt: (mais utilisez le générateur yeoman, ne vous contentez pas de le créer!)
où devrait-il être la configuration des routes bloc de code? angular.module('myApp').config(function($routeProvider) { ... });
sports le
1
+1 En outre, vous pouvez personnaliser où yeoman met vos affaires. À mon humble avis, le tri par fonctionnalité / module dans les grandes applications est meilleur car vous pouvez plus facilement réutiliser une fonctionnalité dans d'autres applications.
La question concerne la structure des dossiers et bien que le lien soit intéressant à d'autres égards, il n'apporte rien de nouveau à la table pour cette question.
JohnC
Ceci est utilisé par le générateur angulaire Yeoman
EdgarT
Vous avez donc organisé le dossier par type de scripts.
Tudor
4
Il y a aussi l'approche consistant à organiser les dossiers non pas par la structure du framework, mais par la structure de la fonction de l'application. Il existe une application Angular / Express github starter qui illustre cette application appelée angular-app .
C'est souvent une meilleure approche pour les très grands projets. Malheureusement, nous sommes toujours coincés avec des structures de dossiers ... le balisage serait mieux, donc cela n'aurait pas tellement d'importance et nous pourrions avoir plusieurs vues en fonction des balises.
Christophe Roussy
3
Je suis sur ma troisième application angularjs et la structure des dossiers s'est améliorée à chaque fois jusqu'à présent. Je garde le mien simple en ce moment.
Vous aurez des problèmes pour maintenir et introduire de nouvelles fonctionnalités plus tard. Il est toujours recommandé d'avoir une structure de dossiers avec des fonctionnalités et des composants liés à cette fonctionnalité sous son dossier.
Jaseem Abbas
Ai-je raison de penser qu'Angular JS n'a pas de structure de dossier de projet ou de modèle de projet standard, comme un projet Web asp.net ou une application de bureau Windows?
1
@dotNetBlackBelt c'est correct. Il n'y a pas de norme en matière d'angulaire. Depuis que j'ai publié ceci, j'ai apporté des modifications à la configuration de mes dossiers. Mon dernier projet, je suis allé plus ou moins quelle est la meilleure réponse de cet OP
Réponses:
Trier par type
Sur la gauche, nous avons l'application organisée par type. Pas trop mal pour les petites applications, mais même ici, vous pouvez commencer à voir qu'il devient plus difficile de trouver ce que vous cherchez. Lorsque je veux trouver une vue spécifique et son contrôleur, ils sont dans des dossiers différents. Il peut être bon de commencer ici si vous ne savez pas comment organiser le code autrement, car il est assez facile de passer à la technique de droite: structure par fonctionnalité.
Trier par fonction (préféré)
Sur la droite, le projet est organisé par fonctionnalité. Toutes les vues de mise en page et tous les contrôleurs vont dans le dossier de mise en page, le contenu de l'administrateur va dans le dossier d'administration et les services qui sont utilisés par toutes les zones vont dans le dossier des services. L'idée ici est que lorsque vous recherchez le code qui fait fonctionner une fonctionnalité, il se trouve au même endroit. Les services sont un peu différents car ils «desservent» de nombreuses fonctionnalités. J'aime cela une fois que mon application commence à prendre forme car elle devient beaucoup plus facile à gérer pour moi.
Un article de blog bien écrit: http://www.johnpapa.net/angular-growth-structure/
Exemple d'application: https://github.com/angular-app/angular-app
la source
Après avoir construit quelques applications, certaines dans Symfony-PHP, certains .NET MVC, certains ROR, j'ai trouvé que le meilleur moyen pour moi est d'utiliser Yeoman.io avec le générateur AngularJS.
C'est la structure la plus populaire et la plus courante et la mieux entretenue.
Et surtout, en conservant cette structure, cela vous aide à séparer votre code côté client et à le rendre indépendant de la technologie côté serveur (toutes sortes de structures de dossiers différentes et différents moteurs de modèles côté serveur).
De cette façon, vous pouvez facilement dupliquer et réutiliser le vôtre et d'autres codes.
Le voici avant la construction de grunt: (mais utilisez le générateur yeoman, ne vous contentez pas de le créer!)
Et après la compilation de grognement (concat, uglify, rev, etc ...):
la source
angular.module('myApp').config(function($routeProvider) { ... });J'aime ça entrée sur la structure angularjs
Il est écrit par l'un des développeurs angularjs, il devrait donc vous donner un bon aperçu
Voici un extrait:
la source
Il y a aussi l'approche consistant à organiser les dossiers non pas par la structure du framework, mais par la structure de la fonction de l'application. Il existe une application Angular / Express github starter qui illustre cette application appelée angular-app .
la source
Je suis sur ma troisième application angularjs et la structure des dossiers s'est améliorée à chaque fois jusqu'à présent. Je garde le mien simple en ce moment.
Je trouve que c'est bon pour les applications uniques. Je n'ai pas encore vraiment eu de projet où j'aurais besoin de plusieurs.
la source