2

My app is following John Papa's styleguide for AngularJS applications:

The styleguide emphasizes using a strongly modular approach to the design of the app. My question is about multiple configurations and their effect on shared services.

Suppose I have a main module like this:

angular.module("app", ["app.feature1"])
  .config(function() {
    // do some configuration here
    console.log("app configured");
  });

And a feature module that configures a shared angular service, let's say the $http service:

angular.module("app.feature1", [])
  .config(function($http) {
  // configure the $http service
  console.log("feature1 configured");
});

Is my understanding correct, that the configuration by "feature1" will carry over to the main module, since the $http service is a singleton and therefore shared across modules? Or do I have to configure the $http service in the main module instead, because each module has it's own $http service instance?

Edit: I can confirm that dependency configs are carried over and are executed first. See David's jsfiddle example.

maxmantz
  • 702
  • 1
  • 10
  • 25

1 Answers1

1

As a matter of best practice, you should configure services as early as possible, which is typically your main module (the app root), and preferably only once to avoid overlapping changes.

Since $http is a singleton (as you mentioned), any changes via configuration will be propagated throughout the application every time you inject $http.

It's also worth mentioning that configuration to services is First In First Out, meaning that if you have two configuration changes, the last-accessed configuration will be the one that is persisted to the service since the previous configuration will be overwritten if they are changing identical components of the service.

In your case, yes, the change to $http in your module will be extended to your main application and any other modules using $http.

Finally, in light of the comments, child dependency configs are resolved before parent configs, as demonstrated by this simple fiddle:

http://jsfiddle.net/maqzo6fv/

HTML:

<div ng-app="app"></div>

JS:

angular.module("app", ["app.feature1"])
    .config(function() {
        alert('main config');
});

angular.module("app.feature1", [])
    .config(function() {
        alert('child config');
});

The child config will call alert before main on every load.

David L
  • 32,885
  • 8
  • 62
  • 93
  • Am I right that since "app.feature1" is a dependency of the root module, "app.feature1" will be instantiated before the configuration of the main module, and therefore feature1's config block will execute first? – maxmantz Sep 01 '15 at 16:05
  • If you look at a typical angular application and deliberately "break" something in a loaded dependency, what happens? You'll find that the subsequent code in the main module is not loaded. I'm guessing here, but I believe that Angular loads children modules first, then loads the parent module that injected them. However, I can't be certain that the `.config()` of the child is called before the parent. It might be that it only builds out the dependency graph. – David L Sep 01 '15 at 16:08
  • I can confirm that dependency configs are executed first. Thank you! – maxmantz Sep 01 '15 at 16:16
  • @maxmantz I just confirmed the same and added a fiddle example to my answer :). Happy to help! – David L Sep 01 '15 at 16:18