from jquery $.ajax to angular $http from jquery $.ajax to angular $http ajax ajax

from jquery $.ajax to angular $http


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