Qual a Melhor Estrutura de uma SPA com AngularJS?

Olá galera, pra quem não me conhece, meu nome é Willian Ribeiro, sou desenvolvedor Web já faz quase 10 anos, comecei logo cedo com html, depois partir pro Joomla, montei sistemas próprios usando PHP e desde o ano passado as coisas vem mudando muito quanto ao cenário front e backend.

Com certeza se você ainda não programa em AngularJS, já ouviu falar muito desse framework, isso por que a velocidade de criação é com ele é monstruosa, porém existem dezenas de formas diferentes de se organizar a estrutura de uma SPA (Single Page Application).

Tem gente que coloca tudo numa pasta só, dai mistura html,css, javascript, less e até sass! E pra dar manutenção nisso, demoram horas até a gente pegar o jeito, por isso, que tal nós definirmos alguns padrões em estrutura de SPA com Angular?

Em dezembro de 2014, comecei meus fortes estudos com Angular, como não tenha nenhum projeto para executar, encontrei um projeto muito interessante no Github e resolvi participar para por em práticas alguns estudos com Angular e conquistar mais experiências para projetos profissionais.

A estrutura inicial do projeto, tinha uma arquitetura normal de qualquer projeto em AngularJS, mas depois de analisar o projeto http://meanjs.org/ e ver como eles organizar em Vertical Module, resolvi fazer meu primeiro PR (Pull Request) com a nova estrutura modular para saber se era interessante. A versão modular foi aprovada e passei a usa-las em todos os meus projetos de estudo e até profissional usando o AngularJS.

Então vamos começar a entender melhor!

Minha Estrutura hoje de projeto é assim:

– css
– img
– fonts
– js
– modules
— home/controllers
— home/directives
— home/services
— home/views
— home/home.module.js
– index.html – (Gulp Inject)