Example to Call Webservice inside AngularJS Controller

Example to Call Webservice inside AngularJS Controller

Webservice is nothing but the technique using which we can sale functionalities over web. Let’s talk about an Income Tax calculator. It is useful for many employees, organizations and banks. If we are developing the calculator repeatedly form different different organizations, it is nothing but the loss of productivity. How it is if we can use same service from a global space. This is what web service do. Webservice returns data in form of XML or JSON. In the below example look how to call Webservice inside AngularJS Controller.

booksController is the name of my Controller. Inside this I am executing $http.get() method. On Success which returns a response. To access response data from view I am assigning those data to $scope.data object. Inside html body using ng-repeat I am displaying authors name from Webservice.

Example-to-Call-Webservice.htm

<html ng-app="booksInvApp">
<head>
<title>Example to Call Webservice in AngularJS</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<script type="text/javascript">
var app = angular.module('booksInvApp', []);
app.controller('booksController', function($scope, $http) {
$http.get("https://whispering-woodland-9020.herokuapp.com/getAllBooks")
.then(function(response) {
$scope.data = response.data;
});
});
</script>
</head>
<body>
<div ng-controller="booksController">
<h3 ng-repeat="bookDetails in data.books">{{bookDetails.author}}</h3>    
</div>
</body>
</html>