Site icon ParallelCodes

AngularJS Using $http Service

AngularJS $http Service:

Using $http service in AngularJS we can communicate with Web APIs, post data and get response from remote HTTP servers. $http service as multiple methods which are as below:

$http.post() Http Post request, posts data to the web server.
$http.get() Http Get request, used for performing GET requests.
$http.put() Http Put request, used for making PUT request.
$http.delete() Http Delete request, used for performing DELETE request.
$http.jsonp() Http Jsonp request, used for sending JSON data.
$http.head() Http Head request, used to get Http Headers from the server.
$http.patch() Http Patch request, performs Patch request to the web server.

 

$http.get() Example:

We will perform the Http.GET request using AngularJS $http service to a Web API (remote API is hosted on reqres.in).

Example:

<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #f7f7f7;"></body>

<div ng-controller="myController">

<table class="table table-condensed" style="width: 500px;">
<tr ng-repeat='user in users.data'>
<td>{{user.first_name}}</td>
<td>{{user.last_name}}</td>
<td>{{user.email}}</td>
<td><img ng-src="{{user.avatar}}"/></td>
</tr>
</table>
</div>
</body>

<script>
var app = angular.module("myApp",[]);

app.controller('myController', function($scope,$http){

var funSuccess = function(response)
{
$scope.users = response.data;
console.log(response.data);
};

var funError = function(response)
{
$scope.error = response.data;
};

$http({
method: 'GET',
url:'https://reqres.in/api/users?page=2',
}).then(funSuccess, funError);
});

</script>
</html>

VIEW DEMO

OUTPUT:

$http.post() example:

We will create a sample HTTP post request in AngularJS.

<html>
<head>
<title>AngularJS - Expressions JSON Objects</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body ng-app="myApp" style="padding: 10px;background-color: #f7f7f7;">
<div ng-controller="myController">
<button ng-click="sampleRequest()">Make POST request</button>

<p>Response Data will be Post below:</p>
<p>ID: {{users.id}}</p>
<p>CreatedAt: {{users.createdAt}}</p>
<p>Name: {{users.name}}</p>
<p>Job: {{users.job}}</p>
</div>

<script>
var app = angular.module("myApp",[]);
app.controller('myController', function ($scope, $http) {

var sampleObj = {
"name": "morpheus",
"job": "leader"
};
var funSuccess = function (response) {
$scope.users = response.data;
console.log(response.data);
};
$scope.sampleRequest = function () {
$http({
method: 'POST',
url: 'https://reqres.in/api/users',
data: sampleObj

}).then(funSuccess, funError);

};
var funError = function (response) {
$scope.error = response.data;
};
});
</script>
</body>
</html>

VIEW DEMO

References: AngularJS API DOC

 


Exit mobile version