Spring JPA + PostgreSQL + AngularJS example | Spring Boot
Tags: springjpa, springboot, postgres, angular
Published: 2021-06-08 16:15:34

https://ozenero.com/spring-jpa-postgresql-angularjs-example-spring-boot

https://ozenero.com/spring-boot-spring-security-jwt-authentication-architecture-tutorial

Spring JPA + PostgreSQL + AngularJS example | Spring Boot

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

Related Posts:
- <a href="https://ozenero.com/spring-framework/spring-boot/use-spring-jpa-postgresql-spring-boot">How to use Spring JPA with PostgreSQL | Spring Boot</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/http-angularjs-spring-boot">How to integrate Http Angularjs with Spring MVC | Spring Boot</a>
- <a href="https://ozenero.com/spring-framework/spring-boot/angular-4-spring-jpa-postgresql-example-angular-4-http-client-spring-boot-restapi-server">Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server</a>

<!--more-->
<h2>I. Overview</h2>
<h3>1. Goal</h3>
<img src="https://ozenero.com/wp-content/uploads/2017/06/spring-jpa-postgresql-angularjs-structure.png" alt="spring-jpa-postgresql-angularjs-structure" width="700" height="349" class="alignnone size-full wp-image-6346" />

We'll build a Spring Boot Application in that:
- <strong>REST Service</strong> provides interface for interacting with <strong><em>Customer</em></strong> Database (<strong>PostgreSQL</strong>) using <strong>Spring JPA</strong>.
- By using <strong>AngularJS</strong> to make HTTP request to <strong>REST Service</strong> and receive response, <strong>UI</strong> can save <em><strong>Customer</strong></em> Data (id, firstName, lastName), retrieves and displays:
+ All <strong><em>Customer</em></strong>s in database.
+ <em><strong>Customer</strong></em> Data  by <em><strong>customerId</strong></em>.
+ <em><strong>Customer</strong></em>s List by <em><strong>lastName</strong></em>.
<h3>2. Technology</h3>
- Java 1.8
- Maven 3.3.9
- Spring Tool Suite – Version 3.8.4.RELEASE
- Spring Boot: 1.5.4.RELEASE
<h3>3. Project Structure</h3>
<img src="https://ozenero.com/wp-content/uploads/2017/06/spring-jpa-postgresql-angularjs-project-structure.png" alt="spring-jpa-postgresql-angularjs-project-structure" width="352" height="489" class="alignnone size-full wp-image-6348" />

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

<div class="jsa-quote">
To understand deeply the code about JPA that uses in this example, please visit:
<a href="https://ozenero.com/spring-framework/spring-boot/use-spring-jpa-postgresql-spring-boot">How to use Spring JPA with PostgreSQL | Spring Boot</a>
</div>
- <strong>UI</strong>: uses <strong>AngularJS</strong> for HTTP POST/GET requests:
+ <strong>home.jsp</strong> contains elements for POST/GET request and display results.
+ <code>controller()</code> and <code>$http.get()</code>/<code>$http.post()</code> methods in <strong>angular.js</strong> Javascript file.
+ <code>WebController</code> maps url to <strong>home.jsp</strong> page.

https://ozenero.com/spring-jpa-postgresql-angularjs-example-spring-boot

Spring JPA + PostgreSQL + AngularJS example | Spring Boot