Estrutura de pastas com AngularJS

[leandroruel]

pessoal vou começar um projeto com angular, e preciso de suas sugestões, é um sistema para faculdade, estou pensando na estrutura de diretórios que será usada ainda, e estava lendo este artigo sobre o assunto, mas vocês sabem que as coisas podem ser diferentes dependendo do projeto, então, o que terei nesse projeto? login, tela do aluno, do professor, do funcionário, notas e faltas e etc.

[thiamsantos]

https://youtu.be/Ma6VVQdvGq4

Tem esse vídeo do Rodrigo Branas que tirou todas as minhas dúvidas.
Dá uma conferida lá @leandroruel. :)

[lincolnbrito]

@thiamsantos acompanho os vídeos dele e a didática é incrível 👍

[felipefialho]

Chamando a @keitoliveira

[woliveiras]

Da uma olhada nesse style guide se te agrada:

https://github.com/johnpapa/angular-styleguide

[leandroruel]

opa @woliveiras cheguei a ver esse styleguide esses dias 😄

[woliveiras]

Eu acho essa arquitetura um sucesso mano!

Usamos no site e é bem escalável.

[nathpaiva]

Em um projeto que eu participo minha amiga estruturou do segundo jeito do artigo que você mencionou, fica bem bacana, modularizando os componentes!
Fica bem organizado rotas/ serviço, factory/ e controller. Mantendo junto é fácil de achar o código.

[leandroruel]

to estudando tudo...

[lucasmahle]

Pois então.
Eu estava numa situação parecida contigo.
Eu lia sobre angular, ansioso por uma oportunidade de usá-lo, lia artigos, post, tutoriais e tudo mais, li o livro do Branas (que aliás, recomendo). Houve um dia que a agencia iria fazer uma plataforma pra uma empresa de consultoria, foi ai que decidir usar Angular.
Fiquei na mesma dúvida que você, mas não queria ficar preso ao método "cria novo arquivo" -> "renomeia" -> "inclui js no html" ... Por outro lado, estava em dúvida qual estrutura fazer.
Como o projeto era pequeno, fiz separação de pastas que representem cada módulo, dentro, a separação de tipo de arquivo era feito por prefixo "controller-core.js" por ex. E para não ficar no repeteco que falei antes, eu criei um gerador com php ng-seed. Esse gerado é beeeeeeeeem simples, não fiz com intuito de distribuição, até porque, dias depois, descobri o yoman para angular, ai abandonei esse meu projetinho php hehe.

Basicamente, eu usei separação
/app -> aqui continha arquivos de configurações, rotas entre outros
/app/module -> esse era um módulo
/app/filters -> aqui continha os filtros

Funcionou, está funcionando lindamente, mas se fosse fazer hoje um projeto, eu faria a separação por natureza do arquivo (controller, filter, directive), pois vi muitos projetos assim, e vi as vantagens.

Se o projeto for pequeno, não releve a estrutura, você vai ver na prática qual é melhor, até porque, trabalho com Angular é uma relação de amor e ódio.

[leandroruel]

valew @lucasmahle tô estudando essa estrutura cuidadosamente.

[tcelestino]

Tentei user o mesma estrutura de projetos que já fiz com Backbone (src/model, src/views, src/controllers, src/routes) e tive problemas de estabilidade 😞 Sim, Angular é outro mundo (directives, filters etc...). Sugestões bem boas, e já tinha esquecido do style guide (já tinha favoritado) que enviaram em alguma thread acima.

[yuricamara]

Uso algo muito similar a esta:
angular-app

O que fez toda a diferença para minha app é esta modularização que mostra na seção "A Better Structure and Foundation" neste ótimo artigo que passou. Já trabalhei em projeto com a "Standard Structure". Parece algo bobo mas na minha opinião faz uma baita diferença quando a app começa a crescer. E claro, o código modular tb. Como uma pedaço de lego fácil de colocar e tirar. :-) O Angular proporciona isso de forma impecável.

[yuricamara]

E use e abuse das diretivas. Esqueça a ideia de que diretiva é só pra código que será reaproveitado.

[alanhr]

Eu curto o estilo type by folder. No meu ponto de vista nesse estilo você tem um agrupamento melhor dos módulos.