Back-End Server Communication With AngularJS

Introduction

AngularJS is very good to communicate with various back-ends using with features XMLHttpRequest (XHR) and JSONP requests. It has very common $http service for the XHR and JSON calls. It can easily handle Restful endpoints.

 

What is Rest

 

Rest stands for Representational State Transfer. It is an architectural style. It specifies constraints, such as the uniform interface. It can use SOAP web services but doesn't define too much standards like SOAP. It requires less bandwidth resources than SOAP.  Data format can be in the form of plain text, HTML, XML, JSON, etc.

 

XHR

 

XHR stands for XMLHTTPRequest. It is an API and provides facility to make a HTTP or HTTPS calls to a web server and to provide data in return.

JSON

It stands for JavaScript Object Notation. It removes  the cross-domain restrictions in browser. It provides data in a format where object fields are represented as key-value pairs like below:

{
    "EmpName": "Tom",
    "EmpId": 1234,
    "City": Delhi
}

$http very basic

AngularJS provides $http service to make XHR and JSON calls.  It is very simple and straightforward like below: 

var myResponse = $http.get('myData.json');

myResponse.success(function (data, status, headers, config) {
   $scope.data = data;
});

myResponse.error(function (data, status, headers, config) {
       throw new Error('Error in retrieving data...');
});

Methods fo XHRrequests

Below are some methods of XHRrequests:

1. GET: $http.get(url, config)
2. POST:  $http.post(url, data, config)
3. PUT: $http.put(url, data, config)
4. DELETE : $http.delete(url, config)
5. HEAD: $http.head

Http Responses

 

Whenever we make a API call using $http then requests can be either success or fail. So, in the case of response, method will be called with the following parameters :

1. Data : It is an actual response data.
2. Status: It is the HTTP status of the response.
3. Headers
4. Config: It is a configuration object that was supplied when request was made.

$q

$q is a service that helps us to run function asynchronously. We use its return value when it completes the processing of asynchronous operation.

$q.defer()

It creates new instance of deferred. It exposes the associated promise instance as well as APIs which are being used in the case of success or failure. 

 

The following are the methods:

1. resolve(value) : It resolves the derived promise with the value.  e.g. 
   

   var defer = $q.defer();
   
   ....
   
   defer.resolve(data);

2.  reject(reason): It rejects the derived promise with the reason. e.g. 
   

    var defer = $q.defer();
   
   ....
   
   .error(function () {
           defer.reject();
         });

3.  notify(value): It provides updates on the status of the promise's execution. 

Complete example

function myServiceRequest()
{
    var defer = $q.defer();
    $http.get('abc.json')
      .success(function (data)
       {
        defer.resolve(data);
      })
      .error(function ()
       {
        defer.reject();
      });

    return defer.promise;
  }

Complete wrapper for API call using $http with exception handling

/*global angular*/

angular.module('myModule').service('myDataService',
    [
        '$http',
        '$q',
        '$log',
        function (
            $http,
            $q,
            $log
        ) {
            'use strict';
            var self = this;

            self.get = function (url, data, parseJson) {
                var deferred = $q.defer(), startTime = new Date(),
                    getData = { params: data };
                $http.get(url, getData).success(function (data, status, header, config) {
                    /*jslint unparam:true*/
                    var endTime = new Date();
                    $log.log(url, status, endTime - startTime, "ms");
                    if (parseJson) {
                        deferred.resolve(angular.fromJson(data.d));
                    } else {
                        deferred.resolve(data.d);
                    }
                }).error(function (data, status, header, config) {
                    /*jslint unparam:true*/
                    var endTime = new Date();
                    $log.log(url, status, endTime - startTime, "ms");
                });
                return deferred.promise;
            };

            self.post = function (url, data, parseJson) {
                var deferred = $q.defer(), startTime = new Date();
                $http.post(url, data).success(function (data, status, header, config) {
                    /*jslint unparam:true*/
                    var endTime = new Date();
                    $log.log(url, status, endTime - startTime, "ms");
                    if (parseJson) {
                        deferred.resolve(angular.fromJson(data.d));
                    } else {
                        deferred.resolve(data.d);
                    }
                }).error(function (data, status, header, config) {
                    /*jslint unparam:true*/
                    var endTime = new Date();
                    $log.log(url, status, endTime - startTime, "ms");
                });
                return deferred.promise;
            };
        }]);

Call post method from myDataService

/*global angular*/
angular.module('myModule').service('myPersonalService', ['$log', 'myDataService', 'urlConstants',
    function ($log, dataService, urlConstants) {
        'use strict';
        $log.log("myPersonalService details");

        var self = this;
        self.myMethod = function (myId) {
            var param = {
                myId: myId
            };
            return myDataService.post(urlConstants.myMethodUrl, param);
        };

    }]);