How to implement AngularJS Ajax using HTTP Service?

How to implement Angularjs Ajax using HTTP Service?

Depending upon the demand of Ajax many languages provides the facility to operate Ajax in their platform. AngularJS is a high level programming language to optimize HTML & Javascripts. AngularJS supports Ajax calls using its $http Service. In $http service using get & post methods we do Ajax operations. Get is responsible to fetch data from the server while post posting the data to the server.

Angular HTTP get method

AngularJS $http.get() method accepts 2 parameters url & configuration settings. From which server page we are going to get data that page path is the value to url param. The second param config passed to the different $http functions controls the HTTP request sent to the server. Config parameter is a pure JavaScript object. It has several properties like method, url, params, headers, timeout, cache, transformRequest & transformResponse.

<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.5/angular.min.js"></script>
</head>
<body ng-app="myapp">
<div ng-controller="MyController">
<button ng-click="myData.doClick(item, $event)">
Do an Ajax Call</button>
<br />
Response from Server : {{myData.fromServer}}
</div>
<script>
angular.module("myapp", [])
.controller("MyController", function($scope, $http) {
$scope.myData = {};
$scope.myData.doClick = function(item, event) {
var response = $http.get("/AngularJSDemo/json-data.jsp");
response.success(function(data, status, headers, config) {
$scope.myData.fromServer = data.title;
});
}
} );
</script>
</body>
</html>

Angularjs HTTP post method

AngularJS $http.post() method accepts 3 parameters url, data & configuration settings. To which server page we want to send our data that page path is the value to url param. Data is the value(s) those we want to pass using post method. For an example it can be the first name & last name.

function sendDataUsingPostMethod($scope) {
$http({
url: 'demo-app.php',
method: "POST",
data: { 'empName' : Biswabhusan }
})
.then(function(response) {
// On Success
},
function(response) {
// On Failed
}
);

Source of Image: https://prerender.io