from jquery $.ajax to angular $http

I have this piece of jQuery code that works fine cross origin:

jQuery.ajax({
	url: "http://example.appspot.com/rest/app",
	type: "POST",
	data: JSON.stringify({"foo":"bar"}),
	dataType: "json",
	contentType: "application/json; charset=utf-8",
	success: function (response) {
		console.log("success");
	},
	error: function (response) {
		console.log("failed");
	}
});

Now I'm tring to convert this to Angular.js code without any success:

$http({
	url: "http://example.appspot.com/rest/app",
	dataType: "json",
	method: "POST",
	data: JSON.stringify({"foo":"bar"}),
	headers: {
		"Content-Type": "application/json; charset=utf-8"
	}
}).success(function(response){
	$scope.response = response;
}).error(function(error){
	$scope.error = error;
});

Any help appreciated.

The AngularJS way of calling $http would look like:

$http({
    url: "http://example.appspot.com/rest/app",
    method: "POST",
    data: {"foo":"bar"}
}).then(function successCallback(response) {
        // this callback will be called asynchronously
        // when the response is available
        $scope.data = response.data;
    }, function errorCallback(response) {
        // called asynchronously if an error occurs
        // or server returns response with an error status.
        $scope.error = response.statusText;
});

or could be written even simpler using shortcut methods:

$http.post("http://example.appspot.com/rest/app", {"foo":"bar"})
.then(successCallback, errorCallback);

There are number of things to notice:

• AngularJS version is more concise (especially using .post() method)
• AngularJS will take care of converting JS objects into JSON string and setting headers (those are customizable)
• Callback functions are named success and error respectively (also please note parameters of each callback) - Deprecated in angular v1.5
• use then function instead.
• More info of then usage can be found here

The above is just a quick example and some pointers, be sure to check AngularJS documentation for more: http://docs.angularjs.org/api/ng.$http

We can implement ajax request by using http service in AngularJs, which helps to read/load data from remote server.

$http service methods are listed below,

 $http.get()
 $http.post()
 $http.delete()
 $http.head()
 $http.jsonp()
 $http.patch()
 $http.put()

One of the Example:

	$http.get("sample.php")
		.success(function(response) {
			$scope.getting = response.data;	// response.data is an array
	}).error(){
	
		// Error callback will trigger
	});

http://www.drtuts.com/ajax-requests-angularjs/

You may use this :

Download "angular-post-fix": "^0.1.0"

Then add 'httpPostFix' to your dependencies while declaring the angular module.

Ref : https://github.com/PabloDeGrote/angular-httppostfix

you can use $.param to assign data :

 $http({
  url: "http://example.appspot.com/rest/app",
  method: "POST",
  data: $.param({"foo":"bar"})
  }).success(function(data, status, headers, config) {
   $scope.data = data;
  }).error(function(data, status, headers, config) {
   $scope.status = status;
 });

look at this : https://stackoverflow.com/questions/11786562/angularjs-asp-net-web-api-cross-domain-issue