Consuming a RESTful Web Service with AngularJS Using $http Service

January 17, 2014 / 2 responses

The $http service is a core angular service that helps in consuming web services (either REST or SOAP) via the browser’s XMLHttpRequest object or via JSONP . $http service is similar to jQuery $.ajax() method.

Here is the syntax of $http service :


$http({ method: 'Http-Method-Name', url: '/someUrl' })
    .success(function (data, status, headers, config) {
        //this callback will be called asynchronously, when the response is available
    })
    .error(function (data, status, headers, config) {
        //called asynchronously if an error occurs or server returns response with an error status.
    });

The $http service is a function which takes a single argument that is a configuration object used to generate an HTTP request and returns a promise with two $http specific methods: success and error. Since the returned value of calling the $http function is a promise, you can also use the then method to register callbacks, and these callbacks will receive a single argument that is an object representing the response.

A response status code between 200 and 299 is considered a success status and will result in the success callback being called, otherwise the error callback being called.

An example events service (http://mugh-events.azurewebsites.net/api/events/), which returns a list of events. Here is the json response for api call:


[
  {
    "EventId": "event0001",
    "Name": "Visual Studio 2013 - San Francisco Launch Event",
    "Description": "Discover how Visual Studio 2013 allows you to collaborate better and be more agile. See how it helps you turn big ideas into more compelling apps. Experience how it integrates best practices that accelerate development and deployment.  You’ll enjoy several sessions which will take Visual Studio, Team Foundation Server, and Test Professional through their paces to show off what’s possible with this incredible release!",
    "SessionIds": [
      "session001",
      "session002",
      "session003"
    ]
  },
  {
    "EventId": "event0002",
    "Name": "Visual Studio 2013 - London Launch Event",
    "Description": "Discover how Visual Studio 2013 allows you to collaborate better and be more agile. See how it helps you turn big ideas into more compelling apps. Experience how it integrates best practices that accelerate development and deployment.  You’ll enjoy several sessions which will take Visual Studio, Team Foundation Server, and Test Professional through their paces to show off what’s possible with this incredible release!",
    "SessionIds": [
      "session004",
      "session005"
    ]
  }
]

Let’s use the $http service to consume the above rest service.

Define an angular module
Create an EventsController
In EventsController use $http service to call the web service
Set result to $scope.events in success callback.


var myevents = angular.module('myeventsApp', []);

myevents.controller("EventsController", function ($scope, $http) {
    $http.get('http://mugh-events.azurewebsites.net/api/events/')
        .success(function (data) {
            $scope.events = data;
        });
});

Create a html page to display the data in $scope.events.


<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" 
        href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.9/angular.min.js">
  </script>
</head>
<body ng-app="myeventsApp">
  <div ng-controller="EventsController" class="container">
    <h1>Events</h1>
    <hr/>
    <div ng-repeat="event in events" class="col-md-6">
      <h4>{{event.Name}}</h4>
      <p>{{event.Description}}</p>
    </div>
  </div>
</body>
</html>

For more information on $http service check out : http://docs.angularjs.org/api/ng.$http

Consuming a RESTful Web Service with AngularJS Using $http Service

Related

Write a response

Discussion

Shravan Kumar Kasagoni

Related

Write a response

Discussion