AngularJS – Post Data with ngResource, RESTful APIs and Spring MVC

2


 

The article presents concepts and some take-away code samples for developers wanting to POST data to RESTFul APIs using ngResource ($resource) service with SpringMVC on server side. The demo for this example could be found on this page, http://hello-angularjs.appspot.com/angularjs-restful-apis-post-method-code-example.

 

The primary reason why I loved this approach rather than using $http service is the fact that using ngResource allows you to have abstraction such as a $resource class & its instance on which you have action methods to interact with RESTful APIs. It makes it quite easier to work with RESTful integration. On $resource class object, one could directly call action methods such as get, save. However, on instances, one could call methods prefixed with “$”. This is demonstrated in the example below.

 

Following are two different use-case scenarios that has been explained in this article:

  • Save/Persist new data objects
  • Update existing data objects

The code snippets shall cover both AngularJS code and Spring MVC take away codes for your ease of getting started as quickly as possible.

For one to work with $resource service, following needs to be done prior to hitting actual code:

Include angular-resource.js file. You could use Google Hosted Libraries for this purpose. Following code works for the most recent version of angularJS.

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.19/angular-resource.js"></script>

Include ngResource module and, inject $resource service while creating controller object as shown in the code below:

var helloApp = angular.module("helloApp", [ 'ngResource' ]);
helloApp.controller("HttpController", [ '$scope', '$resource', 	function($scope, $resource) {
	//
	// The actual code goes here...	
	//									
} ]);

 

Save/Persist New Object

Following code demonstrates the end user adding the data through various forms fields, which then sends the data to the server at REST URL “/user/new” using POST method. Also look at the corresponding Spring MVC method.

AngularJS 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(){							
			// 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;
			});

		}

	} ]);

Spring MVC code

Pay attention to the fact that a User object needs to be created matching the JSON data. Also, make sure that Jackson library is included in the path for the following code to work. This is one of the MOST IMPORTANT STEP. I recommend to read this article on how to fix 415 Unsupported Mediatype error which one may hit if one forgets to implement this step. This is one error that may haunt most of the newbies.

// 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;
}

 

Update Existing Data Objects

Following code demonstrates the end user updating the data through various forms fields, which then sends the data to the server at REST URL “/user/{id}” using POST method. Also look at the corresponding Spring MVC method.

AngularJS 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.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='';
			}		

		} ]);

Spring MVC code

Pay attention to some of the following facts:

– Usage of PathVariable
– A User object is created matching the JSON data.
– Make sure that Jackson library is included in the path for the following code to work.

// 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;
}

[adsenseyu1]

Ajitesh Kumar

Ajitesh Kumar

Ajitesh has been recently working in the area of AI and machine learning. Currently, his research area includes Safe & Quality AI. In addition, he is also passionate about various different technologies including programming languages such as Java/JEE, Javascript and technologies such as Blockchain, mobile computing, cloud-native technologies, application security, cloud computing platforms, big data etc.

He has also authored the book, Building Web Apps with Spring 5 and Angular.
Ajitesh Kumar

2 Comments

  1. Hi Ajitesh … i’m developing login module using Angularjs with MySql database and using spring MVC….already developed Ui and java backend coding … but i get stuck in calling Rest Service via Angularjs controller using json object ??how can i proceed??

Leave A Reply

Time limit is exhausted. Please reload the CAPTCHA.