Recommended scalable AngularJS project structure?
I have seen several AngularJS project templates: the seed project at the official website, Yeoman's generated, and AngularFun.
Are there any other (un)opinionated templates I should take a look at, or any related pattern you would suggest for a scalable AngularJS project?
By scalable I mean
- being able to split controllers, directives, filters, etc. in their own files;
- being able to load these files on demand rather than making the browser load everything;
- being able to have common, cross-project components (e.g. common directives, filters or services).
Answer
You can take a look at a demo application that Pawel Kozlowski and I are putting together: https://github.com/angular-app/angular-app.
It doesn't provide any support for loading files on demand but you can see we spit modules up into separate files and set up testing as a first class component. We have a build process (using Grunt) that concatenates (and minifies on release) the js files and can run unit and end to end tests.
We have chosen to split our modules into two groups functional application areas and common cross cutting library code, rather than a simple split into directives, filter, services and so on. In side a functional area we might have some service, directives, controllers and templates.
This makes developing against a functional area easier as all the relevant items are in one place.
The project relies on a simple nodeJS server to deliver the files (supporting HTML5 mode deep linking) and also to provide authentication and authorization services.