AngularJS $http service

Updated on     Kisan Patel

The $http service handles AJAX requests via the browser’s XMLHttpRequest object or via JSONP.

The $http service is a function that takes a single argument: a configuration object that is used to generate a HTTP request. The function returns a promise that has two helper methods: success and error.

    method: 'GET',
    url: '/api/users.json'
}).success(function(data, status, headers, config) {
       // This is called when the response is
       // ready
}).error(function(data, status, headers, config) {
       // This is called when the response
       // comes back with an error status

Lets implement a controller using the $http service to fetch the data and store it in the scope.

<div ng-app="app" ng-controller="studentController">
    <table border="1">
        <tr ng-repeat="student in students">
           <td>{{ student.Id}}</td>
           <td>{{ student.Name}}</td>
           <td>{{ student.RollNo}}</td>
<script type="text/javascript">
 var myModule = angular.module("app", []);

 myModule.controller('studentController', function ($scope, $http) {
      $scope.students = [];

         method: "GET",
         url: "/api/student"
      .success(function (data, status, headers, config) {
               angular.copy(data, $scope.students);
      }).error(function (data, status, headers, config) {

The following JSON data will be returned from a web server:


The output will be:


The $http service supports the HTTP verbs get, head, post, put, delete and jsonp. The following code shows simple POST request example (passing data):

    method: "POST",
    url: "/api/student",
    data: { Name: 'Kiran', RollNo: '76'}
.success(function (data, status, headers, config) {
    angular.copy(data, $scope.students);
}).error(function (data, status, headers, config) {



Leave a Reply