Naming Conventions and Folder Structure in an AngularJS App

It’s considered best practice to organize your Angular app as modules, rather than directories.

With help from a co-worker Marc Gibbons, we used the

Inside of a module, there should be an index.html and a module.js file.
Controllers are append with .ctrl.js, i.e. photos.ctrl.js
Services are appended with .services.js, i.e. photos.service.js
Directive are appended with .directives.js, i.e. photo-list.directive.js
File names are separated with a hyphen, not camelcase.
All Javascript uses camelcase

If we imagine a structure for 500px’s Flow and Photo views, it might look something like:¹

500px/

  app/

    flow/
      index.jade
      module.js
      flow.ctrl.js
      flow-modal.ctrl.js
      flow.service.js
      modal-view.jade

    photo/
      index.jade
      module.js
      photo.ctrl.js
      photo-detail.jade
      photo-edit.jade
      photo-edit.ctrl.js
      photo.service.jss

  common/

    directives/
      modal/
        index.jade
        module.js

Notes:

I would keep modal as its own abstract directive. It would be up to the view to populate it.
They use a masonry plugin for the /focus route, so I would likely create something like a flow-list.directive.js that would handle grabbing a list of photos, and arranging them.