I am wondering if Angular.js $http interceptors are shared thoughout the whole application.
Let's assume I have a myDependentApp module, shared between many apps. That module has some interceptor configured to control the $http requests/responses. I include that module by declaring it in application bootstrap:
angular.module('myApp', ['myDependentApp']);
And I have application template:
<html ng-app="myApp">
Are myDependentApp's interceptors going to be active in myApp?
Thanks for help.
I am wondering if Angular.js $http interceptors are shared thoughout the whole application.
Let's assume I have a myDependentApp module, shared between many apps. That module has some interceptor configured to control the $http requests/responses. I include that module by declaring it in application bootstrap:
angular.module('myApp', ['myDependentApp']);
And I have application template:
<html ng-app="myApp">
Are myDependentApp's interceptors going to be active in myApp?
Thanks for help.
Share Improve this question edited Feb 1, 2015 at 20:30 Kuba T asked Feb 1, 2015 at 20:15 Kuba TKuba T 3,1035 gold badges28 silver badges32 bronze badges 2- Where did you configure it? if you configured it in your config block in 'myDependentApp' module, then yes, it will be active in myApp. – Michael Kang Commented Feb 1, 2015 at 20:24
- 1 You're right, my post is quite unclear. I'll fix that. I was only curious that $httpInterceptors are available outside the module. I was afraid that interceptors are active only in module's scope but if you say they're available also in parent modules, it's great:) thanks! – Kuba T Commented Feb 1, 2015 at 20:30
3 Answers
Reset to default 6The answer is yes, I tried it here:
var dependentApp = angular.module('dependency',[]).config(['$httpProvider', function($httpProvider) {
$httpProvider.interceptors.push(function ($q) {
return {
'request': function (config) {
console.log('request intercept');
},
'response': function (response) {
console.log('response intercept');
}
};
});
}]);
var app = angular.module('myapp', ['dependency']);
app.controller('mycontroller', ['$scope', '$http', function ($scope, $http) {
$http.get('http://www.google.');
}]);
And I saw that the request was being intercepted. Here's the fiddle: http://jsfiddle/6dbgo6pt/1/
The answer is Yes.
Directly from the docs
Angular services are:
Lazily instantiated – Angular only instantiates a service when an application ponent depends on it.
Singletons – Each ponent dependent on a service gets a reference to the single instance generated by the service factory.
$http is one such service createad using the provider recipe.
So this means that every module in your app will be served the very same $http service and those modules adding interceptors will be shared with the modules since again, the $http service is a singleton like any other angular- or custom built service using .service, .factory or .provider.
$http Interceptors:
For purposes of global error handling, authentication, or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses, it is desirable to be able to intercept requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests. The interceptors leverage the promise APIs to fulfill this need for both synchronous and asynchronous pre-processing.
The interceptors are service factories that are registered with the $httpProvider by adding them to the $httpProvider.interceptors array. The factory is called and injected with dependencies (if specified) and returns the interceptor.
$httpProvider:
Use $httpProvider to change the default behavior of the $http service.