AngularJS From Beginning: Http Request or Ajax - Part Seven

Configuring Ajax Requests

The methods defined by the $http service all accept an optional argument of an object containing configuration settings. For most applications, the default configuration used for Ajax requests will be fine, but you can adjust the way the requests are made by defining properties on the configuration object corresponding to below table.

The most interesting configuration feature is the ability to transform the request and response through the aptly named transformRequest and transformResponse properties. AngularJS defines two built-in transformations; outgoing data is serialized into JSON, and incoming JSON data is parsed into JavaScript objects.

Html file code

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
    <title>AngularJS Ajax</title>
    <script src="angular.js"></script>
    <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
    <script src="app.js"></script>
    <script src="ajax_config.js"></script>
</head>
<body ng-controller="ajaxController">
    <div class="panel panel-default">
        <div class="panel-body">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-hide="products.length">
                        <td colspan="4" class="text-center">No Data</td>
                    </tr>
                    <tr ng-repeat="item in products">
                        <td>{{item.Category}}</td>
                        <td>{{item.Book}}</td>
                        <td>{{item.Publishers}}</td>
                        <td>{{item.price | currency}}</td>
                    </tr>
                </tbody>
            </table>
            <p>
                <button class="btn btn-primary" ng-click="loadData()">
                    Load Data
                </button>
                <button class="btn btn-primary" ng-click="loadXMLData()">
                    Load Data (XML)
                </button>
            </p>
        </div>
    </div>
</body>
</html>

AngularJS file code

testApp.controller("ajaxController", function($scope, $http) {

    $scope.loadData = function() {
        $http.get("data.json").success(function(data) {
            $scope.products = data;
        });
    };

    $scope.loadXMLData = function() {
        var config = {
            transformResponse: function(data, headers) {
                if ((headers("content-type") === "application/xml" || headers("content-type") === "text/xml") && angular.isString(data)) {
                    var products = [];
                    var productElems = angular.element(data.trim()).find("product");
                    for (var i = 0; i < productElems.length; i++) {
                        var product = productElems.eq(i);
                        products.push({
                            Category: product.attr("Category"),
                            Book: product.attr("Book"),
                            Publishers: product.attr("Publishers"),
                            price: product.attr("price")
                        });
                    }
                    return products;
                } else {
                    return data;
                }
            }
        };
        $http.get("data.xml", config).success(function(data) {
            $scope.products = data;
        });
    };

});

Transforming a Request

You can transform a request by assigning a function to the transformRequest property of the configuration object. The function is passed the data that will be sent to the server and a function that returns header values (although many headers will be set by the browser just before it makes the request). The result returned by the function will be used for the request, which provides the means for serializing data.

Html file code

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
    <title>AngularJS Ajax</title>
    <script src="angular.js"></script>
    <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
    <script src="app.js"></script>
    <script src="ajax_transforms.js"></script>
</head>
<body ng-controller="ajaxController">
    <div class="panel panel-default">
        <div class="panel-body">
            <table class="table table-striped table-bordered">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Category</th>
                        <th>Price</th>
                    </tr>
                </thead>
                <tbody>
                    <tr ng-hide="products.length">
                        <td colspan="4" class="text-center">No Data</td>
                    </tr>
                    <tr ng-repeat="item in products">
                        <td>{{item.Category}}</td>
                        <td>{{item.Book}}</td>
                        <td>{{item.Publishers}}</td>
                        <td>{{item.price | currency}}</td>
                    </tr>
                </tbody>
            </table>
            <p>
                <button class="btn btn-primary" ng-click="loadData()">
                    Load Data
                </button>
                <button class="btn btn-primary" ng-click="sendData()">
                    Send Data
                </button>
            </p>
        </div>
    </div>
</body>
</html>

Angularjs file code

testApp.controller("ajaxController", function($scope, $http) {

    $scope.loadData = function() {
        $http.get("data.json").success(function(data) {
            $scope.products = data;
        });
    };

    $scope.sendData = function() {
        var config = {
            headers: {
                "content-type": "application/xml"
            },
            transformRequest: function(data, headers) {
                var rootElem = angular.element("<xml>");
                for (var i = 0; i < data.length; i++) {
                    var prodElem = angular.element("<product>");
                    prodElem.attr("Category", data[i].Category);
                    prodElem.attr("Book", data[i].Book);
                    prodElem.attr("Publishers", data[i].Publishers);
                    rootElem.append(prodElem);
                }
                rootElem.children().wrap("<products>");
                return rootElem.html();
            }
        };
        $http.post("ajax_transforms.html", $scope.products, config);
    };

});

The output of the code is as below.

Working with Promises

Promises are a way of registering interest in something that will happen in the future, such as the response sent from a server for an Ajax request. Promises are not unique to AngularJS, and they can be found in many different libraries, including jQuery, but there are variations between implementations to accommodate differences in design philosophy or the preferences of the library developers. There are two objects required for a promise: a promise object, which is used to receive notifications about the future outcome, and a deferred object, which is used to send the notifications. For most purposes, the easiest way to think of promises is to regard them as a specialized kind of event; the deferred object is used to send events via the promise objects about the outcome of some task or activity. AngularJS provides the $q service for obtaining and managing promises, which it does through the methods that I have described in below table. In the sections that follow, I’ll show you how the $q service works as I build out the example application.

We can define the deferred object with the help of $q.defer method and a deferred object defines the methods as below.

The main pattern of use is to get a deferred object and then call the resolve or reject method to signal the outcome of the activity.

The promise objects defines the below methods,

Promise.html

<!DOCTYPE html>
<html ng-app="TestApp">
<head>
    <title>AngularJS Ajax Promise</title>
    <script src="angular.js"></script>
    <link href="../../RefStyle/bootstrap.min.css" rel="stylesheet" />
    <script src="app.js"></script>
    <script src="promise.js"></script>
</head>
<body ng-controller="ajaxController">
    <div class="well" promise-worker>
        <button class="btn btn-primary">Heads</button>
        <button class="btn btn-primary">Tails</button>
        <button class="btn btn-primary">Abort</button>
        Outcome: <span promise-observer></span>
    </div>
</body>
</html>

Promise.js

testApp.directive("promiseWorker", function($q) {
    var deferred = $q.defer();
    
    return {
        link: function(scope, element, attrs) {
            element.find("button").on("click", function(event) {
                var buttonText = event.target.innerText;
                
                if (buttonText == "Abort") {
                    deferred.reject("Aborted");
                } else {
                    deferred.resolve(buttonText);
                }
            });
        },
        controller: function($scope, $element, $attrs) {
            this.promise = deferred.promise;
        }
    };
});

testApp.directive("promiseObserver", function() {
    return {
        require: "^promiseWorker",
        link: function(scope, element, attrs, ctrl) {
            ctrl.promise.then(function(result) {
                element.text(result);
            }, function(reason) {
                element.text("Fail (" + reason + ")");
            });
        }
    };
});

testApp.controller("ajaxController", function($scope, $http) {
    // Controller logic can be added here
});

The output of the controller is as below.