This example demonstrates the code that is used to consume RESTful APIs using AngularJS $resource service with GET methods (get, query). It also demonstrates the capability of AngularJS dependency injection which is used to inject $resource service to the controller as it is initiated.

As per AngularJS webpage on $resource, the $resource service is A factory which creates a resource object that lets you interact with RESTful server-side data sources.

Following data is retrieved from server whose REST URL looks like following:
http://hello-angularjs.appspot.com/user/{id}
Check for yourself by typing any number in place of id and accessing above URL in your browser. What you get is JSON response string.

Data Retrieved using GET Action Method on ngResource Object

Id Name Address Age
{{profile.id}} {{profile.firstname + " " + profile.lastname}} {{profile.address}} {{profile.age}}

Notes

Following is the JSON data which is retrived from the server using ngResource GET Method. Check out the server side code (Spring MVC) later on the page below.
{{profile|json}}

Data Retrieved using Query Action Method on ngResource Object

Name Address City Phone
{{profile.firstname + " " + profile.lastname}} {{profile.address}} {{profile.city}} {{profile.phone}}

Notes

Following is the JSON data which is retrived from the server using ngResource Query Method. Check out the server side code (Spring MVC) later on the page below.
{{profiles|json}}
$http Service & Related Code
			
var helloApp = angular.module("helloApp", [ 'ngResource' ]);
helloApp.controller("HttpController", [ '$scope', '$resource',
		function($scope, $resource) {
			//
			// GET Action Method
			//
			var User = $resource('/user/:userId', {userId:'@userId'});
			User.get( {userId:25}, function(user){
				$scope.profile = user;
			})
			//
			// Query Action Method
			//
			var UserProfiles = $resource('/getAllProfiles');
			UserProfiles.query(function(profiles){
				$scope.profiles = profiles;					
			});
		} ]);
			
			
Java Controller Code

Pay attention to getUserProfileById method which is called as a result of REST API call. Also, notice the usage of @PathVariable to retrieve the userId value.

			
@RequestMapping(value = "/angularjs-restful-apis-get-method-code-example", method = RequestMethod.GET)
	public ModelAndView restAPIDemoGetExample( ModelMap model ) {
		return new ModelAndView("rest_get");
	}
	
@RequestMapping(value = "/user/{id}", method = RequestMethod.GET)	
	public  @ResponseBody String getUserProfileById( @PathVariable("id") long userId )   {		
		//
		// Code processing the input parameters
		//	
		String response = "{\"id\":\""+ userId + "\",\"firstname\":\"Aiyana\",\"lastname\":\"Shukla\",\"address\":\"Hyderabad, India\",\"age\":\"8\",\"email\":\"aiyana123@gmail.com\"}";
		return response;
	}
	
@RequestMapping(value = "/getAllProfiles", method = RequestMethod.GET)
	public  @ResponseBody String getAllProfiles( ModelMap model ) {
		String jsonData = "[{\"firstname\":\"ajitesh\",\"lastname\":\"kumar\",\"address\":\"211/20-B,mgstreet\",\"city\":\"hyderabad\",\"phone\":\"999-888-6666\"},{\"firstname\":\"nidhi\",\"lastname\":\"rai\",\"address\":\"201,mgstreet\",\"city\":\"hyderabad\",\"phone\":\"999-876-5432\"}]";
		return jsonData;
	}
			
			
comments powered by Disqus