This example demonstrates the code that is used to post to RESTful APIs using AngularJS $resource service with POST methods (save). 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.

Add a User

First Name Last Name Address Email
{{user.firstname}} {{user.lastname}} {{user.address}} {{user.email}}

Notes

  • The page demonstrates the Angular and Spring MVC code for saving and editing a data object.
$ngResource Service & Related Code
			
var helloApp = angular.module("helloApp", [ 'ngResource' ]);
	helloApp.controller("HttpController", [ '$scope', '$resource',
			function($scope, $resource) {
				$scope.users = [
		                    { 'firstname':'Ajitesh',
		                    	'lastname':'Shukla',
		                    	'address':'Hyderbad',
		                    	'email':'ajitesh101@gmail.com'},
		                    	{ 'firstname':'Sumit',
			                    	'lastname':'Jha',
			                    	'address':'Muzaffarpur',
			                    	'email':'sumitjha2011@yahoo.com'},			                    				                    	
		                    ];
				
				$scope.saveUser = function(){
					$scope.users.push({ 'firstname':$scope.firstname, 'lastname': $scope.lastname, 'address':$scope.address, 'email':$scope.email });		
					// Create a resource class object
					//
					var User = $resource('/user/new');
					// Call action method (save) on the class 
					//
					User.save({firstname:$scope.firstname,lastname:$scope.lastname,address:$scope.address,email:$scope.email}, function(response){
						$scope.message = response.message;
					});
					
					$scope.firstname='';
					$scope.lastname='';
					$scope.address='';
					$scope.email='';
				}
				
				$scope.updateUser = function(){							
					// Create a resource class object
					//
					var User = $resource('/user/:userId', {userId:'@id'});
					// Create an instance of User resource
					var user = User.get({userId:25});
					// Update the new values entered in the form fields
					//
					user.id = 25;
					user.firstname = $scope.firstname;
					user.lastname = $scope.lastname;
					user.address = $scope.address;
					user.email = $scope.email;
					// Call '$' prefixed action menthod to post ("save" )
					//
					user.$save(function(response){
						$scope.message = response.message;
					});
					// Push the new objects in the $scope.users 					
					//
					$scope.users.push({ 'firstname':$scope.firstname, 'lastname': $scope.lastname, 'address':$scope.address, 'email':$scope.email });
					$scope.firstname='';
					$scope.lastname='';
					$scope.address='';
					$scope.email='';
				}				
			} ]);
			
			
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.

			
// Create a new user
//
@RequestMapping(value = "/user/new", method = RequestMethod.POST)	
		public  @ResponseBody String saveUserRestful( @RequestBody User user )   {		
			//
			// Code processing the input parameters
			//	
		 	String response = "{\"message\":\"Post With ngResource: The user firstname: " + user.getFirstname() + ", lastname: " + user.getLastname() + ", address: " + user.getAddress() + ", email: " + user.getEmail()+"\"}";
			return response;
		}
// Get the existing user	
@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;
	}
// Update the user
//	
@RequestMapping(value = "/user/{id}", method = RequestMethod.POST)	
	public  @ResponseBody String updateUserProfile( @PathVariable("id") long userId,  @RequestBody User user  )   {		
		//
		// Code processing the input parameters
		//	
		String response = "{\"message\":\"Post With ngResource - id: " + String.valueOf( userId ) + ",firstname: " + user.getFirstname() + ", lastname: " + user.getLastname() + ", address: " + user.getAddress() + ", email: " + user.getEmail() +"\"}";
		return response;
	}
			
			
comments powered by Disqus