Large AngularJS application design

Question

I need advise on designing an AngularJS application with multiple complex modules and based upon the user role the module gets loaded after authentication & authorization. Some users could have access to one simple module and some could have dashboard and some could have access to 2+ modules.

There are lot of directives we have identified which can be reused across different modules. During the design phase we have identified the following things that should exist and we have answers for some of the below items, but we still need advice from experts:

• A Module could have
  • Partials
  • Controllers
  • Directive
  • Services
• Exception handling (HTTP Status code or Business errors)
• Logging (With line number, from which function)
• May also need to save the logged info in the server
• Should have the ability to turn on and off logging
• custom widgets via factory class (Reused in other modules)
• Shared Directives (isolated scope)
• Shared Modules
• Shared Utilities (sorting, filtering, etc.)
• Enumerators as per master data
• Constants via singleton
• Authentication (CSRF)
• offline storage
• REST services
• Event handling for dispatching from one module and handling it in other

UI of the application looks like, a fixed menu bar on the top of the page with a drop down navigation on top left with multiple links depending on the user's role. When the user clicks on a link the corresponding module should get loaded in the page. There has to be an empty project which is manually bootstrapped and loads the other modules at run-time.

Our approach is to have the following folder structure:

• app
  • assets
    • css
    • lib js
    • images
  • common components
    • directives
    • utilities
    • authentication
    • Service proxy to hold the $resource calls
    • Enums
    • Constants
  • Model
    • entity json (example customer, product, etc.)
  • business Module A
    • Partials
    • Directives
    • Services
    • Controllers
  • business Module B
  • business Module C
  • index.html
  • Requirejs config file

So my questions are:

• How can a service inside a module talk to other module?
• Module should be developed and run independently?
• How the communication between module can be handled with transferring data?
• How to integrate all the above elements, particularly exception handling, logging?
• Developers should understand the convention we have defined?
• What method to call for logging, sending info between module?

Answer 1

I recommend to include yeoman into your workflow and use a generator for your project, that makes a lot easier the way that you structure your app, specially if you are working in a team.

earlier this year people from angular released a document with best practices for your app structure, I'd recomment you to read it, being said that there's a generator based on those best practices named cg-angular which I totally recommend.

I'll quote from cg-angular site:

All subgenerators prompt the user to specify where to save the new files. Thus you can create any directory structure you desire, including nesting. The generator will create a handful of files in the root of your project including index.html, app.js, and app.less. You determine how the rest of the project will be structured.

regarding to your questions:

• How can a service inside a module talk to other module?

you can create a folder for directives/ and services/ you are going to reuse in different modules.

• Module should be developed and run independently?

you can have several modules inside an app (you could load them as needed, maybe using require js but this is offtopic)

• How the communication between module can be handled with transferring data?

Use services to pass information between controllers, in different modules

• How to integrate all the above elements , particularly exception handling, logging?

you can do a generic error handler and a generic http interceptor for all the modules

• Developers should understand the convention we have defined?

use a generator they are opinioated and they give the order and the conventions you need for a team.