Setting application wide HTTP headers in AngularJS

Question

Is there a way to set the $httpProvider headers outside of angular.module('myApp', []).config()?

I'm getting an Auth-Token from the server after I login the user, and I need to add it as a HTTP Header to all following requests.

Answer 1

You can use default headers for angular 1.0.x:

$http.defaults.headers.common['Authentication'] = 'authentication'; 

or request interceptor for angular 1.1.x+:

myapp.factory('httpRequestInterceptor', function () {   return {     request: function (config) {        // use this to destroying other existing headers       config.headers = {'Authentication':'authentication'}        // use this to prevent destroying other existing headers       // config.headers['Authorization'] = 'authentication';        return config;     }   }; });  myapp.config(function ($httpProvider) {   $httpProvider.interceptors.push('httpRequestInterceptor'); }); 

Since factories/services are singletons, this works as long as you do not need to dynamically change your 'authentication' value after the service has been instantiated.