Question: I am familiar with [**Jquery AJAX call**](http://api.jquery.com/jQuery.ajax/), 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 != '') { 
    }
});

```

Answer: 
By default Angular does not provide beforeSend and complete but you can implement them by using interceptors. Here is my implementation:

```
(function() {
    var app = angular.module("app");

    app.factory("interceptors", [function() {

        return {

            // if beforeSend is defined call it
            'request': function(request) {

                if (request.beforeSend)
                    request.beforeSend();

                return request;
            },

            // if complete is defined call it
            'response': function(response) {

                if (response.config.complete)
                    response.config.complete(response);

                return response;
            }
        };

    }]);

})();

```

Then you have to register your interceptor like this:

```
    (function () {
        var app = angular.module('app', ['ngRoute']);

        app.config(["$routeProvider", "$httpProvider", function ($router, $httpProvider) {    

            // Register interceptors service
            $httpProvider.interceptors.push('interceptors');

            $router.when("/", { templateUrl: "views/index.html" })

            .otherwise({ redirectTo: "/" });        
        }]);
    })();

```

After this code you can use it like this:

```
var promise = $http({
    method: 'POST',
    url: constants.server + '/emails/send',
    data: model,
    beforeSend: function() {
        model.waiting = true;
    },
    complete: function() {
        model.waiting = false;
    }
});

```
You can use `interceptors`. Search for the word `interceptor` into the Angular [$http documentation](http://docs.angularjs.org/api/ng/service/$http) 

> 
> **As the documentation says** : *For purposes of global error handling, >authentication, or any kind of synchronous or asynchronous pre-processing of >request or postprocessing of responses*
> 
> 
> 

Here is a good [Fiddle Example](http://jsfiddle.net/zdam/dBR2r/) displaying a loading gif before the ajax call is sent.
-----------------------------------------------------------------------------------------------------------------------

**EDIT**

As Satpal commented, `$httpProvider.responseInterceptors` used in the Fiddle is `deprecated`. You should use `$httpProvider.interceptors` instead.