2

I'm trying to set up a large angular web app, with an architecture as described here

What I can't get my head around is how to make modules completely independent from other modules. All github boilerplate's or example projects which focus on modules all seem to have modules which heavily depend on common modules or functions/services. That would sort of defy the purpose of keeping everything separate doesn't it?

Take the following two example:

  • I have a utilities module which handles some basic functions (hashes etc.), and another module which handles all communication with an API. Imagine a User module which needs to make hashes and communicate with the API, how do I handle that? Directly injecting the Util and API modules as dependencies would break the in dependability, and putting them into the User module as well would mean a lot of double code (imagine multiple modules using the Util and API modules). Or should I use the mediator to mediate the communication?

  • User information which is stores in the User module is something that should be used almost application wide, and in the facade as well for example (the facade should handle security according to the article). How can I allow all of the application to access the information, without everything being dependent?

Thanks in advance :)

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
user3136936
  • 311
  • 3
  • 11

1 Answers1

2

I answered a similar question here. You are on the right track with separating behaviors into modules.

The idea is to embrace Dependency Injection as a means of collecting these behaviors into a rolled up module. With an IoC container at your disposal you can exercise discipline in your naming and other conventions to keep your app loosely coupled through configurable components.

We have a general app type module that simply registers the appropriate feature modules. That is in turn bootstrapped by a boot module that simply calls angular.bootstrap(['app']) somewhere (ours is in the page).

We can easily decorate or replace existing services/controllers/whatever with this setup and teams can work in isolation while features scale at different rates.

For example:

var myWidget = angular.module('myWidget',[])
myWidget.directive('myWidget',function(){...})
myWidget.factory('somethingImportant',function(){...})

var myDomainModel = angular.module('myDomain',[])
myDomainModel.factory('someModel',function(){...})
... //more models

var app = angular.module('app',['myWidget','myDomain'])
app.factory('applicationWidePolicyHere',function(){...})

//on index.html; das boot.
(function(){ angular.bootstrap(document,['app']) })()
Community
  • 1
  • 1
SonOfNun
  • 957
  • 7
  • 11
  • First of all thanks for your answer :) Secondly, you suggest not using separate modules at all? Wouldnt that defy the the purpose of the design structure? Can you perhaps share a piece of your code so I can see what you mean? – user3136936 Feb 25 '14 at 09:32
  • Yes absolutely use sep modules. Each feature receives its own module and encapsulates a single purpose. These are all rolled up into a single module; I'll update my original answer with explanation. – SonOfNun Feb 25 '14 at 13:41