How to Call Restful Webservice in AngularJS

Call Restful Webservice in AngularJS

In this example, we will show you simple program about, How to call restful webservice in AngularJS. This example were tested and shared in the post.

Note: In this example, We are calling the third party webservice using AngularJS, Which is about get all country list. To know more about this webservice you can go to below link: http://services.groupkt.com/country/get/all

The above link will produce response as country list in JSON format, Which we are processing using AngularJS and detailed example has been attached in the same post.

Script Code

var app = angular.module('myApp', []);

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

	// service provider url
	var url = "http://services.groupkt.com/country/get/all";
	
	// calling the service
	$http.get(url).then(function(response) {
		
		$scope.countries = response.data.RestResponse.result;
		
	});
});

Complete Example

<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>How to Call RestFul Webservice in AngularJS</title>

<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script type="text/javascript"
	src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.min.js"></script>

<style>
.countryTable th, td {
	padding: 10px;
	text-align: left;
}
</style>

</head>
<body>

	<div ng-app="myApp" ng-controller="getAllCountry">

		<h1>Calling Restful Webservice in AngularJS</h1>

		<table cellspacing="5" cellpadding="5" border="1" class="countryTable">

			<tr>
				<th>Country Name</th>
				<th>Country Code(2)</th>
				<th>Country Code(3)</th>
			</tr>

			<tr ng-repeat="country in countries">
				<td>{{country.name}}</td>
				<td>{{country.alpha2_code}}</td>
				<td>{{country.alpha3_code}}</td>
			</tr>

		</table>

	</div>

	<script type="text/javascript">
	
		var app = angular.module('myApp', []);
		
		app.controller('getAllCountry', function($scope, $http) {
	
			// service provider url
			var url = "http://services.groupkt.com/country/get/all";
			
			// calling the service
			$http.get(url).then(function(response) {
				
				$scope.countries = response.data.RestResponse.result;
				
			});
		});
	
	</script>

</body>
</html>

Output

How to Call Restful Webservice in AngularJS