Consuming a Rest Web Service Example - AngularJS Client



This example explains how to implement a rest client using AngularJS. Before running this application, please make sure a Rest Web Service is running in your machine and it should be available at

http://localhost:8080/apache_cxf_rest_ws/services/system/v1/address
Please refer Rest Web Services - Apache CXF for a rest Web Service example.

Following html document can run its own or you can place it inside a server.

Create AngularJS Rest Client




<!DOCTYPE html>
<html lang="en">
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<body>
<div ng-app="myApp" ng-controller="formCtrl">
	<form name="myForm">
		<button ng-click="submit()">Get Address</button>
	</form>
	<table>
		<th>Street</th>
		<th>Address2</th>
		<th>City</th>
		<th>State</th>
		<th>Country</th>
		<th>Zip</th>
		<tr>
		<td>{{ address.streetAddress }}</td>
		<td>{{ address.addressOptional }}</td>
		<td>{{ address.city }}</td>
		<td>{{ address.state }}</td>
		<td>{{ address.country }}</td>
		<td>{{ address.zip }}</td>
		</tr>

	</table>

</div>

<script>
	var app = angular.module('myApp', []);
	app.controller('formCtrl',function($scope, $http) {
	$scope.reset = function() {
	$scope.user = angular.copy($scope.master);
	};
	$scope.submit = function() {
	  console.log($scope.user);
	  $http({
	   method : 'GET',url : 'http://localhost:8080/apache_cxf_rest_ws/services/system/v1/address',
	   headers : {
		'Accept' : 'application/json'
	   }
	 })
	.success(
	   function(data, status, headers,config) {
		$scope.address = data;
	}).error(
	function(data, status, headers,config) {});
	};

	});
</script>

</body>
</html>