example - angularjs openclassroom




Structure du dossier AngularJS (4)

Après avoir construit quelques applications, certaines en Symfony-PHP, certaines .NET MVC, certaines en 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 commune et la mieux entretenue.

Et le plus important, en gardant cette structure, il 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 templates côté serveur).

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

Ici, il est avant construction grunt: (mais utilisez le générateur yeoman, ne pas simplement le créer!)

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

Et après build grunt (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)

Comment organisez-vous une structure de dossiers pour une application AngularJS grande et évolutive?



Je suis sur ma troisième application angularjs et la structure des dossiers a été améliorée à chaque fois. 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 cela bon pour les applications uniques. Je n'ai pas encore eu de projet dont j'aurais besoin de plusieurs.


Trier par type

Sur la gauche, nous avons l'application organisée par type. Pas si mal pour les applications plus petites, 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 ne savez pas comment organiser le code car il est assez facile de passer à la technique de droite: structure par caractéristique.

Trier par fonctionnalité (préféré)

Sur la droite, le projet est organisé par caractéristique. Tous les affichages et contrôleurs de mise en page vont dans le dossier de mise en page, le contenu d'administration va dans le dossier d'administration, et les services qui sont utilisés par toutes les zones vont dans le dossier de services. L'idée ici est que lorsque vous cherchez le code qui fait fonctionner une fonctionnalité, elle se trouve au même endroit. Les services sont un peu différents car ils "servent" de nombreuses fonctionnalités. J'aime cela une fois que mon application commence à prendre forme, car il 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





angularjs