Making an ajax call to web api service with Angular JS

posted on 3/11/2015 9:00 AM by Eric Butler


In this post, I'll show you how to make an ajax call to a Web Api service using AngularJS. While working on another project using Angular, I needed to call a Web Api service and bind the returned data. I'm no expert with Angular, but I decided to do some exploring, and that's when I discovered the $http Angular service. Its very similar to jQuery ajax and uses the familiar Promise pattern.

So, briefly, I'll cover how to make a simple GET request with the $http service. First, we'll include the AngularJS script from google:

 


<!--include angular-->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

 

We need to add a little bit of markup. For this demo, I'm adding a button, and an empty table:

 


    <!--use the app name we set when creating the module-->
    <body data-ng-app="app">
    <!--our controller-->
    <div ng-controller="ItemController">
        <button id="get-items-button" ng-click="getItems()">Get Items</button>
        <p>Look at the list of items!</p>
        <!--this table shows the items we get from our service-->
        <table cellpadding="0" cellspacing="0">
            <thead>
                <tr>
                    <th>Name</th>
                    <th>Description</th>
                    <th>Qty</th>
                    <th>Price</th>
                    <th>Total</th>
                </tr>
            </thead>
            <tbody>
                <!--repeat this table row for each item in items-->
                <tr ng-repeat="item in items">
                    <td>{{item.Name}}</td>
                    <td>{{item.Description}}</td>
                    <td>{{item.Quantity}}</td>
                    <td class="right">{{item.Price | currency}}</td>
                    <td class="right">{{item.Quantity * item.Price | currency}}</td>
                </tr>
            </tbody>
        </table>
    </div>
  

I added an empty table row with the ng-repeat directive to create a row for each item returned by the Web Api. Now we just need some JavaScript to go with it:

    
<script>

        (function () {

            //create our module
            angular.module('app', [])

                //add controller
                .controller('ItemController', function ($scope, $http) {

                    //declare an array of items. this will get populated with our ajax call
                    $scope.items = [];

                    //declare an action for our button
                    $scope.getItems = function () {

                        //perform ajax call.
                        $http({
                            url: "/examples/items",
                            method: "GET"
                        }).success(function (data, status, headers, config) {

                            //copy the data we get to our items array. we need to use angular.copy so that
                            //angular can track the object and bind it automatically.
                            angular.copy(data, $scope.items);


                        }).error(function (data, status, headers, config) {
                            //something went wrong
                            alert('Error getting data');
                        });
                    }

                });
        })();

    </script>

When we click the button, the getItems() function will begin an ajax call to our Web Api service. The $http variable is an object automatically passed into the controller. This object is a service that contains methods for working with ajax and other HTTP functionality. Refer to https://docs.angularjs.org/api/ng/service/$http#! for more information about the $http service.

The part that really does the magic is angular.copy. This method is what causes angular to observe the new data we received, and bind it immediately. When our items are bound the table will populate with our data.


//copy the data we get to our items array. we need to use angular.copy so that
//angular can track the object and bind it automatically.
angular.copy(data, $scope.items);

That's really all there is to it. This example is is available on GitHub, and also available for download in the projects section. You will need Visual Studio 2013 Community

Download Example View on GitHub



As a thank-you, please consider sending a small donation. You can contribute as much as you'd like.

Comments

Log in to leave a comment

Log In