AngularJS Spring MVC Example

In this angularjs spring mvc crud example, we will learn to use AngularJS $http service to invoke RESTful APIs (HTTP GET, PUT, POST, DELETE) operations. Additionally, we will use the responses from RESTFul APIs to refresh the screen data used in this example.

Table of Contents

1. Overview of example
2. $http usage - for impatient
3. RESTFul APIs used in example
4. Client source code
5. How example works?

1. Overview of example

In this angularjs spring mvc sample application, we will build a screen for employee management. You will be able to get/add/edit/delete employees from this screen using various links and buttons. The screen looks like this:

angular http service example
angular http service example

The screen options are quite simple. You can add an employee using the form below. All employees get listed in upper table. You can remove an employee by clicking on “Remove” link in that row. Similarily, clicking on edit link will populate employee details in form below and you can save the changes by pressing submit button.

2. AngularJS $http usage – for impatient

Though I will be going into detail later in this tutorial, if you are in hurry the read this section to understand the $http calls to REST APIs.

  • HTTP GET operation

    Angular $http can be used to invoke HTTP GET api in below manner. In this example, this code is used to get all employees from server.

    $http({
    	method : 'GET',
    	url : 'employees'
    }).then(function successCallback(response) {
    	$scope.employees = response.data.employees;
    }, function errorCallback(response) {
    	console.log(response.statusText);
    });
    

    Above GET call is using relative URL /employees. This will invoke HTTP GET http://localhost:8080/myapplication/employees URL if current location is HTTP GET http://localhost:8080/myapplication. You can use the full application URL as well e.g. “http://localhost:8080/myapplication/employees”. Both URL patterns will work.

    By default, angular uses asynchronous HTTP calls. SO I have used two functions successCallback() and errorCallback(), which will be invoked by angular after a response is returned from server.

  • HTTP POST operation

    Angular $http can be used to invoke HTTP POST api in below manner. In this example, this code is used to add an employee into the system.

    $http({
    	method : "POST",
    	url : "employees",
    	data : angular.toJson($scope.form),
    	headers : {
    		'Content-Type' : 'application/json'
    	}
    }).then( _success, _error );
    

    In above method call, I have passed the request payload in JSON format using angular.toJson() method, and then I have set up the content-type header parameter to application/json.

  • HTTP PUT operation

    Angular $http can be used to invoke HTTP PUT api in below manner. In this example, this code is used to update an employee into the system.

    $http({
    	method : "PUT",
    	url : "employees/" + $scope.form.id,
    	data : angular.toJson($scope.form),
    	headers : {
    		'Content-Type' : 'application/json'
    	}
    }).then( _success, _error );
    
  • HTTP DELETE operation

    Angular $http can be used to invoke HTTP DETELE api in below manner. In this example, this code is used to delete an employee into the system.

    $http({
    	method : "DELETE",
    	url : "employees/" + employee.id
    }).then( _success, _error );
    

3. Spring REST APIs used in example

Now let’s go through RESTful APIs used in this example. These have been created using the sourcecode from Spring REST JSON Example.

package com.howtodoinjava.demo.controller;

import org.springframework.http.HttpStatus;
import org.springframework.http.MediaType;
import org.springframework.http.ResponseEntity;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;

import com.howtodoinjava.demo.model.EmployeeListVO;
import com.howtodoinjava.demo.model.EmployeeVO;

@Controller
public class EmployeeRESTController 
{
	//Local storage of employees for demo; You will use database here 
	private static EmployeeListVO employees = new EmployeeListVO();
	
	//add some employees here
	public EmployeeRESTController()
	{
		EmployeeVO empOne = new EmployeeVO(1,"Lokesh","Gupta","howtodoinjava@gmail.com");
		EmployeeVO empTwo = new EmployeeVO(2,"Amit","Singhal","asinghal@yahoo.com");
		EmployeeVO empThree = new EmployeeVO(3,"Kirti","Mishra","kmishra@gmail.com");
		
		employees.getEmployees().add(empOne);
		employees.getEmployees().add(empTwo);
		employees.getEmployees().add(empThree);
	}
	
	//Utility methods for getting employee by id
	private EmployeeVO _getEmployeeById(int id){
		for(EmployeeVO e : employees.getEmployees()){
			if(e.getId() == id){
				return e;
			}
		}
		return null;
	}
	
	/**
	 * HTTP GET - Get all employees
	 * */
	@RequestMapping(value = "/employees", produces = MediaType.APPLICATION_JSON_VALUE,  method = RequestMethod.GET)
	public ResponseEntity<EmployeeListVO> getAllEmployeesJSON() 
	{
		return new ResponseEntity<EmployeeListVO>(employees, HttpStatus.OK);
	}
	

	/**
	 * HTTP POST - Create new Employee
	 * */
	@RequestMapping(value = "/employees", consumes = MediaType.APPLICATION_JSON_VALUE, method = RequestMethod.POST)
	public ResponseEntity<String> createEmployee(@RequestBody EmployeeVO employee) 
	{
		employee.setId(employees.getEmployees().size() + 1);
		employees.getEmployees().add(employee);
		return new ResponseEntity<String>(HttpStatus.CREATED);
	}
	
	/**
	 * HTTP PUT - Update employee
	 * */
	@RequestMapping(value = "/employees/{id}", consumes = MediaType.APPLICATION_JSON_VALUE, method = RequestMethod.PUT)
	public ResponseEntity<EmployeeVO> updateEmployee(@PathVariable("id") int id, @RequestBody EmployeeVO employee) 
	{
		EmployeeVO emp = _getEmployeeById(id);
		if(emp != null){
			emp.setFirstName(employee.getFirstName());
			emp.setLastName(employee.getLastName());
			emp.setEmail(employee.getEmail());
			return new ResponseEntity<EmployeeVO>(emp, HttpStatus.OK);
		}
		return new ResponseEntity<EmployeeVO>(HttpStatus.NOT_FOUND);
	}
	
	/**
	 * HTTP DELETE - Delete employee
	 * */
	@RequestMapping(value = "/employees/{id}", method = RequestMethod.DELETE)
	public ResponseEntity<String> deleteEmployee(@PathVariable("id") int id) 
	{
		EmployeeVO employee = _getEmployeeById(id);
		if(employee != null){
			employees.getEmployees().remove(employee);
			return new ResponseEntity<String>(HttpStatus.OK);
		}
		return new ResponseEntity<String>(HttpStatus.NOT_FOUND);
	}
}

4. Spring MVC view code with angularjs

Now let’s see the fully working version of client code (HTML + AngularJS) which makes this example run.

<!doctype html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>
		    AngularJS - REST Demo using $http service
		</title>
		<!-- Load AngularJS -->
		<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
		<script type="text/javascript">
			var app = angular.module("UserManagement", []);
		
			//Controller Part
			app.controller("UserManagementController", function($scope, $http) {
		
				//Initialize page with default data which is blank in this example
				$scope.employees = [];
				$scope.form = {
					id : -1,
					firstName : "",
					lastName : "",
					email : ""
				};
		
				//Now load the data from server
				_refreshPageData();
		
				//HTTP POST/PUT methods for add/edit employee
				$scope.submitEmployee = function() {
		
					var method = "";
					var url = "";
					if ($scope.form.id == -1) {
						//Id is absent so add employee - POST operation
						method = "POST";
						url = 'employees';
					} else {
						//If Id is present, it's edit operation - PUT operation
						method = "PUT";
						url = 'employees/' + $scope.form.id;
					}
		
					$http({
						method : method,
						url : url,
						data : angular.toJson($scope.form),
						headers : {
							'Content-Type' : 'application/json'
						}
					}).then( _success, _error );
				};
		
				//HTTP DELETE- delete employee by Id
				$scope.removeEmployee = function(employee) {
					$http({
						method : 'DELETE',
						url : 'employees/' + employee.id
					}).then(_success, _error);
				};

				//In case of edit employee, populate form with employee data
				$scope.editEmployee = function(employee) {
					$scope.form.firstName = employee.firstName;
					$scope.form.lastName = employee.lastName;
					$scope.form.email = employee.email;
					$scope.form.id = employee.id;
				};
		
				/* Private Methods */
				//HTTP GET- get all employees collection
				function _refreshPageData() {
					$http({
						method : 'GET',
						url : 'employees'
					}).then(function successCallback(response) {
						$scope.employees = response.data.employees;
					}, function errorCallback(response) {
						console.log(response.statusText);
					});
				}
		
				function _success(response) {
					_refreshPageData();
					_clearForm()
				}
		
				function _error(response) {
					console.log(response.statusText);
				}
		
				//Clear the form
				function _clearForm() {
					$scope.form.firstName = "";
					$scope.form.lastName = "";
					$scope.form.email = "";
					$scope.form.id = -1;
				};
			});
		</script>
		<style>
			.button {
			    cursor: pointer;
			    color: blue;
			}
			td,th{
				border: 1px solid gray;
				width: 25%;
				text-align: left;
			}
			table {
				width: 600px;
			}
		</style>
	<head>
	<body ng-app="UserManagement" ng-controller="UserManagementController">
		 <h1>
	        AngularJS - Use $http to invoke RESTful APIs
	    </h1>

	    <table>
	    	<tr>
	    		<th>First Name</th>
	    		<th>Last Name</th>
	    		<th>Email</th>
	    		<th>Actions</th>
	    	</tr>

	    	<tr ng-repeat="employee in employees">
	    		<td>{{ employee.firstName }}</td>
	    		<td>{{ employee.lastName }}</td>
	    		<td>{{ employee.email }}</td>
	    		<td><a ng-click="editEmployee( employee )" class="button">Edit</a> | <a ng-click="removeEmployee( employee )" class="button">Remove</a></td>
	    	</tr>

	    </table>

	    <h2>Add/Edit Employee</h2>

		<form ng-submit="submitEmployee()">
		    <table>
		    	<tr>
		    		<td>First Name</td>
		    		<td><input type="text" ng-model="form.firstName" size="60" /></td>
		    	</tr>
				<tr>
		    		<td>Last Name</td>
		    		<td><input type="text" ng-model="form.lastName" size="60" /></td>
		    	</tr>
		    	<tr>
		    		<td>Email</td>
		    		<td><input type="text" ng-model="form.email" size="60" /></td>
		    	</tr>
		    	<tr>
		    		<td colspan="2"><input type="submit" value="Submit" /></td>
		    	</tr>
		    </table>
		</form>

	</body>
</html>

5. How spring mvc angularjs example works?

Though I have added sourcecode comments for making code easily understandable, let’s walk through some major points.

  1. See the line app.controller("UserManagementController", function($scope, $http). It create the angular controller component and passes dependency of $http service and $scope variable. $http is used to make REST calls, and $scope is used to interact with page data.
  2. $scope has two data elements. $scope.employees which refer to all employees collection in page and $scope.form which is mapped to form element fields in webpage.
  3. When the page is loaded, _refreshPageData() is called which invoke the HTTP GET api for fetching all employees data from server in JSON format. Once data is retrieved, it is mapped to $scope.employees using $scope.employees = response.data.employees. This call automatically refreshes the UI and table is populated with employee data.
  4. The remove link in page is bind to removeEmployee() function using ng-click="removeEmployee( employee )". This call has addtional parameter employee which is used to identify which employee needs to be deleted from table ( employee.id is used to get employee id).
  5. Similarily, edit link is bind with ng-click="editEmployee( employee )". Inside editEmployee() function, we simply populate the form text fields with existing employee data by below mapping.
    $scope.editEmployee = function(employee) {
    	$scope.form.firstName = employee.firstName;
    	$scope.form.lastName = employee.lastName;
    	$scope.form.email = employee.email;
    	$scope.form.id = employee.id;
    };

    After the page is updated with modified employee data, we clear the form by assigning blank values to form fields.

    function _clearForm() {
    	$scope.form.firstName = "";
    	$scope.form.lastName = "";
    	$scope.form.email = "";
    	$scope.form.id = -1;
    };
  6. For PUT and POST methods, we have used same function due to similar code to avoid code duplication. We only change method and url parameters based on the user action.
  7. To display the users collection fetched from server, we have used ng-repeat="employee in employees" loop.

Rest of things are pretty much self explanatory. If you have any doubt or any query, drop me a comment below.

Happy Learning !!

Was this post helpful?

Join 7000+ Awesome Developers

Get the latest updates from industry, awesome resources, blog updates and much more.

* We do not spam !!

23 thoughts on “AngularJS Spring MVC Example”

  1. It would be great if you could post your source code link or github link, as it will be much easier to directly look at your code if any mistake occurs.
    Thanks for posting this great tutorial.

    Reply
  2. Hello
    I have run the tutorial but it does not display data i guess it does not recognized the controller .
    can you please help ?
    Thanks

    Reply
    • import java.io.Serializable;
      import java.util.ArrayList;
      import java.util.List;
      
      import javax.xml.bind.annotation.XmlRootElement;
      
      @XmlRootElement (name=&quot;employees&quot;)
      public class EmployeeListVO implements Serializable
      {
      	private static final long serialVersionUID = 1L;
      	
      	private List&lt;EmployeeVO&gt; employees = new ArrayList&lt;EmployeeVO&gt;();
      
      	public List&lt;EmployeeVO&gt; getEmployees() {
      		return employees;
      	}
      
      	public void setEmployees(List&lt;EmployeeVO&gt; employees) {
      		this.employees = employees;
      	}
      
      	@Override
      	public String toString() {
      		return &quot;EmployeeListVO [employees=&quot; + employees + &quot;]&quot;;
      	}
      }
      
      Reply
  3. Hi,

    I am new to angularJs but an oldie in java so i was able to setup the server side.
    I created spring boot server and copied your restController.
    The get url for my server configured is http://localhost:8080/employees

    The clientSide code is also perfect and there are no errors. but i am not able to see the employees getting loaded from server.
    _refreshPageData method doesnt seem to work. i get an error in console:

    localhost:8080/employees Failed to load resource: the server responded with a status of 403 ()

    ang.html:1 XMLHttpRequest cannot load http://localhost:8080/employees. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘null’ is therefore not allowed access. The response had HTTP status code 403.

    and page is displayed as following:
    AngularJS – Use $http to invoke RESTful APIs

    First Name Last Name Email Actions
    Add/Edit Employee

    First Name

    Reply
  4. Above sample code isn’t working and giving following error while accessing the link :

    The resource identified by this request is only capable of generating responses with characteristics not acceptable according to the request “accept” headers.

    All the getter setters are there in the classes but still I am getting this error. Also, no java layer invocation for GET method is happening.

    Your help is highly appreciated.

    Reply
  5. Great article… It helped me to understand the way single controller can handle model for all CRUD operations. Thanks…!

    Reply

Leave a Comment

HowToDoInJava

A blog about Java and related technologies, the best practices, algorithms, and interview questions.