DEV Community

loading...

Spring JPA + PostgreSQL + AngularJS example | Spring Boot

loizenai
Software Engineer - Founder at https://loizenai.com
・3 min read

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

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:

I. Overview

1. Goal

spring-jpa-postgresql-angularjs-structure

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

    spring-jpa-postgresql-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 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.

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

Spring JPA + PostgreSQL + AngularJS example | Spring Boot

Discussion (0)