Home  >  Angular JS

AngularJS $http.get Example

April 14, 2016
On this page we will provide AngularJS $http.get example. $http.get is a shortcut for HTTP GET method. $http is a core angular service to communicate with remote HTTP services. $http.get accepts a HTTP URL and an optional configuration object. On the promise object returned by $http.get, we can call .then callback or .success callback. .success has been deprecated. Here on this page we will provide example for both .then and .success.

$http.get

AngularJS $http.get() is a shortcut to perform HTML form GET method. The syntax is given below.

get(url, [config]);

Where url is a HTTP URL that needs to be accessed and config is a configuration object and it is optional. $http.get returns HTTP promise object on which we can call .then along with .catch and .finally. On promise object we can also call .success along with .error and .finally.

promise in AngularJS

AngularJS promise is a HTTP promise that will run asynchronously. It is a concept in which a HTTP request started to execute asynchronously such as fetching a URL that can either be successful or fail. promise object is provided by AngularJS $q service. On the promise object we can call other AngularJS functions. $http.get returns promise object.

$http.get with .then

Calling .then callback on promise object obtained from $http.get returns new promise object and can be used as sequential operation. It takes a single object for response.

promise.then: On successful promise .then is called. If $http.get fetches a URL successfully then AngularJS .then is executed.
promise.catch: It is called when promise is failed.
promise.finally: This method is called in both scenario whether promise is successful or failed.

Find the sample example.
app.js
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $http){
    $http.get('sample_json.js')
		.then(function (response){
			$scope.jsondata = response.data;
			console.log("status:" + response.status);
		}).catch(function(response) {
		  console.error('Error occurred:', response.status, response.data);
		}).finally(function() {
			 console.log("Task Finished.");
		});
}); 
Find the properties of response object.
data: It contains response body.
status: HTTP status code.
headers: Access headers.
config: Configuration object to generate request.
statusText: HTTP status text.

In .then() we get response object and using this object we get the properties as response.data, response.status etc. Now find sample JSON data used in our example.
sample_json.js
[
	{
	"id" : "1",
	"name" : "Shankar",
	"location" : "Varanasi"
	},
	{
	"id" : "2",
	"name" : "Ram",
	"location" : "Ayodhya"
	},
	{
	"id" : "3",
	"name" : "Krishna",
	"location" : "Mathura"
	}	
]  
http-get.html
<html>
<head>
<script src= "https://ajax.googleapis.com/ajax/libs/angularjs/1.4.9/angular.min.js"></script>
<script src="app.js"></script>	
</head>
<body>
	<div ng-app="myApp" ng-controller="myController"> 
	    <ul> 
		<li ng-repeat="row in jsondata">
		     {{ row.id + ', ' + row.name + ', ' + row.location}} <br>
	        </li>
	    </ul>
	</div>
</body>
</html>   
Find the output.
AngularJS $http.get Example

$http.get with .success

$http.get returns promise object and on this object we call .success which returns same promise object. We need to pass response properties to get their values. .success callback along with .error has been deprecated.

.success: On successful run of $http.get, .success callback is called.
.error: If $http.get is unable to access URL, then .error callback is called.
.finally: In both case it runs whether success or failure.

Find the sample example.
app.js
var myApp = angular.module('myApp', []);
myApp.controller('myController', function($scope, $http){
    $http.get('sample_json.js')
		.success(function (data, status){
			$scope.jsondata = data;
			console.log("status:" + status);
		}).error(function(data, status) {
		    console.error('Error occurred:', data, status);
		}).finally(function() {
			console.log("Task Finished.");
		});
}); 

Reference

AngularJS $http
FIND MORE TUTORILAS


©2019 concretepage.com | Privacy Policy | Contact Us