AJAX – AngularJS

Ajax is used for creating asynchronous web applications that get and store data from server without postbacks.

In AngularJS $http object is used for get and post data from the server.

$http use asynchronous techniques for interacting with server. A $http object returns a Promise object.

A promise object represent a value that is not yet available. Its provides a then()  function to execute an action when value becomes available or when an error occurs.

$http methods for making requests are:

1. GET : Use for getting data from server.

$http.get('/url').then(
            function (successResponse) { },
            function (errorResponse) { }
        );

2. POST : Use for submit data to server.

$http.post('/url', object).then(
            function (successResponse) { },
            function (errorResponse) { }
        );

3. PUT : Use for update data to server.

$http.put('/url', object).then(
            function (successResponse) { },
            function (errorResponse) { }
        );

4. DELETE : Use for delete some data from server.

$http.delete('/url', object).then(
            function (successResponse) { },
            function (errorResponse) { }
        );

AngularJS $http Example

I have created a sample ASP.NET MVC Web API service to return json data.

public class ProductsController : ApiController
{
         public JsonResult<List<Product>> Get()
        {
            return Json(Product.GetProducts());
        }
}

public class Product
{
        public string ID { get; set; }
        public string Name { get; set; }

        static List<Product> products = null;
        public static List<Product> GetProducts()
        {
            products = null;
            if (products == null)
            {
                products = new List<Product>();
                for (int i = 0; i < 4; ++i)
                {
                    products.Add(new Product { ID = i.ToString(), Name = "Name " + i.ToString() });
                }
            }
            return products;
        }
}

This Web API returns products JSON data.

[{
  "ID":"0",
  "Name":"Name 0"
},
{
  "ID":"1",
  "Name":"Name 1"
},
{
  "ID":"2",
  "Name":"Name 2"
},
{
  "ID":"3",
  "Name":"Name 3"
}]

HTML AngularJS application

<div ng-app="productsApp" ng-controller="productsCtrl">
    <table>
        <tr>
            <th>ID </th>
            <th>Name </th>
        </tr>
        <tr ng-repeat="item in products">
            <td>{{ item.ID }}</td>
            <td>{{ item.Name }} </td>
        </tr>

    </table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js"></script>
<script>
    var app = angular.module('productsApp', []);

    app.controller('productsCtrl', ['$scope', '$http', function ($scope, $http) {
        $scope.products = [];
        $http.get('/api/products').then(function (response) {
            $scope.products = response.data;
        }, function (errResponse) {
            alert(errResponse);
        });
    }]);
</script>

• Line 2 creates an AngularJS app productsApp and an app controller productsCtrl using ng-app and ng-controller directives.
• Line 8 iterates over a products object and display ID and Name properties data in each row using ng-repeat directive.
• Line 17 defines an AngularJS app using angular.module function.
• Line 19 defines an AngularJS controller using app.controller function.
• Line 20 creates a blank products array javascript object.
• Line 21 use $http.get method to get products JSON data from ‘/api/products’ url.
• Line 22 fill the products data from response in success function.
• Line 24 shows the alert when any error occurs in getting data from server.

Result