Anandh Anandh - 1 year ago 64
AngularJS Question

Large AngularJS application design

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 Source

Lots of good questions to be asking; they appear to be in two major groups -- the first is a question of code structure and the second is about metrics (logs, etc.).

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

You should ideally be using directives for your modules. This way you can leverage the ability to link controllers via the require property. Here is a page on sharing data between directives and controllers.

Module should be developed and run independently?

I assume you're thinking about unit testing. Yes, your modules should ideally be as tightly-scoped as possible in order to make testing easier.

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

This is where services are typically used. Note: services, factories and providers all mean the same thing in AngularJS, they're just declared in slightly different ways. Pick whichever one you're most comfortable with.

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

Logging is a separate issue. The beauty of AngularJS is that you can very easily augment existing parts of the framework in order to add functionality or behaviors as you see fit. You do this using decorators. Here is an example of exception logging that I think will cover any use cases you might be interested in

Developers should understand the convention we have defined?

The answer to this is always the same: communication is how they know. Developers need to socialize the convention otherwise you'll never get buy-in.

What method to call for logging , sending info between module?

Answered above.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download