Spring JPA + PostgreSQL + AngularJS example | Spring Boot

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

Related Posts:
How to use Spring JPA with PostgreSQL | Spring Boot
How to integrate Http Angularjs with Spring MVC | Spring Boot
Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server

I. Overview

1. Goal


We’ll build a Spring Boot Application in that:
REST Service provides interface for interacting with Customer Database (PostgreSQL) 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


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 PostgreSQL | 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, PostgreSQL, 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:

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

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

7. Add JSP Page and Javascript File

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

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

8. Run & Check Result

– Config maven build:
clean install
– Run project with mode Spring Boot App.
– Open Browser, enter URL:

– Fill Form to Post Customer Data & press Submit button.
Then press Get All Customers button:

– Open pgAdmin III to check database:

– Find Customer by Id:

– Find Customers by Last Name:

III. Source Code


By grokonez | June 18, 2017.

Related Posts

12 thoughts on “Spring JPA + PostgreSQL + AngularJS example | Spring Boot”

  1. Can you post a sample JSON example to test the REST API part alone? An example for postCustomer (create user operation) would be great for understanding.

  2. On running above code. I got error “Consider defining a bean named ‘entityManagerFactory’ in your configuration.”. Can anyone suggest me. How to resolve this..

    1. Hi,

      I had checked the sourcecode again.
      It works fine With SpringToolSuite and mvn commandline mvn spring-boot:run

      With SpringBoot project, entityManagerFactory will be auto-configured when having JPA dependency: spring-boot-starter-data-jpa in class path.

      So, please double check your environment and try it again with our sourcecode.


      1. Hello ,

        After lot of difficulties ,I got solution for this.
        I have to delete all duplicated jars(but version is different) from repository.
        ex.hibernate-entitymanager-5.0.2.Final,jboss->jandex and so on..

        Now its perfectly running


  3. A tutorial written in 2017 shouldn’t use AngularJS 1.x … That’s basically useless to any developer and basically ignored all the important developments made in Angular.

  4. Hello,

    I have a problem. When i went to this url : http://localhost:8889/, i got this :

    Whitelabel Error Page

    This application has no explicit mapping for /error, so you are seeing this as a fallback.
    Fri Jan 26 12:17:07 CET 2018
    There was an unexpected error (type=Not Found, status=404).
    No message available

    I followed ur example and in my WebController.java i respected your code and your project structure.

    Do you know how to solve this please?

    Best Regards,
    Mohamed FOFANA

    1. For fix this.

      as console, and you must have install maven:

      mvn clean install

      mvn spring-boot:run

      and it works.


  5. Ah i forgot to tell you something, i tested the other requestmapping in theCustomerController.java like /findall and its works. That’s so strange…

Got Something To Say:

Your email address will not be published. Required fields are marked *