Recommended scalable AngularJS project structure?

Question

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 1

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.

Answer 2

I would say that all of your points can be easly achived, at least without any modifications to Angular.

• being able to split controllers, directives, filters, etc. in their own files;

this can be of course done with basic Angular, as you can include as many script tags with controllers/services as you want. Of course it's not scalable at all, so the best option would be using AMD modules, like RequireJS. This is one of the seeds that have this kind of configuration: https://github.com/elsom25/angular-requirejs-html5boilerplate-seed

• being able to load these files on demand rather than making the browser load everything;

As pkozlowski suggested in the comments, there is already and entry with some description of the problem, you will see that I was also working to solve this, and actually had some results. I have a working example of loading controllers, templates and directives on demand using RequireJS and the resolve param of route configuration.

• being able to have common, cross-project components (e.g. common directives, filters or services)

Having the previous points resolved it could be easily achived using RequireJs modules.

---

I've been wondering whether starting an agularjs-lazy-seed project would be a good idea? Is there any demand for that? We could even take it further and move the routes configurations outside the usual configuration, let's say you have a views.json file (ideally a service that responds with json) with the views you want to include in your application:

{
    "views" : {
        ....
        "account" : {             
             "path" : "/account" // route path
             "name" : "Account", // view name
             "partial" : "views/account/account.html", // partial file
             "controller" : "account/main" // RequireJS module
             "directives" : [ "directives/version", "directives/menu" ] // directives used in the view
        }
        ....
    }
}

This way you could:

• develop the views in separation and the build the application based on this json bootstrap
• have some common directives and components
• when bootstrap after the login you could filter the views that user is allowed to see
• everything inside the ngView would be loaded on demand

Of course your application should then be really big so that doing all of this additional work would made sense ;)

Answer 3

You should try ng-boilerplate. The most promising kickstart template for bigger AngularJS projects: http://joshdmiller.github.io/ng-boilerplate/#/home