How to specify headers parameter for custom Angular $resource action

I have confirmed that 1.1.3 does indeed support this. However, you need to make sure you also get the 1.1.3 version of the resource service. A quick test of:

angular.module('myApp', ['ngResource']).
  config(['$routeProvider', function($routeProvider) {
    $routeProvider.when("https://stackoverflow.com/", {templateUrl: 'partials/partial1.html',controller: 'MyController'});
    $routeProvider.otherwise({redirectTo: "https://stackoverflow.com/"});
  }])

  .controller("MyController", function( $scope, Bug) {
    Bug.post({test:"test"});
  })

  .factory('Bug', function($resource){
    var resource = $resource('/bug',{},{
        post:{
            method:"POST",
            isArray:false,
            headers:{'Content-Type':'application/x-www-form-urlencoded; charset=UTF-8'} 
        },
    });
    return resource;
});

This will make a request with the headers set to (confirmed using Chrome):

Content-Type:application/x-www-form-urlencoded; charset=UTF-8

A quick note, I was unable to find a download of the angular-resource.js, so I had to go the the github website to download it. It is here.

For some giggles, I created a fiddle. Notice that there will be a failed POST call, but its headers are set correctly. Example Fiddle

Leave a Comment