I am new to AngularJS, and to JS in general. I e from Java world as I used to implement client side with GWT.

Now when I moved to AngularJS I face this issue:

How to organize your .js files ? In java each class has its .java file but, if this practice is implemented in JS there will be many http request to fetch .js files as each class ( Function ) resides in separate .js file.

Also, the files should be organized so that other programmers should allocate and navigate between them and be able to read and understand what are these files related to.

I am new to AngularJS, and to JS in general. I e from Java world as I used to implement client side with GWT.

Now when I moved to AngularJS I face this issue:

How to organize your .js files ? In java each class has its .java file but, if this practice is implemented in JS there will be many http request to fetch .js files as each class ( Function ) resides in separate .js file.

Also, the files should be organized so that other programmers should allocate and navigate between them and be able to read and understand what are these files related to.

• javascript
• angularjs

• 1 You can always follow the structure of the Angular-seed github./angular/angular-seed – lgomezma Commented Nov 12, 2012 at 17:28

5 Answers 5

Unfortunately there are about a million ways to do this. Since angular uses modules and all of your angular code should be in a module, IMO using javascript namespacing bees secondary to module namespacing.

Take a look at this project (angular-grunt-coffeescript). It's my attempt to solve this problem. I use coffeescript but the same ideas can apply to a .js project.

There is also angular-sprout which attempts to extend the 'angular-seed' project a bit to make it usable for big apps - angular-sprout is in js.

UPDATE

Yeoman looks like it might bee the standard for creating a skeleton AngularJS projects, and so should provide a 'home' for everything (I personally don't use it yet). Take a look here.

For a large project i can remend using one directory per module, and one file per "thing" (service, value, factory, controller...). Html partials should be stored in each module directory along with their respective directives or controllers.

We have been using this approach for some time, and it is really working out fine. The project is built by maven (Java is used for the backend), and all the js-files are concatenated into one file per angular application plus one file for ponents shared between angular applications. Check out aggregations in yuipressor-maven-plugin if you are into maven.

Because we have several js files per module, we needed a way to create a module exactly once, and before we register the "thing" in each js-file.

The solution we came up with was adding a file called 0-module.js in each module directory with the module creation statement. yuipressor-maven-plugin will add this first to the aggregated file.

Example file structure:

mymodule/
   0-module.js
      >angular.module('mymodule', []); //Create module
   MyController.js
      >angular.module('mymodule').controller("MyController", [... // Register MyController
   myTemplate.html

I generally split the code into namespaces which contain classes relevant to that namespace. I put each namespace in a separate JS file.

So if you had classes called LinkedList,BinaryTree,KDTree etc, you could bundle them in a DataStructures namespace and save it in

datastructures.js

So you could instantiate by saying:

var kd = new Datastructures.KDTree();

By keeping the namespace name and the filename same you can find the actual piece of code easily without needing a powerful IDE as the name itself is self-decribing.

Hope this helps!

I would reend using Yeoman, as I suppose so do the developers (they advocate it quite a lot, check out their gPlus page, or this video of theirs). It allows for scaffolding (following the structure of Angular-Seed), testing, live previewing via a JS server, and deployment - it concatenates all the .js files together, avoiding the issue of multiple requests. Check it out!

Granted this question happened a while ago, for the sake of those who are asking it today, here is my collection of different best ways of using Angular including their file structures http://www.dancancro./parison-of-angularjs-application-starters/