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>
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>
References: AngularJS API DOC