Recommended Scalable AngularJS Project Structure?

Question

I saw several AngularJS project templates: the initial project on the official Yeoman and AngularFun website .

Are there any other (non-local) templates that I should consider, or any related template that you would suggest for a scalable AngularJS project?

Scalable i mean

• the ability to separate controllers, directives, filters, etc. in your own files;
• the ability to download these files on demand, and not download all browsers;
• may have common, cross-project components (e.g., general directives, filters, or services).

Answer 1

You can take a look at the demo application that Pawel Kozlowski and I put together: https://github.com/angular-app/angular-app .

It does not provide support for downloading files on demand, but you can see that we are inserting modules into separate files and setting up testing as a first-class component. We have a build process (using Grunt) that combines (and minimizes upon release) js files and can run tests at the level and end to end.

We decided to break our modules into two groups: functional areas of applications and the general code of the cross-library, rather than a simple section on directives, filter, services, etc. On the functional side, we may have some services, directives, controllers, and templates.

This simplifies the work with the functional area, since all the relevant elements are in one place.

The project relies on a simple nodeServer node for delivering files (supporting deep binding of HTML5 mode), as well as for providing authentication and authorization services.

Answer 2

I would say that all of your points can be easily achieved, at least without any changes to Angular.

• the ability to separate controllers, directives, filters, etc. in your own files;

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

• the ability to download these files on demand, and not download all browsers;

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

• may have common, cross-project components (e.g., general directives, filters, or services).

If the previous points were allowed, they could be easily obtained using the RequireJs modules.

---

I was wondering if the idea of ​​creating an agularjs-lazy-seed project would be a good idea? Is there any demand for this? We could even take it further and transfer the route configurations beyond 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 } .... } } 

That way you could:

• Develop views in the partition section and build an application based on this json bootstrap
• have some common directives and components
• when loading after logging in, you can filter the views that the user can see
• everything inside ngView will load on demand

Of course, your application should be really big, so doing all this extra work would make sense;)

Answer 3

You should try the ng template. The most promising kickstart template for larger AngularJS projects: http://joshdmiller.imtqy.com/ng-boilerplate/#/home

Answer 4

I agree with the points that other people talked about; its very easy to separate things into separate modules and the modules are dependent on each other with regular AngularJS material. Then your JS code can be divided into any files and directory trees that you prefer.

Just thought that I mentioned what we are doing in the hawtio project, which is based on AngularJS. We slightly changed the modularity :) hawtio uses plugins that can be detected at run time on a running server (for example, deploy and undeploy UI functions at run time). Thus, based on some REST request or JMX discovery, we can dynamically and / or remove plugins.

eg. here are all our current plugins by default

In terms of layout, each plugin has its own directories for code (js), html partials (html) and everything else (for example, css / img directories), which makes it easy to save nice and modular things. for example here is a camel plugin that has its own html, js and img folders.

Then a specific plugin defines its own module, directives, filters, which can then depend on other modules.

We still haven’t seen an awful lot of useful naming conventions for source files :). We find that writing a file to the controller seems simple; but besides the fooPlugin.ts file and the helpers.ts file (for general helper functions related to a particular module), we have not yet found any other meaningful naming conventions.

Answer 5

This project sounds promising http://vesparny.imtqy.com/ng-kickstart

This allows you to split your codebase by function and save the code again, as well as perform vertical loading thanks to the special Grunt task for this.

The project is also focused on unit testing and comes with a custom "dist task" that allows you to create an optimized finished product release.

Answer 6

Warning: Shameless plug.

You should definitely check generator-angular-xl .

It aims, in particular, at creating large-scale AngularJS applications by logically grouping code, testing modular systems and automatically inserting your js and css files into index.html, etc. It also helps by creating a layout for your data, which makes it a good choice when developing prototypes that can also become full-fledged applications. It does not generate any internal code, so you can freely choose any required technology.