Structure du dossier AngularJS [fermé]

Comment mettre en page une structure de dossiers pour une application AngularJS grande et évolutive?

180
demandé sur Michael J. Calkins 2013-08-31 02:28:32

5 réponses

entrez la description de l'image ici

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. Quand 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 n'êtes pas sûr de savoir comment organiser le code car il est assez facile de passer à la technique de droite: structure par fonctionnalité.

Trier Par Fonction (préféré)

À droite, le projet est organisé par fonctionnalité. Toutes les vues de mise en page et les contrôleurs vont dans le dossier de mise en page, le contenu admin va dans le dossier admin, et les services utilisés par toutes les zones vont dans le dossier services. L'idée ici est que lorsque vous recherchez le code qui fait fonctionner une fonctionnalité, elle est située à un endroit. Les Services sont un peu différents, car ils "service" de nombreuses fonctionnalités. J'aime ça une fois que mon application commence à prendre forme car elle devient beaucoup plus facile à gérer pour moi.

Un billet de blog bien écrit: http://www.johnpapa.net/angular-growth-structure/

Exemple d'Application: https://github.com/angular-app/angular-app

242
répondu Michael J. Calkins 2016-03-02 07:35:49

Après avoir construit quelques applications, certaines dans Symfony-PHP, certaines. net MVC, certaines ROR, j'ai trouvé que la meilleure façon pour moi est d'utiliser Yeoman.io avec le générateur AngularJS.

C'est la structure la plus populaire et la plus commune et la mieux entretenue.

Et surtout, en gardant cette structure, il vous aide à séparer votre code côté client et à le rendre agnostique à la technologie côté serveur (toutes sortes de structures de dossiers différentes et différents modèles côté serveur moteur).

De cette façon, vous pouvez facilement dupliquer et réutiliser le vôtre et d'autres code.

Le voici avant la construction de grunt: (mais utilisez le générateur yeoman, ne le créez pas seulement!)

/app
    /scripts
            /controllers
            /directives
            /services
            /filters
            app.js
    /views
    /styles
    /img
    /bower_components
    index.html
bower.json

Et après grunt build (concat, uglify, rev, etc...):

    /scripts
        scripts.min.js (all JS concatenated, minified and grunt-rev)
        vendor.min.js  (all bower components concatenated, minified and grunt-rev)
    /views
    /styles
        mergedAndMinified.css  (grunt-cssmin)
    /images
    index.html  (grunt-htmlmin)
31
répondu Urigo 2014-04-22 22:37:51

J'aime cette entrée sur la structure angularjs

Il est écrit par l'un des développeurs angularjs, devrait donc vous donner un bon aperçu

Voici un extrait:

root-app-folder
├── index.html
├── scripts
│   ├── controllers
│   │   └── main.js
│   │   └── ...
│   ├── directives
│   │   └── myDirective.js
│   │   └── ...
│   ├── filters
│   │   └── myFilter.js
│   │   └── ...
│   ├── services
│   │   └── myService.js
│   │   └── ...
│   ├── vendor
│   │   ├── angular.js
│   │   ├── angular.min.js
│   │   ├── es5-shim.min.js
│   │   └── json3.min.js
│   └── app.js
├── styles
│   └── ...
└── views
    ├── main.html
    └── ...
29
répondu Chris 2015-02-17 09:09:31

Il y a aussi l'approche d'organiser les dossiers non pas par la structure du framework, mais par la structure de la fonction de l'application. Il existe une application GitHub starter Angular / Express qui illustre cela appelé angular-app .

3
répondu BoxerBucks 2013-08-30 23:00:23

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.

index.html (or .php)
/resources
  /css
  /fonts
  /images
  /js
    /controllers
    /directives
    /filters
    /services
  /partials (views)

Je trouve que bon pour les applications simples. Je n'ai pas encore vraiment eu de projet où j'aurais besoin de plusieurs.

2
répondu Ronnie 2015-06-14 16:48:00