Spring Boot + Angular 6 example | Spring Data JPA + REST + PostgreSQL CRUD example

spring-boot-angular-6-example-spring-data-rest-postgresql-example-feature-image-new

In this tutorial, we show you Angular 6 Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with PostgreSQL and Angular 6 as a front-end technology to make request and receive response.

Related Posts:
How to use Spring JPA with PostgreSQL | Spring Boot
Spring JPA + PostgreSQL + AngularJS example | Spring Boot

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 2.0.3.RELEASE
– Angular 6
– RxJS 6

II. Overview

angular-http-service-architecture

Demo

1. Spring Boot Server

spring-boot-angular-6-spring-rest-api-data-postgresql-spring-server-architecture

2. Angular 6 Client

spring-boot-angular-6-spring-rest-api-data-postgresql-angular-client-architecture

III. Practice

1. Project Structure

1.1 Spring Boot Server

spring-boot-angular-6-spring-rest-api-data-postgresql-spring-server-structure

Customer class corresponds to entity and table customer.
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: getAllCustomers, postCustomer, deleteCustomer, deleteAllCustomers, findByAge, updateCustomer.
– Configuration for Spring Datasource and Spring JPA properties in application.properties
Dependencies for Spring Boot and PostgreSQL in pom.xml

1.2 Angular 6 Client

spring-boot-angular-6-spring-rest-api-data-postgresql-angular-client-structure

In this example, we focus on:
– 4 components: customers-list, customer-details, create-customer, search-customer.
– 3 modules: FormsModule, HttpClientModule, AppRoutingModule.
customer.ts: class Customer (id, firstName, lastName)
customer.service.ts: Service for Http Client methods

2. How to do

2.1 Spring Boot Server
2.1.1 Dependency

2.1.2 Customer – Data Model

model/Customer.java

2.1.3 JPA Repository

repo/CustomerRepository.java

2.1.4 REST Controller

controller/CustomerController.java

2.1.5 Configuration for Spring Datasource & JPA properties

application.properties

2.2 Angular 6 Client
2.2.0 Create Service & Components

Run commands below:
ng g s customer
ng g c create-customer
ng g c customer-details
ng g c customers-list
ng g c search-customers
On each Component selector, delete app- prefix, then change tslint.json rules"component-selector" to false.

2.2.1 Model

customer.ts

2.2.2 CustomerService

customer.service.ts

2.2.3 Components

– CustomerDetailsComponent:
customer-details/customer-details.component.ts

customer-details/customer-details.component.html

– CustomersListComponent:
customers-list/customers-list.component.ts

customers-list/customers-list.component.html

– CreateCustomerComponent:
create-customer/create-customer.component.ts

create-customer/create-customer.component.html

– SearchCustomersComponent:
search-customers/search-customers.component.ts

search-customers/search-customers.component.html

2.2.4 AppRoutingModule

app-routing.module.ts

And AppComponent HTML for routing:
app.component.html

2.2.5 AppModule

app.module.ts

3. Run & Check Result

Build and Run Spring Boot project with commandlines: mvn clean install and mvn spring-boot:run.
– Run the Angular App with command: ng serve.

– Open browser for url http://localhost:4200/:
Add Customer:

spring-boot-angular-6-spring-rest-api-data-postgresql-add-customer

Show Customers:

spring-boot-angular-6-spring-rest-api-data-postgresql-show-customers

Click on Active button to update Customer status:

spring-boot-angular-6-spring-rest-api-data-postgresql-update-customer

Search Customers by Age:

spring-boot-angular-6-spring-rest-api-data-postgresql-search-customers

Delete a Customer:

spring-boot-angular-6-spring-rest-api-data-postgresql-delete-customer

Delete All Customers:

spring-boot-angular-6-spring-rest-api-data-postgresql-delete-all-customers

IV. Source Code

Angular6SpringBoot-Client
SpringRESTPostgreSQL-Server

By grokonez | June 21, 2018.

Last updated on November 2, 2018.



Related Posts


8 thoughts on “Spring Boot + Angular 6 example | Spring Data JPA + REST + PostgreSQL CRUD example”

  1. I’m beginner and I’m trying to follow your tutorial. One thing puzzled me: why in CustomerController inside postCustomer method you saved Customer like this:

    instead of just simply:

    (object from method parameter)?

    1. Hi Pawel,

      Please look at the constructor method of Customer class:

      You can see that we specify the value of active field, and not mention the value of id field (that will be generated automatically by JPA), if you use the customer from input param of the function:

      customer.active field could be true by the input 🙂

      Regards,
      grokonez.

  2. I am getting an error while hitting add details

    Access to XMLHttpRequest at ‘http://localhost:8080/api/customers/create’ from origin ‘http://localhost:4200’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource.

    1. Please add
      import org.springframework.web.bind.annotation.CrossOrigin;

      @CrossOrigin(origins=”http://localhost:4200″)

  3. Search by age is good. But if i want to search age by comma separated.

    Example

    search 27,23,34.

    I want to display all above age group. Could you please let us know

Got Something To Say:

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

*