AngularJS $http.get method example

Write code here

J | B | A

<!DOCTYPE html>
<html>
	<head>
		<title>Demo</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

</head>
<body>
<hr />
<h3 style="color:red;">This code snippet may not work as exprected because we do not have controller named "ServerRequest" on this server.</h3>
Read the code snippet of server side in this post (last code snippet), and put that on your server and change the url in script blocok to see how this works. Note that the property of the returned object must be "FirstName", "LastName", and "Age".
<hr />
<script>
    var app = angular.module("app", []);
    app.controller("HttpGetController", function ($scope, $http) {
        
        $scope.keyword = '';

$scope.GetAllData = function () {
            $http.get('/ServerRequest/GetData')
            .success(function (data, status, headers, config) {
                $scope.Details = data;
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    "<br />status: " + status +
                    "<br />headers: " + jsonFilter(header) +
                    "<br />config: " + jsonFilter(config);
            });
        };

$scope.SearchData = function () {

var parameters = {
                keyword: $scope.keyword
            };
            var config = {
                params: parameters
            };

$http.get('/ServerRequest/GetData', config)
            .success(function (data, status, headers, config) {
                $scope.Details = data;
            })
            .error(function (data, status, header, config) {
                $scope.ResponseDetails = "Data: " + data +
                    "<hr />status: " + status +
                    "<hr />headers: " + header +
                    "<hr />config: " + config;
            });
        };

});
</script>
<div ng-app="app" ng-controller="HttpGetController">
    <button ng-click="GetAllData()">Get All Data</button> | 
    <input type="text" name="keyword" ng-model="keyword" required />
    <button ng-click="SearchData()">Search</button> 
    <hr />
    <ul>
        <li ng-repeat="d in Details">
            {{ d.FirstName + ' ' + d.LastName + ', ' + d.Age}}
        </li>
    </ul>
    <p ng-bind="ResponseDetails"></p>
    {{ResponseDetails}}
</div>
</body>
</html>

Note: We DO NOT save your trial code in our database.

AngularJS > $Http.Get Method Example

Write code here

Output