Objectives and outcomes

In this tutorial we are going to learn about $http in angular-js. $http is a service which makes a call to server an get response from it. It is expected that the data which is transfered should be in json format.

Javascript for shortcut get method

<script>
var app = angular.module('getapp', []);
app.controller('get_control', function($scope, $http)
{
$http.get("../angularjs/get_method.html")
.then(function(response) {
$scope.get_method = response.data;
});		
});
</script>


Javascript for get method(long-format) with response object properties

<script>
var app = angular.module('getapp', []);
app.controller('get_control', function($scope, $http) 
{
$http({
method : "GET",
url : "../angularjs/status.html"
}).then(function succes(response) 
{	
$scope.status_content = response.data;
$scope.statuscode = response.status;
$scope.statustext = response.statusText;
}, function error(response) 
{	
$scope.status_content = response.statusText;
$scope.statuscode = response.status;
});

});
</script>


Javascript for wrong response

<script>
var app = angular.module('getapp', []);
app.controller('get_control', function($scope, $http) 
{
$http.get("../angularjs/xyz.html")
.then(function(response)
{
$scope.wrong_content = "file found";
}, function (response)
{
$scope.wrong_statustext = response.statusText;
$scope.wrong_status = response.status;
});
});
</script>


HTML code

<html>
<head>
<meta charset="utf-8">
<title>AngularJS HTTP</title>
<script src="angular-1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="getapp" ng-controller="get_control">
    
<div>
<p>{{get_method}}</p>
</div><br/>
   
<div>
<p>{{status_content}}<br/><b>Status code:</b> {{statuscode}}<br/><b>Status text:</b> {{statustext}}</p><br/>
</div>
    
<div>
<p><b>Status text:</b> {{wrong_statustext}}<br/><b>Status code:</b> {{wrong_status}}</p>
</div><br/>
   
</div>
</body>
</html>


get_method.html

.get method is also a shortcut method for $http service. (.post, .put, .delete) are some other example of shortcut methods. The response data is stored in $scope.get_method variable using response.data. The .then function handles the case of successful parsing, if more functions are bind to .then then they handles the case of errors in parsing which we will show in the example below.


status.html

The response from the server is of object type which has some properties like (.config, .status, .statusText, .data). We access the response by storing the response in application variable. Another thing which is the method defined after .then method is to handle error.


{{get_method}}


Note: The above paragraph is fetch using $http service



{{status_content}}
Status code: {{statuscode}}
Status text: {{statustext}}


Note: The above paragraph is also fetched from anther file using $http service. Here we have also displayed value of statuscode and statustext using application variable.


Status text: {{wrong_statustext}}
Status code: {{wrong_status}}


The above part show the output when wrong response is fetched.



The javacript shown above is the part of single function get_control. We have seperated it for simplicity.