What is AngularJS $http service
$http service is used for Ajax calls to get data from server or
post data to server.
The
below example will demonstrate you to use $http in AngularJS.
Example:
<script>
var
myApp = angular.module('myApp', []);
myApp.controller('EmpController', function
($scope, $http) {
// the $http
service is called to get the data. you need to pass api url to get the data
$http.get("url/Employeelist")
.then(function(response)
{
$scope.students = response.data;
});
});
</script>
Following are the http service methods
.delete()
.get()
.head()
.jsonp()
.patch()
.post()
.put()
The
methods above are all shortcuts of calling the $http service:
Example
<script>
var myApp =
angular.module('myApp', []);
myApp.controller('EmpController', function
($scope, $http) {
$http({
method: "GET",
url: "url/Employeelist"
}).then(function
mySuccess(res) {
$scope.data = res.data;
}, function
myError(response) {
$scope.error = res.statusText;
});
});
</script>
Response Properties
The
response is an object with these properties:
.config:- this is used to generate the
request.
.data:- this can be a string, or an
object that holding the response from the server.
.headers:- this is a function to use to
get header information.
.status:- It gives the HTTP status
number.
.statusText:- this is a string defining
the HTTP status
<script>
var
myApp = angular.module('myApp', []);
myApp.controller('EmpController', function
($scope, $http) {
$http.get("url/Employeelist")
.then(function
(res) {
$scope.result = res.data;
$scope.statuscode = res.status;
$scope.statusmessage =
res.statusText;
$scope.header = res.headers;
});
});
</script>
You can add one more functions to the .then method to handle
errors.
<script>
var myApp =
angular.module('myApp', []);
myApp.controller('EmpController', function
($scope, $http) {
$http.get("url/Employeelist")
.then(function
(res) {
$scope.result = res.data;
}, function
(res) {
//Second
function handles error
$scope.result = "Something
went wrong";
});
});
</script>
