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>