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 the 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 be called when the server returns a response with an error status
});
The $http service is the function that takes a configured object to generate an 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 executes 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("Unsuccessful call!");
});
});
</script>
</body>
</html>
Index.HTML
This is a $Ajax Example.
Output
![Ajax demo]()
In the above example, we use a $ajax service and define the “URL” and “method” properties of $ajax. On the successful Callback method, we show data of the “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 the $ Ajax service. There are also other shortcut methods.
$http.get(url, config).then(successCallback, errorCallback);
$http.post(url, data, config).then(successCallback, errorCallback);
$http.head(url, config).then(successCallback, errorCallback);
$http.put(url, data, config).then(successCallback, errorCallback);
$http.delete(url, config).then(successCallback, errorCallback);
$http.patch(url, data, config).then(successCallback, errorCallback);
$http.jsonp(url, config).then(successCallback, errorCallback);
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 is 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: 1px solid grey;
border-collapse: collapse;
padding: 5px;
}
table tr:nth-child(odd) {
background-color: #0094ff;
}
table tr: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(function onSuccess(response) {
$scope.Employee = response.data;
}, function onError(response) {
alert("Error Occurred!");
});
});
</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 the EmployeeData.txt file. We get the data into JSON format, so we used the “ng-repeat” and viewed the data in table format.
Setting HTTP Header
The $http service automatically sets values 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 the 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': 'application/json',
'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("Unsuccessful call!");
});
});
</script>
</body>
</html>
Index.html
This is a $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.