HTTP POST using Angular.js

Acctually the problem is in the backend with PHP you don't retrieve the posted data like usual, this worked for me:

function PhpCtrl($scope, $http, $templateCache) {  var method = 'POST';  var url = 'url.php';  $scope.codeStatus = "";  $scope.add = function() {    var FormData = {      'name' : document.f1.name.value,      'password' : document.f1.password.value    };    $http({      method: method,      url: url,      data: FormData,      headers: {'Content-Type': 'application/x-www-form-urlencoded'},      cache: $templateCache    }).    success(function(response) {        $scope.codeStatus = response.data;    }).    error(function(response) {        $scope.codeStatus = response || "Request failed";    });    return false;  };}

in the PHP file:

$data = json_decode(file_get_contents("php://input"));echo $data->name;

Hope this help.

Rather old post... but I figure my solution might come in handy for others as well.

I did not like the

json_decode(file_get_contents("php://input"));

solution... Basically because it seems against good practice (I might be wrong on this)

This is how I got it solved (adapted to the example above)

function PhpCtrl($scope, $http, $templateCache) {  var method = 'POST';  var url = 'url.php';  $scope.codeStatus = "";  $scope.add = function() {    var FormData = {      'name' : document.f1.name.value,      'password' : document.f1.password.value    };    $http({      method: method,      url: url,      data: $.param({'data' : FormData}),      headers: {'Content-Type': 'application/x-www-form-urlencoded'},      cache: $templateCache    }).    success(function(response) {        $scope.codeStatus = response.data;    }).    error(function(response) {        $scope.codeStatus = response || "Request failed";    });    return false;  };}

once this done

data: $.param({'data' : FormData}),headers: {'Content-Type': 'application/x-www-form-urlencoded'},

you can access the data you normally would in PHP

$data = $_POST['data'];

A possible alternative it is to use an XHR request handler to serialize the payload of the POST request.

$httpProvider.interceptors.push(['$q', function($q) {    return {        request: function(config) {            if (config.data && typeof config.data === 'object') {                // Check https://gist.github.com/brunoscopelliti/7492579 for a possible way to implement the serialize function.                config.data = serialize(config.data);            }            return config || $q.when(config);        }    };}]);

Moreover, if you didn't do it before, you've also to change the default content-type header of the post request:

$http.defaults.headers.post["Content-Type"] =     "application/x-www-form-urlencoded; charset=UTF-8;";

Recently I wrote a post on my blog, where you could find more info about this approach, and XHR request interceptor.