Configuring AngularJS modules - how does it affect the other modules in the app?

Question

I have two Angular modules, A and B. A has no deps, some configurations and some filters:

angular.module('A', [])
    .config(function ($httpProvider) {
    // set common headers for $http requests
        $httpProvider.defaults.headers.common = {...};
    })
    .filter('myFilter', function () {
        // create a filter
    });

B depends on A, so it goes something like:

angular.module('B', ['A'])...

I know that B depending on A means I can use myFilter inside B views.

The question is: does the code in myFilter benefits from the $http common headers I set inside the config() function of the A module (since myFilter belongs to A)?

And when making HTTP requests from inside the B module, are the common headers the ones I set inside A or they are not affected from the configuration inside A?

True to both the questions makes enough sense to me: I config some common headers in the A module that I'll use inside the filters that the A module provides, but I want those same common headers out of my way when I'm inside the B module; still, when I'm inside B views, I want to be able to use A filters with their specific common headers.

Answer 1

Here is what i think. Like any other angular $httpProvider is also singleton in nature which very well means any changes to it from any where including any module would affect other, or in other words changes are global.

Answer 2

In any one app, no matter what modules you pull in, all services, factories and providers are singletons.

You're using the $httpProvider, one such singleton... and therefore, by the very nature of singletons, any configuration done to a provider means all modules are affected.

Answer 3

Yes, this is how it works. See example.

angular.module("foo",[]).config(function($httpProvider){$httpProvider.test = 123});
angular.module("bar",["foo"])
  .config(function($httpProvider){console.log(httpProvider.test)}); //123