Ajax requests with Angularjs

In many applications client is required to make requests to remote http servers to fetch data, or as we say make ajax requests, AngularJs provides $http service for making ajax requests to remote servers.

In this tutorial we just want to demonstrate a simple get and post request in angular js using the $http service.

We will also learn to do the same in the preferred way, which is wrapping the $http in another service or factory.

//get request
$http.get().success(function(response, status, headers, config){
//process success scenario.
}).error(function(err, status, headers, config){
//process error scenario.
});

//delete request
$http.delete(url, [config]).success(function(response, status, headers, config){ //here config is an optional object to pass delete prams
//process success scenario.
}).error(function(err, status, headers, config){
//process error scenario.
});

response variable contains the data returned by the API.
The syntax for put is same as post except you have to use the respective method.

$http service returns a promise object with success and error functions.
It supports actions such as get, post, put, delete and jsonp.

DEMO  DOWNLOAD


(function(){
angular.module('myapp',[])

//define controller and inject $http service as dependency.
.controller('axajCtrl',['$http','$scope',function($http,$scope){
$http.get('extras/data.json').success(function(response){ //make a get request to mock json file.
$scope.data = response; //Assign data received to $scope.data
})
.error(function(err){
//handle error
})
}])

})();


The recommended way to make an ajax call with angular js is to wrap $http request into a factory and then use it to serve data. This makes your code more organised and separates the concerns. Also it allows you to pre-process the received data and use it in multiple controllers.


(function(){
angular.module('myapp',[])

//afactory to consume webservices and return data to controllers.
.factory('webServices',['$http',function($http){
return {
getFriends : function(){
return $http.get('extras/data.json').then(function(response){ //wrap it inside another promise using then
return response.data.friends; //only return friends
});
}
}
}])
//define controller and inject webServices service as dependency.
.controller('prefferedCtrl',['webServices','$scope',function(webServices,$scope){
webServices.getFriends().then(function(response){
$scope.friends = response; //Assign data received to $scope.data
});
}])

})();


Here if you notice I’m using the then method instead on success and error,this is because success returns the original $http promise where as by using then we can return a new promise, this helps us to process the data inside the factory and return only the required information.

Its perfectly fine to use success instead of then if you want the factory to return the original $http promise

Below is the html file for the above demo.

Angular js also allows you to set custom headers using the $http.defaults object.

eg: $http.defaults.headers.common[‘foo’] = ‘Bar’;

This was a basic introduction to the Angular’s $http service, it can do a lot more then what we have seen over here.
Head over to the documentation to dive deeper.