Angularjs Http Get Method
Angularjs Http Get Method : AngularJs Http Get is used to perform get request. The $http is basically core angular service that provides communication with remote HTTP services via the XMLhttpRequest object or via JSONP. You can use this method to communicate with sever using the get method. We are going to cover this method with example and demo.
Angularjs Http Get Method Syntax
Here is syntax of Http get method –
$http.get('Url').then(Callback);
Url : Thet Url from where you want to load data.
Callback : Callback function after success. Returns object.
Angularjs Http Get Method Sample Data
Sample data for http get method is given below which is used in get method example.
{"users":[{"id":"1","name":"John","email":"johnk@yopemail.com","phone":"121323232"},{"id":"2","name":"Kelly","email":"kellyk@yopemail.com","phone":"121212122"},{"id":"3","name":"Ryan","email":"ryank@yopemail.com","phone":"22222212"},{"id":"4","name":"Kojo","email":"kojao@yopemail.com","phone":"12144444"},{"id":"5","name":"Kinjal","email":"kinjal@yopemail.com","phone":"22555212"},{"id":"6","name":"Tani","email":"tanya@yopemail.com","phone":"121334444"},{"id":"7","name":"Brak","email":"barak@yopemail.com","phone":"2444444512"},{"id":"8","name":"Uman","email":"uman@yopemail.com","phone":"12334444"}]}
Below is example of Http Get method which reads data in JSON format from the url : http://runtest.tutorialsplane.com/json/getUsers.php. You can use your server path which will return data in JSON format. Run the below example to see output.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.3/angular.min.js"></script>
</head>
<body>
<div ng-app="userApp" ng-controller ="userController">
<table id="searchResults">
<tr><th>Id</th><th>Name</th></tr>
<tr ng-repeat="data in usersData">
<td>{{data.id}}</td>
<td>{{data.name}}</td>
</tr>
</table>
</div>
<script>
var app = angular.module('userApp', []);
app.controller('userController', function($scope, $http) {
$http.get("http://runtest.tutorialsplane.com/json/getUsers.php")
.success(function(response) {$scope.usersData = response.users;});
});
</script>
</body>
</html>
|
If you run the above example it will produce output like this-
Angularjs Http Get Method
Try Video Demo – All In One Video for this method –
AngularJs Http Get Method Video Demo –
Advertisements
