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
anderror
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 });
You may use this :
Download "angular-post-fix": "^0.1.0"
Then add 'httpPostFix' to your dependencies while declaring the angular module.