Estrutura de pastas do AngularJS [fechada]

Como você estrutura uma estrutura de pastas para um aplicativo AngularJS grande e escalável?

Classificar por tipo

À esquerda, temos o aplicativo organizado por tipo. Não é ruim para aplicativos menores, mas mesmo aqui você pode começar a ver que fica mais difícil encontrar o que está procurando. Quando desejo encontrar uma visualização específica e seu controlador, eles estão em pastas diferentes. Pode ser bom começar aqui se você não tiver certeza de como organizar o código, pois é muito fácil mudar para a técnica à direita: estrutura por recurso.

Classificar por recurso (preferencial)

À direita, o projeto é organizado por recurso. Todas as visualizações de layout e controladores vão para a pasta de layout, o conteúdo do administrador para a pasta de administração e os serviços usados ​​por todas as áreas vão para a pasta de serviços. A idéia aqui é que, quando você estiver procurando pelo código que faz um recurso funcionar, ele está localizado em um só lugar. Os serviços são um pouco diferentes, pois “atendem” a muitos recursos. Gosto disso quando meu aplicativo começa a tomar forma, pois fica muito mais fácil de gerenciar para mim.

Um post de blog bem escrito: http://www.johnpapa.net/angular-growth-structure/

Exemplo de aplicativo: https://github.com/angular-app/angular-app

Depois de criar alguns aplicativos, alguns no Symfony-PHP, alguns .NET MVC, alguns ROR, descobri que a melhor maneira para mim é usar o Yeoman.io com o gerador AngularJS.

Essa é a estrutura mais popular e comum e melhor mantida.

E o mais importante, ao manter essa estrutura, ele ajuda a separar o código do lado do cliente e a torná-lo independente da tecnologia do servidor (todos os tipos de estruturas de pastas diferentes e diferentes mecanismos de modelagem do lado do servidor).

Dessa forma, você pode duplicar e reutilizar facilmente o seu e de outros códigos.

Aqui está antes da construção do grunhido: (mas use o gerador yeoman, não apenas o crie!)

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

E depois da construção do grunhido (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)

Eu gosto desta entrada sobre a estrutura angularjs

Ele foi escrito por um dos desenvolvedores do angularjs, então você deve ter uma boa ideia

Aqui está um trecho:

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
    └── ...

Há também a abordagem de organizar as pastas não pela estrutura da estrutura, mas pela estrutura da função do aplicativo. Existe um aplicativo Angular / Express inicial do github que ilustra isso chamado aplicativo angular .

Estou no meu terceiro aplicativo angularjs e a estrutura de pastas melhorou sempre. Eu mantenho o meu simples agora.

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

Acho isso bom para aplicativos únicos. Ainda não tinha um projeto em que precisaria de vários.