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 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 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>
Index.html:
This is $Ajax Example.
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: