What Is $HTTP Service In AngularJS

In this article you will learn about $http service in AngularJS.

AngularJS provides $http control which works as a service to read data from the server. $http is an AngularJS service for reading data from remote servers. The $http is a core AngularJS service that is used to communicate with the remote HTTP service via browser’s XMLHttpRequest object or via JSONP.

Syntax:

$http({
   method: 'Method_Name',
   url: '/someUrl'
   }).then(function successCallback(response) {
      //when the response is available, this callback will be called asynchronously

   }, function errorCallback(response) {
      // this method will called when server returns response with an error status.

});


The $http service is function that takes a configured object to generate a HTTP request and return the response. This response contains data, status code, header, configuration object and status text. In $http the first function executes on successful callback and the second function xeecutes on error.

Example 1:

  1. <html>  
  2.   
  3.     <head>  
  4.         <title>Angular JS Includes</title>  
  5.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">  
  6.             </script>  
  7.             <script src="angular.min.js">  
  8.                 </script>  
  9.     </head>  
  10.   
  11.     <body>  
  12.         <h2>AngularJS Ajax Demo</h2>  
  13.         <div ng-app="app" ng-controller="Employee"> <span>{{Message}}</span><br/> <span>{{Status}}</span><br/> <span>{{Headers}}</span><br/> <span>{{Config}}</span><br/> <span>{{StatusText}}</span><br/> </div>  
  14.             <script>  
  15.             var obj = angular.module('app', []);  
  16.             obj.controller('Employee', function ($scope, $http)  
  17.             {  
  18.                 $http(  
  19.                 {  
  20.                     method: 'GET',  
  21.                     url: 'index.html'  
  22.                 }).then(function successCallback(response)  
  23.                 {  
  24.                     $scope.Message = response.data;  
  25.                     $scope.Status = response.status;  
  26.                     $scope.Headers = response.headers;  
  27.                     $scope.Config = response.config;  
  28.                     $scope.StatusText = response.statusText;  
  29.                 }, function errorCallback(response)  
  30.                 {  
  31.                     alert("UnsuccessFull call!");  
  32.                 });  
  33.             });  
  34.             </script>  
  35.     </body>  
  36.   
  37. </html>  
Index.HTML

This is $Ajax Example.

Output

see output

In the above example we use a $ajax service and define the “url” and “method” property of $ajax. On successful Callback method we are showing data of “index.html” page and on error we define the alert message of failure.

Methods

In the above example we used the .get shortcut method for $ajax service . There are also other shortcut methods.

 

  • $http.get
  • $http.post
  • $http.head
  • $http.put
  • $http.delete
  • $http.patch
  • $http.jsonp

Property

The response from the server is retrieved as an object and this object contains the following properties:

Property Description
.config The configuration object that was used to generate the request.
.status Status number defining the HTTP status.
.data The response body transformed with the transform functions.
.headers Function to use to get header information.
.statusText HTTP status text of the response.

Example 2:

  1. <html>  
  2.   
  3.     <head>  
  4.         <title>Angular JS Includes</title>  
  5.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">  
  6.             </script>  
  7.             <script src="angular.min.js">  
  8.                 </script>  
  9.                 <style>  
  10.                 table,  
  11.                 th,  
  12.                 td {  
  13.                     border: 1pxsolidgrey;  
  14.                     border-collapse: collapse;  
  15.                     padding: 5px;  
  16.                 }  
  17.                   
  18.                 tabletr:nth-child(odd) {  
  19.                     background-color: #0094ff;  
  20.                 }  
  21.                   
  22.                 tabletr:nth-child(even) {  
  23.                     background-color: #00ff90;  
  24.                 }  
  25.                 </style>  
  26.     </head>  
  27.   
  28.     <body>  
  29.         <h2>AngularJS Ajax Demo</h2>  
  30.         <div ng-app="app" ng-controller="Employee">  
  31.             <table>  
  32.                 <tr>  
  33.                     <th>Name</th>  
  34.                     <th>City</th>  
  35.                     <th>Employee Id</th>  
  36.                 </tr>  
  37.                 <tr ng-repeat="Emp in Employee">  
  38.                     <td>{{Emp.Name}}</td>  
  39.                     <td>{{Emp.City}}</td>  
  40.                     <td>{{Emp.Emp_Id}}</td>  
  41.                     </tr>  
  42.             </table>  
  43.             </div>  
  44.             <script>  
  45.             var appconf = angular.module('app', []);  
  46.             appconf.controller('Employee', function ($scope, $http)  
  47.             {  
  48.                 $http(  
  49.                 {  
  50.                     method: "GET",  
  51.                     url: "EmployeeData.txt"  
  52.                 }).then(functiononSuccess(response)  
  53.                 {  
  54.                     $scope.Employee = response.data;  
  55.                 }, functiononError(response)  
  56.                 {  
  57.                     alert("Error Occur!")  
  58.                 });  
  59.             })  
  60.             </script>  
  61.     </body>  
  62.   
  63. </html>  
EmployeeData.txt
  1. [  
  2.    {  
  3.        "Name""Pankaj Choudhary",  
  4.        "City""Alwar",  
  5.        "Emp_Id""1210038"  
  6.    },  
  7.    {  
  8.        "Name""Neeraj Saini",  
  9.        "City""Delhi",  
  10.        "Emp_Id""1210036"  
  11.    },  
  12.    {  
  13.        "Name""Rahul Prajapat",  
  14.        "City""Jaipur",  
  15.        "Emp_Id""1210042"  
  16.    },  
  17.    {  
  18.        "Name""Sandeep Jangid",  
  19.        "City""Alwar",  
  20.        "Emp_Id""1210047"  
  21.    },  
  22.    {  
  23.        "Name""Sanjeev Baldia",  
  24.        "City""Jaipur",  
  25.        "Emp_Id""1210047"  
  26.    },  
  27. {  
  28.     "Name""Narendra Sharma",  
  29.     "City""Alwar",  
  30.     "Emp_Id""1210034"  
  31. }]  
Output

run

In the above example we retrieved data from EmployeeData.txt file. We get the data into JSON format, so we used the “ng-repeat” and view the data in table format.

Setting HTTP Header

The $http service automatically set svalues for the header property for all requests. We can manually define the values for the property of headers. In the below example we defined the same property of header.

Example:
  1. <html>  
  2.   
  3.     <head>  
  4.         <title>Angular JS Includes</title>  
  5.         <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">  
  6.             </script>  
  7.             <script src="angular.min.js">  
  8.                 </script>  
  9.     </head>  
  10.   
  11.     <body>  
  12.         <h2>AngularJS Ajax Demo</h2>  
  13.         <div ng-app="app" ng-controller="Employee"> <span>{{Message}}</span><br/> <span>{{Status}}</span><br/> <span>{{Headers}}</span><br/> <span>{{Config}}</span><br/> <span>{{StatusText}}</span><br/> </div>  
  14.             <script>  
  15.             var obj = angular.module('app', []);  
  16.             obj.controller('Employee', function ($scope, $http)  
  17.             {  
  18.                 $http(  
  19.                 {  
  20.                     method: 'GET',  
  21.                     url: 'index.html',  
  22.                     headers:  
  23.                     {  
  24.                         'Content-Type': String,  
  25.                         Accept: "application/json, text/plain, */*"  
  26.                     },  
  27.                     data:  
  28.                     {  
  29.                         test: 'This is test Data'  
  30.                     }  
  31.                 }).then(function successCallback(response)  
  32.                 {  
  33.                     $scope.Message = response.data;  
  34.                     $scope.Status = response.status;  
  35.                     $scope.Headers = response.headers;  
  36.                     $scope.Config = response.config;  
  37.                     $scope.StatusText = response.statusText;  
  38.                 }, function errorCallback(response)  
  39.                 {  
  40.                     alert("UnsuccessFull call!");  
  41.                 });  
  42.             });  
  43.             </script>  
  44.     </body>  
  45.   
  46. </html>  
Index.html:

This is $Ajax Example.

Output:

Output

Conclusion

The $http service is used for reading data from remote servers. Data from remote servers can be retrieved in simple text or JSON format.
 
Read more articles on AngularJS: