What Is $HTTP Service In AngularJS

Article

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:

<html>
<head>
<title>Angular JS Includes</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
<script src="angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Ajax Demo</h2>
<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>
<script>
var obj = angular.module('app', []);
obj.controller('Employee', function ($scope, $http)
{
$http(
{
method: 'GET',
url: 'index.html'
}).then(function successCallback(response)
{
$scope.Message = response.data;
$scope.Status = response.status;
$scope.Headers = response.headers;
$scope.Config = response.config;
$scope.StatusText = response.statusText;
}, function errorCallback(response)
{
alert("UnsuccessFull call!");
});
});
</script>
</body>
</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:

<html>
<head>
<title>Angular JS Includes</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
<script src="angular.min.js">
</script>
<style>
table,
th,
td {
border: 1pxsolidgrey;
border-collapse: collapse;
padding: 5px;
}
tabletr:nth-child(odd) {
background-color: #0094ff;
}
tabletr:nth-child(even) {
background-color: #00ff90;
}
</style>
</head>
<body>
<h2>AngularJS Ajax Demo</h2>
<div ng-app="app" ng-controller="Employee">
<table>
<tr>
<th>Name</th>
<th>City</th>
<th>Employee Id</th>
</tr>
<tr ng-repeat="Emp in Employee">
<td>{{Emp.Name}}</td>
<td>{{Emp.City}}</td>
<td>{{Emp.Emp_Id}}</td>
</tr>
</table>
</div>
<script>
var appconf = angular.module('app', []);
appconf.controller('Employee', function ($scope, $http)
{
$http(
{
method: "GET",
url: "EmployeeData.txt"
}).then(functiononSuccess(response)
{
$scope.Employee = response.data;
}, functiononError(response)
{
alert("Error Occur!")
});
})
</script>
</body>
</html>

EmployeeData.txt

[
{
"Name": "Pankaj Choudhary",
"City": "Alwar",
"Emp_Id": "1210038"
},
{
"Name": "Neeraj Saini",
"City": "Delhi",
"Emp_Id": "1210036"
},
{
"Name": "Rahul Prajapat",
"City": "Jaipur",
"Emp_Id": "1210042"
},
{
"Name": "Sandeep Jangid",
"City": "Alwar",
"Emp_Id": "1210047"
},
{
"Name": "Sanjeev Baldia",
"City": "Jaipur",
"Emp_Id": "1210047"
},
{
"Name": "Narendra Sharma",
"City": "Alwar",
"Emp_Id": "1210034"
}]

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:

<html>
<head>
<title>Angular JS Includes</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js">
</script>
<script src="angular.min.js">
</script>
</head>
<body>
<h2>AngularJS Ajax Demo</h2>
<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>
<script>
var obj = angular.module('app', []);
obj.controller('Employee', function ($scope, $http)
{
$http(
{
method: 'GET',
url: 'index.html',
headers:
{
'Content-Type': String,
Accept: "application/json, text/plain, */*"
},
data:
{
test: 'This is test Data'
}
}).then(function successCallback(response)
{
$scope.Message = response.data;
$scope.Status = response.status;
$scope.Headers = response.headers;
$scope.Config = response.config;
$scope.StatusText = response.statusText;
}, function errorCallback(response)
{
alert("UnsuccessFull call!");
});
});
</script>
</body>
</html>