AngularJS' built-in $http service is good enough to serve most purposes. AngularJS' built-in $http has the following methods:

We can customize the default $http configuration, such as to set the customer header, transform the client request and server response, set timeout instead of default timeout, enable cache and/or set the response type, and so on.

The following table shows the request arguments and their description for which we can use $http:

The following table shows the response object properties:

The following code shows how to implement custom configuration for $http. In the following example, we will use the post method of $http to post data on the server. If we want to post the data using the post method of $http, the content type needs to be changed to application/x-www-form-urlencoded. Instead of using the default content type in the header, we can change the content type in the header by changing the default configuration of $http as shown in the following code:

app.controller('ctrlSetCarInfo', function ($scope, $http) {

    var Url = '/Cars/setCarInfo';
    var newConfig = {
     
    timeout : 200,
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}

    }

    $http({
            method: 'POST',
            url: Url,
            data:{'data':data}
        

    }).success(function (data, status, headers, config) {

        <!--Do something when it is successful -->

    }).error(function (data, status, headers, config) {

        <! - - Handle the error - ->
    });

});

In the preceding code example, we posted the data on the server using the $http service. Instead of using the built-in post method of $http, we customized the configuration. As you can see in the preceding code, we created a var newConfig variable and assigned timeout: 200 and headers: {content type: 'application/x-www-form-urlencoded'}. With this custom configuration, the timeout will occur after 200 milliseconds. The header of the request contains the content type of application/x-www-form-urlencoded. In a similar way, we can implement AngularJS' built-in $http methods.

In client-side application development, we are able to communicate with the server via the web API and populate the template (DOM) with data from the server's response. However, performance of the application is constantly affected if we get the data from the server, on each client's request, instead of caching the data. A cache is a constituent that stores the data on a client so that in future, the same client's request is served from the client cache instead of going back to server and receiving data from the server. The more a client's request is served from the cache, there is an increase in the overall application performance. Caching works with a key and a value combination; there is a key that will point to the data that is cached. When the data is requested from the client, the client first tries to find the data in the cache. If the assigned key is found in the cache, the client gets the data from the cache, which is known as a cache hit. Otherwise, if the data is not found in the cache, it is known as a cache miss and the client will request the data from the server.

In the AngularJS framework, the $http service has a built-in cache option that by default is turned off. When the cache option is off, the response from the server is not stored in the cache. However, what if we want to cache data for each request for the same resource? To do this, we need to set the $http request configuration property cache to true in order to use the default cache. The advantage of turning the cache option on for the $http service is that it will enable the $http service to prevent repeated requests to the server. When the $http cache property is true, the server response is stored in the cache. The next time the same request is made, the response is served from the cache instead of sending a request to the server. It is notable that even though the response is served from the cache, the delivery of the data will still be asynchronous.

If the client makes multiple GET requests for the same resource, only the first request gets the data from the server and is stored in the client cache. The following requests will fetch the data from the cache, which will contain the same data as the first request.

The following code shows how to set the $http configuration property cache to true:

app.controller('ctrlGetCarInfo', function ($scope, $http) {

    var Url = '/Cars/getCarInfo';

    $http({

            method: 'GET',
            url: Url,
            cache:true,
            params:{model:'Toyota'}
        

    }).success(function (data, status, headers, config) {

        <!--Do something when it is successful -->

    }).error(function (data, status, headers, config) {

        <! - - Handle the error - ->
    });

});

<!—OR --> 

app.controller('ctrlGetCarInfo', function ($scope, $http) {

var Url = '/Cars/getCarInfo';

 $http.get(Url, {params:{model:'Toyota'}, cache:true

          }).success(function(data, status, headers, config)
            {
               <!--Do something when it is successful -->
          }).error(function(data, status, headers, config)
            {
              <! - - Handle the error - ->
            });
});

In the preceding code, we demonstrated how to set the client cache for server-side content using the $http caching mechanism.

When we make a request to or receive a response from the server, the $http service allows us to define transformation functions in the $http configuration property for both the request and response. However, these options are optional; by default, the $http service is set to handle JSON. JSON is a very malleable data format. It can contain randomly nested data structures.

In the AngularJS framework, when we are posting data using the $http service, by default, the data will be serialized with JSON and sent to the server with the content type of application/json. However, if we want to post data with a different content type, we can override the default $http service transformation. Both the $http request and response can be transformed using the $http service's transform functions, transformRequest and transformResponse. These $http configuration properties are single functions that return the transformed data or an array of such transformation functions, which allows us to make a new transformation in the transformation chain.

The default transformation of request and response of $http is as follows:

Both the request and response transformation can be achieved within the $http configuration property, which has access to the request and response header collection and nonserialized data. The purpose of the transformation is to update the header information and to return the updated data that will be injected in the underlying XMLHttpRequest object.

If you want to update the default transformation of a single request and response, then provide the transformRequest and/or transformResponse properties of the configuration object passed into $http, as shown in the following code:

function appendTransform(defaults, transform) { 

 <!-- We can't guarantee that the default transformation is an array -->

defaults = angular.isArray(defaults) ? defaults : [defaults]; 

<!--Append the new transformation to the defaults return -->

defaults.concat(transform); 

} 

var Url = '/Cars/getCarInfo';

$http({ url: Url, method: 'GET', 

transformResponse:appendTransform($http.defaults.transformResponse, 

function(value) { 

return doTransform(value); 

}) 

});

If you have to update the default transformation of a whole application, best practice is to make a change to transformRequest and/or transformResponse in the application configuration instead of changing each request, as shown in the following code:

var app = angular.model('myApp',[]);

app.config(['$httpProvider', function($httpProvider) {

    $httpProvider.defaults.transformResponse = function(data) {

      return performSomeTransformation(data);

    };

  }])

In the preceding code, we updated the application's global configuration for transformation instead of updating the transformation for each request and/or response of $http.