Spring JPA + MySQL + AngularJS example

In this tutorial, JavaSampleApproach shows you a Spring Boot example that uses Spring JPA to interact with MySQL and AngularJS as a front-end technology to make request and receive response.

Contents

I. Overview
II. Practice
III. Source Code

I. Overview

1. Goal

spring-jpa-mysql-angularjs-goal

We’ll build a Spring Boot Application in that:
– REST Service provides interface for interacting with Customer Database (MySQL) using Spring JPA.
– By using AngularJS to make HTTP request to REST Service and receive response, UI can save Customer Data (id, firstName, lastName), retrieves and displays:
+ All Customers in database.
+ Customer Data by customerId.
+ Customers List by lastName.

2. Technology

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 1.5.4.RELEASE

3. Project Structure

spring-jpa-mysql-angularjs-project-structure

Our Application has 2 main parts: REST Service & UI
– REST Service:
+ Customer Class corresponds to entity and table customer, it should be implemented Serializable.
+ CustomerRepository is an interface extends CrudRepository, will be autowired in CustomerController for implementing repository methods and custom finder methods.
+ CustomerController is a REST Controller which has request mapping methods for RESTful requests such as:
/postcustomer, /findall, /customer/{id}, /findByLastName.
+ Configuration for Spring Datasource and Spring JPA properties in application.properties.
+ Response class defines structure for returned data of HTTP GET.

To understand deeply the code about JPA that uses in this example, please visit:
How to use Spring JPA with MySQL | Spring Boot

– UI: uses AngularJS for HTTP POST/GET requests:
+ home.jsp contains elements for POST/GET request and display results.
+ controller() and $http.get()/$http.post() methods in angular.js Javascript file.
+ WebController maps url to home.jsp page.

Simpler example that uses AngularJS HTTP POST/GET:
How to integrate Http Angularjs with Spring MVC | Spring Boot

– Configuration for JSP page and static resources in application.properties
– Dependencies for Spring JPA, WEB MVC, MySQL, Tomcat in pom.xml

To know how to make application work with JSP page and static resources, please visit:
How to start with JSP page and static resource in Spring Boot

II. Practice

1. Create Spring Boot project

– Using Spring Tool Suite/Eclipse to create Project (WAR packaging), ServletInitializer and SpringBootApplication class will be created automatically.
– Add Dependencies to pom.xml file:

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-web</artifactId>
</dependency>

<dependency>
	<groupId>mysql</groupId>
	<artifactId>mysql-connector-java</artifactId>
	<scope>runtime</scope>
</dependency>

<dependency>
	<groupId>org.springframework.boot</groupId>
	<artifactId>spring-boot-starter-tomcat</artifactId>
	<scope>provided</scope>
</dependency>

<dependency>
	<groupId>org.apache.tomcat.embed</groupId>
	<artifactId>tomcat-embed-jasper</artifactId>
	<scope>provided</scope>
</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-data-jpa</artifactId>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-web</artifactId>

</dependency>

<groupId>mysql</groupId>

<artifactId>mysql-connector-java</artifactId>

<scope>runtime</scope>

</dependency>

<groupId>org.springframework.boot</groupId>

<artifactId>spring-boot-starter-tomcat</artifactId>

<scope>provided</scope>

</dependency>

<groupId>org.apache.tomcat.embed</groupId>

<artifactId>tomcat-embed-jasper</artifactId>

<scope>provided</scope>

</dependency>

2. Create Data Model Class

package com.javasampleapproach.angularjpamysql.model;

import java.io.Serializable;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "customer")
public class Customer implements Serializable {

	private static final long serialVersionUID = -3009157732242241606L;
	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private long id;

	@Column(name = "firstname")
	private String firstName;

	@Column(name = "lastname")
	private String lastName;

	protected Customer() {
	}

	public long getId() {
		return id;
	}

	public void setId(long id) {
		this.id = id;
	}

	public String getFirstName() {
		return firstName;
	}

	public void setFirstName(String firstName) {
		this.firstName = firstName;
	}

	public String getLastName() {
		return lastName;
	}

	public void setLastName(String lastName) {
		this.lastName = lastName;
	}

	public Customer(String firstName, String lastName) {
		this.firstName = firstName;
		this.lastName = lastName;
	}

	@Override
	public String toString() {
		return String.format("Customer[id=%d, firstName='%s', lastName='%s']", id, firstName, lastName);
	}
}

package com.javasampleapproach.angularjpamysql.model;

import java.io.Serializable;

import javax.persistence.Column;

import javax.persistence.Entity;

import javax.persistence.GeneratedValue;

import javax.persistence.GenerationType;

import javax.persistence.Id;

import javax.persistence.Table;

@Entity

@Table(name = "customer")

public class Customer implements Serializable {

private static final long serialVersionUID = -3009157732242241606L;

@Id

@GeneratedValue(strategy = GenerationType.AUTO)

private long id;

@Column(name = "firstname")

private String firstName;

@Column(name = "lastname")

private String lastName;

protected Customer() {

}

public long getId() {

return id;

}

public void setId(long id) {

this.id = id;

}

public String getFirstName() {

return firstName;

}

public void setFirstName(String firstName) {

this.firstName = firstName;

}

public String getLastName() {

return lastName;

}

public void setLastName(String lastName) {

this.lastName = lastName;

}

public Customer(String firstName, String lastName) {

this.firstName = firstName;

this.lastName = lastName;

}

@Override

public String toString() {

return String.format("Customer[id=%d, firstName='%s', lastName='%s']", id, firstName, lastName);

}

3. Create Message Model Class

package com.javasampleapproach.angularjpamysql.message;

public class Response {
	private String status;
	private Object data;

	public Response() {

	}

	public Response(String status, Object data) {
		this.status = status;
		this.data = data;
	}

	public String getStatus() {
		return status;
	}

	public void setStatus(String status) {
		this.status = status;
	}

	public Object getData() {
		return data;
	}

	public void setData(Object data) {
		this.data = data;
	}
}

package com.javasampleapproach.angularjpamysql.message;

public class Response {

private String status;

private Object data;

public Response() {

}

public Response(String status, Object data) {

this.status = status;

this.data = data;

}

public String getStatus() {

return status;

}

public void setStatus(String status) {

this.status = status;

}

public Object getData() {

return data;

}

public void setData(Object data) {

this.data = data;

}

4. Create Repository Class

package com.javasampleapproach.angularjpamysql.repo;

import java.util.List;

import org.springframework.data.repository.CrudRepository;

import com.javasampleapproach.angularjpamysql.model.Customer;

public interface CustomerRepository extends CrudRepository<Customer, Long> {
	List<Customer> findByLastName(String lastName);
}

package com.javasampleapproach.angularjpamysql.repo;

import java.util.List;

import org.springframework.data.repository.CrudRepository;

import com.javasampleapproach.angularjpamysql.model.Customer;

public interface CustomerRepository extends CrudRepository<Customer, Long> {

List<Customer> findByLastName(String lastName);

}

5. Create Controller Classes

package com.javasampleapproach.angularjpamysql.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;
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 org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.RestController;

import com.javasampleapproach.angularjpamysql.message.Response;
import com.javasampleapproach.angularjpamysql.model.Customer;
import com.javasampleapproach.angularjpamysql.repo.CustomerRepository;

@RestController
public class CustomerController {

	@Autowired
	CustomerRepository repository;

	@RequestMapping(value = "/postcustomer", method = RequestMethod.POST)
	public void postCustomer(@RequestBody Customer customer) {

		repository.save(new Customer(customer.getFirstName(), customer.getLastName()));
	}

	@RequestMapping("/findall")
	public Response findAll() {

		Iterable<Customer> customers = repository.findAll();

		return new Response("Done", customers);
	}

	@RequestMapping("/customer/{id}")
	public Response findCustomerById(@PathVariable("id") long id) {

		Customer customer = repository.findOne(id);

		return new Response("Done", customer);
	}

	@RequestMapping("/findbylastname")
	public Response findByLastName(@RequestParam("lastName") String lastName) {

		List<Customer> customers = repository.findByLastName(lastName);

		return new Response("Done", customers);
	}
}

package com.javasampleapproach.angularjpamysql.controller;

import java.util.List;

import org.springframework.beans.factory.annotation.Autowired;

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 org.springframework.web.bind.annotation.RequestParam;

import org.springframework.web.bind.annotation.RestController;

import com.javasampleapproach.angularjpamysql.message.Response;

import com.javasampleapproach.angularjpamysql.model.Customer;

import com.javasampleapproach.angularjpamysql.repo.CustomerRepository;

@RestController

public class CustomerController {

@Autowired

CustomerRepository repository;

@RequestMapping(value = "/postcustomer", method = RequestMethod.POST)

public void postCustomer(@RequestBody Customer customer) {

repository.save(new Customer(customer.getFirstName(), customer.getLastName()));

}

@RequestMapping("/findall")

public Response findAll() {

Iterable<Customer> customers = repository.findAll();

return new Response("Done", customers);

}

@RequestMapping("/customer/{id}")

public Response findCustomerById(@PathVariable("id") long id) {

Customer customer = repository.findOne(id);

return new Response("Done", customer);

}

@RequestMapping("/findbylastname")

public Response findByLastName(@RequestParam("lastName") String lastName) {

List<Customer> customers = repository.findByLastName(lastName);

return new Response("Done", customers);

}

package com.javasampleapproach.angularjpamysql.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.servlet.ModelAndView;

@Controller
public class WebController {

	@RequestMapping("/")
	ModelAndView home(ModelAndView modelAndView) {

		modelAndView.setViewName("home");

		return modelAndView;
	}
}

package com.javasampleapproach.angularjpamysql.controller;

import org.springframework.stereotype.Controller;

import org.springframework.web.bind.annotation.RequestMapping;

import org.springframework.web.servlet.ModelAndView;

@Controller

public class WebController {

@RequestMapping("/")

ModelAndView home(ModelAndView modelAndView) {

modelAndView.setViewName("home");

return modelAndView;

}

6. Configuration for Datasource, JPA, JSP page, resources

Add these lines to application.properties file (assume that you use testdb database with username root and password 123456:

spring.datasource.url=jdbc:mysql://localhost:3306/testdb?useSSL=false
spring.datasource.username=root
spring.datasource.password=123456
spring.jpa.generate-ddl=true

spring.mvc.view.prefix = /WEB-INF/jsps/
spring.mvc.view.suffix = .jsp

spring.datasource.url=jdbc:mysql://localhost:3306/testdb?useSSL=false

spring.datasource.username=root

spring.datasource.password=123456

spring.jpa.generate-ddl=true

spring.mvc.view.prefix = /WEB-INF/jsps/

spring.mvc.view.suffix = .jsp

7. Add JSP Page and Javascript File

Under src/main/webapp/WEB-INF/jsps folder, add:

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
	pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>Spring Boot Example</title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<meta name="viewport" content="width=device-width, initial-scale=1" />
<script
	src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>
<script src="/js/angular.js"></script>
<link rel="stylesheet"
	href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />
</head>
<body>
	<div class="container" ng-app="app">
		<h1>AngularJS - Spring JPA - MySQL</h1>

		<div class="row">
			<div ng-controller="postController" class="col-md-3">
				<form name="customerForm" ng-submit="submitForm()">
					<label>FirstName</label>
					<input type="text" name="firstname"	class="form-control" ng-model="firstname" />
					<label>LastName</label>
					<input type="text" name="lastname" class="form-control" ng-model="lastname" />
					
					<button type="submit" class="btn btn-primary">Submit</button>
				</form>
				<p>{{postResultMessage}}</p>
			</div>
		</div>
		<div class="row">
			<div ng-controller="getallcustomersController" class="col-md-3">
				<h3>All Customers</h3>

				<button ng-click="getAllCustomers()">Get All Customers</button>

				<div ng-show="showAllCustomers">
					<ul class="list-group">
						<li ng-repeat="customer in allcustomers.data"><h4 class="list-group-item">
								<strong>Customer {{$index}}</strong><br />
								Id: {{customer.id}}<br />
								First Name: {{customer.firstName}}<br />
								Last Name: {{customer.lastName}}
						</h4></li>
					</ul>
				</div>
				<p>{{getResultMessage}}</p>
			</div>

			<div ng-controller="getcustomerController" class="col-md-3">
				<h3>Customer by ID</h3>

				<input type="text" class="form-control" style="width: 100px;"
					ng-model="customerId" /> <br />
				<button ng-click="getCustomer()">Get Customer</button>

				<div ng-show="showCustomer">
					Id: {{customer.data.id}}<br />
					First Name: {{customer.data.firstName}}<br />
					Last Name: {{customer.data.lastName}}
				</div>
				<p>{{getResultMessage}}</p>
			</div>

			<div ng-controller="getcustomersbylastnameController" class="col-md-4">
				<h3>Customers by LastName</h3>

				<input type="text" class="form-control" style="width: 100px;" ng-model="customerLastName" /><br />
				<button ng-click="getCustomersByLastName()">Get Customers</button>

				<div ng-show="showCustomersByLastName">

					<ul class="list-group">
						<li ng-repeat="customer in allcustomersbylastname.data"><h4	class="list-group-item">
								<strong>Customer {{$index}}</strong><br />
								Id: {{customer.id}}<br />
								First Name: {{customer.firstName}}<br />
								Last Name: {{customer.lastName}}
						</h4></li>
					</ul>
				</div>
				<p>{{getResultMessage}}</p>
			</div>

		</div>
	</div>
</body>
</html>

<%@ page language="java" contentType="text/html; charset=ISO-8859-1"

pageEncoding="ISO-8859-1"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>

<title>Spring Boot Example</title>

<script

src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.0/angular.min.js"></script>

href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" />

</head>

<body>

<h1>AngularJS - Spring JPA - MySQL</h1>

<label>FirstName</label>

<label>LastName</label>

<button type="submit" class="btn btn-primary">Submit</button>

</form>

<p>{{postResultMessage}}</p>

</div>

<h3>All Customers</h3>

<button ng-click="getAllCustomers()">Get All Customers</button>

<strong>Customer {{$index}}</strong><br />

Id: {{customer.id}}<br />

First Name: {{customer.firstName}}<br />

Last Name: {{customer.lastName}}

</h4></li>

</ul>

</div>

<p>{{getResultMessage}}</p>

</div>

<h3>Customer by ID</h3>

<input type="text" class="form-control" style="width: 100px;"

ng-model="customerId" /> <br />

<button ng-click="getCustomer()">Get Customer</button>

Id: {{customer.data.id}}<br />

First Name: {{customer.data.firstName}}<br />

Last Name: {{customer.data.lastName}}

</div>

<p>{{getResultMessage}}</p>

</div>

<h3>Customers by LastName</h3>

<button ng-click="getCustomersByLastName()">Get Customers</button>

<strong>Customer {{$index}}</strong><br />

Id: {{customer.id}}<br />

First Name: {{customer.firstName}}<br />

Last Name: {{customer.lastName}}

</h4></li>

</ul>

</div>

<p>{{getResultMessage}}</p>

</div>

</body>

</html>

Under src/main/webapp/js folder, add:

var app = angular.module('app', []);

app.controller('postController', function($scope, $http, $location) {
	$scope.submitForm = function(){
		var url = $location.absUrl() + "postcustomer";
		
		var config = {
                headers : {
                    'Content-Type': 'application/json;charset=utf-8;'
                }
        }
		
		var data = {
            firstName: $scope.firstname,
            lastName: $scope.lastname
        };
		
		
		$http.post(url, data, config).then(function (response) {
			$scope.postResultMessage = "Sucessful!";
		}, function (response) {
			$scope.postResultMessage = "Fail!";
		});
		
		$scope.firstname = "";
		$scope.lastname = "";
	}
});

app.controller('getallcustomersController', function($scope, $http, $location) {
	
	$scope.showAllCustomers = false;

	$scope.getAllCustomers = function() {
		var url = $location.absUrl() + "findall";

		var config = {
			headers : {
				'Content-Type' : 'application/json;charset=utf-8;'
			}
		}

		$http.get(url, config).then(function(response) {

			if (response.data.status == "Done") {
				$scope.allcustomers = response.data;
				$scope.showAllCustomers = true;

			} else {
				$scope.getResultMessage = "get All Customers Data Error!";
			}

		}, function(response) {
			$scope.getResultMessage = "Fail!";
		});

	}
});

app.controller('getcustomerController', function($scope, $http, $location) {
	
	$scope.showCustomer = false;
	
	$scope.getCustomer = function() {
		var url = $location.absUrl() + "customer/" + $scope.customerId;

		var config = {
			headers : {
				'Content-Type' : 'application/json;charset=utf-8;'
			}
		}

		$http.get(url, config).then(function(response) {

			if (response.data.status == "Done") {
				$scope.customer = response.data;
				$scope.showCustomer = true;

			} else {
				$scope.getResultMessage = "Customer Data Error!";
			}

		}, function(response) {
			$scope.getResultMessage = "Fail!";
		});

	}
});

app.controller('getcustomersbylastnameController', function($scope, $http, $location) {
	
	$scope.showCustomersByLastName = false;
	
	$scope.getCustomersByLastName = function() {
		var url = $location.absUrl() + "findbylastname";

		var config = {
			headers : {	'Content-Type' : 'application/json;charset=utf-8;' },
		
			params: { 'lastName' : $scope.customerLastName }
		}

		$http.get(url, config).then(function(response) {

			if (response.data.status == "Done") {
				$scope.allcustomersbylastname = response.data;
				$scope.showCustomersByLastName = true;

			} else {
				$scope.getResultMessage = "Customer Data Error!";
			}

		}, function(response) {
			$scope.getResultMessage = "Fail!";
		});

	}
});

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

var app = angular.module('app', []);

app.controller('postController', function($scope, $http, $location) {

$scope.submitForm = function(){

var url = $location.absUrl() + "postcustomer";

var config = {

headers : {

'Content-Type': 'application/json;charset=utf-8;'

}

var data = {

firstName: $scope.firstname,

lastName: $scope.lastname

};

$http.post(url, data, config).then(function (response) {

$scope.postResultMessage = "Sucessful!";

}, function (response) {

$scope.postResultMessage = "Fail!";

});

$scope.firstname = "";

$scope.lastname = "";

}

});

app.controller('getallcustomersController', function($scope, $http, $location) {

$scope.showAllCustomers = false;

$scope.getAllCustomers = function() {

var url = $location.absUrl() + "findall";

var config = {

headers : {

'Content-Type' : 'application/json;charset=utf-8;'

}

$http.get(url, config).then(function(response) {

if (response.data.status == "Done") {

$scope.allcustomers = response.data;

$scope.showAllCustomers = true;

} else {

$scope.getResultMessage = "get All Customers Data Error!";

}

}, function(response) {

$scope.getResultMessage = "Fail!";

});

}

});

app.controller('getcustomerController', function($scope, $http, $location) {

$scope.showCustomer = false;

$scope.getCustomer = function() {

var url = $location.absUrl() + "customer/" + $scope.customerId;

var config = {

headers : {

'Content-Type' : 'application/json;charset=utf-8;'

}

$http.get(url, config).then(function(response) {

if (response.data.status == "Done") {

$scope.customer = response.data;

$scope.showCustomer = true;

} else {

$scope.getResultMessage = "Customer Data Error!";

}

}, function(response) {

$scope.getResultMessage = "Fail!";

});

}

});

app.controller('getcustomersbylastnameController', function($scope, $http, $location) {

$scope.showCustomersByLastName = false;

$scope.getCustomersByLastName = function() {

var url = $location.absUrl() + "findbylastname";

var config = {

headers : { 'Content-Type' : 'application/json;charset=utf-8;' },

params: { 'lastName' : $scope.customerLastName }

}

$http.get(url, config).then(function(response) {

if (response.data.status == "Done") {

$scope.allcustomersbylastname = response.data;

$scope.showCustomersByLastName = true;

} else {

$scope.getResultMessage = "Customer Data Error!";

}

}, function(response) {

$scope.getResultMessage = "Fail!";

});

}

});

8. Run & Check Result

– Config maven build:
clean install
– Run project with mode Spring Boot App.
– Open Browser, enter URL:
http://localhost:8080/
spring-jpa-mysql-angularjs-request

– Fill Form to Post Customer Data & press Submit button.
Then press Get All Customers button, find Customer by Id, find Customers by Last Name:
spring-jpa-mysql-angularjs-results

– Open MySQL WorkBench to check database:
spring-jpa-mysql-angularjs-database

III. Source Code

SpringJPAMySQLAngularJS

By grokonez | June 19, 2017.

3 thoughts on “Spring JPA + MySQL + AngularJS example | Spring Boot”

arun singh says:

March 14, 2018 at 8:12 pm

great!

Ajit says:

April 13, 2018 at 10:33 am

where is dialect and driver url information? and where are you reading application.properties?

teck4world says:

August 5, 2018 at 7:12 pm

Great tutorial. Great Explanation.
Suggestion:- Instead of repository.save(new Customer(customer.getFirstName(), customer.getLastName())); we can use
repository.save(customer); inside the CustoemrController class.
THnk you. Keep it up.

Spring JPA + MySQL + AngularJS example | Spring Boot

I. Overview

1. Goal

2. Technology

3. Project Structure

II. Practice

1. Create Spring Boot project

2. Create Data Model Class

3. Create Message Model Class

4. Create Repository Class

5. Create Controller Classes

6. Configuration for Datasource, JPA, JSP page, resources

7. Add JSP Page and Javascript File

8. Run & Check Result

III. Source Code

Post Tags

3 thoughts on “Spring JPA + MySQL + AngularJS example | Spring Boot”

Got Something To Say: Cancel reply

I. Overview

1. Goal

2. Technology

3. Project Structure

II. Practice

1. Create Spring Boot project

2. Create Data Model Class

3. Create Message Model Class

4. Create Repository Class

5. Create Controller Classes

6. Configuration for Datasource, JPA, JSP page, resources

7. Add JSP Page and Javascript File

8. Run & Check Result

III. Source Code

Related Posts

Post Tags

3 thoughts on “Spring JPA + MySQL + AngularJS example | Spring Boot”

Got Something To Say: Cancel reply