Add parameters to query string when using PUT method with Angular's $http

Question

I'm using Angular's $http service to make web api requests. When I use the GET method, the two param values are added to the query string:

// http://foo.com/api/test?heroId=123&power=Death+ray
$http.get("/api/test", {
   params: { heroId: 123, power : "Death ray" }
})

However, when I use the PUT method the params are JSON-encoded and sent as the request payload:

// {"params":{"heroId":123,"power":"Death ray"}}
$http.put("/api/test", {
   params: { heroId: 123, power : "Death ray" }
})

How can I force the params to be added to the query string when using PUT?

Answer 1

With $http.put, $http.post or $http.patch, the config object containing your url parameters goes as the third argument, the second argument being the request body:

$http.put("/api/test",                                       // 1. url
          {},                                                // 2. request body
          { params: { heroId: 123, power : "Death ray" } }   // 3. config object
);

$http.put documentation for reference

Answer 2

AngularJS send json data and not x-www-form-urlencoded format data. Though you can try the below one:

$http.put("/api/test", { heroId: 123, power : "Death ray" });

Answer 3

If your api url is "api/test/heroId/power",

var data = 123+'/Death ray'

$http.put("api/test"+data);