Structuring my AngularJS application

Question

I'm totally newbie at using AngularJs and although I've been through the tutorials, I still have loads of unanswered questions in my mind. My main concern right now is how should I divide my application into modules ?

Basically I need to build an app which will act as a portal to various apps, each representing a business functionality (sometimes with little to no relationship with each others).

In the tutorial, they show how to create one app with multiple views. What I need, is one app with multiple modules, each module having its own views (and I'll probably have shared views too).

Has anyone worked on an app with that kind of structure ? Could you share your experience and how you've organised things ?

The AngularJS Seed project (https://github.com/angular/angular-seed) is good but it does not really show how to build a complex application.

Answer 1

[EDIT] I wrote an article on my blog to explain things in more details:

read it on sam-dev.net and you can now read part II, with code sample.

I'll answer my own question. Not because I think it's the best approach, but just because it's the one I've decided to go with.

This is how I've divided my business modules into folders

• app
  • businessModule
    • controllers
      • index.js
      • firstCtrl.js
      • secondCtrl.js
    • directives
    • services
    • views
    • filters
  • anotherBusinessModule
  • shared
  • app.js
  • index.html

Each module has its own folder structure for controllers, directives, etc...

Each folder has an index.js file and then other files to separates each controller, each directive, etc...

The index.js file contains the definition of the module. For instance for the controllers of the businessModule above:

angular.module('myCompany.businessModule.controllers', []); 

There's no dependencies here, but there could be any.

Then in firstCtrl.js, I can reuse that module and add the controller to it:

angular.module('myCompany.businessModule.controllers').controller('firstCtrl',               function(){ }); 

Then the app.js aggregates all the module that I want for my application by adding them to the dependencies array.

 angular.module('myApp', ['myCompany.businessModule', 'myCompany.anotherBusinessModule']); 

The shared folder contains directives and other things that are not specific to a business module and that can be reused anywhere.

Again, I don't know if it's the best approach, but it definitely works for me. Maybe it can inspire other people.

EDIT

As the index.js files contain modules declarations, they must be referenced in the html page before any other application scripts. To do so, I've used the IBundleOrderer of ASP.NET MVC 4:

 var bundle = new ScriptBundle("~/bundles/app") { Orderer = new AsIsBundleOrderer() };  bundles.Add(bundle.IncludeDirectory("~/app", "*.js", true));  public class AsIsBundleOrderer : IBundleOrderer {     public IEnumerable<FileInfo> OrderFiles(BundleContext context, IEnumerable<FileInfo> files)     {         files = files.OrderBy(x => x.Name == "index.js" ? 0 : 1);         return files;     } }