I am familiar with Jquery AJAX call, which has different callbacks like beforeSend, success, complete, etc.
This is the example AJAX call with Jquery:
$.ajax({
url: 'register.php',
type: 'POST',
data: {name:name, email:email},
beforeSend: function() {
// show loading GIF
},
complete: function() {
// hide loading GIF
},
success: function(data) {
// parse response
}
});
I want to achieve the same using AngularJS.
Is there a callback like beforeSend for AngularJS AJAX request ? This is my code so far, but i am not sure where can i use a callback like beforeSend (so that i can display a loading GIF image) in my code:
$http.post('register.php', {'name': $scope.name, 'email': $scope.email})
.success(function(data, status, headers, config) {
if (data != '') {
}
});
By default Angular does not provide beforeSend and complete but you can implement them by using interceptors. Here is my implementation:
Then you have to register your interceptor like this:
After this code you can use it like this:
You can use
interceptors
. Search for the wordinterceptor
into the Angular $http documentationHere is a good Fiddle Example displaying a loading gif before the ajax call is sent.
EDIT
As Satpal commented,
$httpProvider.responseInterceptors
used in the Fiddle isdeprecated
. You should use$httpProvider.interceptors
instead.