Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server

In this tutorial, JavaSampleApproach shows you Angular 4 Http Client & Spring Boot Server example that uses Spring JPA to interact with PostgreSQL and Angular 4 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
How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4
How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4

I. Technologies

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

II. Overview

angular-http-service-architecture

1. Spring Boot Server

angular-4-spring-jpa-postgresql-spring-boot-architecture

For more details about Spring JPA – PostgreSQL, please visit:
How to use Spring JPA with PostgreSQL | Spring Boot

2. Angular 4 Client

angular-4-spring-jpa-postgresql-angular-architecture

For more details:
– About Angular 4 Routing:
How to work with Angular Routing – Spring Boot + Angular 4
– About Angular Http Client to GET/POST/DELETE:
+ How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4
+ How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4

III. Practice

1. Project Structure

1.1 Spring Boot Server

angular-4-spring-jpa-postgresql-spring-boot-structure

– Class Customer 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: getAll, postCustomer, delete, findByLastName.
– Configuration for Spring Datasource and Spring JPA properties in application.properties
Dependencies for Spring Boot and PostgreSQL in pom.xml

1.2 Angular 4 Client

angular-4-spring-jpa-postgresql-angular-structure

In this example, we focus on:
– 4 components: customers, customer-details, create-customer, search-customer.
– 3 modules: FormsModule, HttpModule, AppRoutingModule.
customer.ts: class Customer (id, firstName, lastName)
data.service.ts: DataService for Http Client methods
proxy.conf.json for integrating Angular Client with Spring Boot Server.

2. How to do

2.1 Spring Boot Server
2.1.1 Dependency

2.1.2 Customer – Data Model

2.1.3 JPA Repository

2.1.4 REST Controller

2.1.5 Configuration for Spring Datasource & JPA properties

2.2 Angular 4 Client
2.2.0 Model

2.2.1 DataService

2.2.2 Components

– CustomersComponent:

– CustomerDetailsComponent:

– CreateCustomerComponent:

– SearchCustomersComponent:

2.2.3 AppRoutingModule

And AppComponent HTML for routing:

2.2.4 AppModule

2.2.5 Integrate Angular Client with Spring Boot Server

– Add proxy.conf.json to root folder of the project:

– Edit package.json file for “start” script:

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: npm start.

– Open browser for url http://localhost:4200/:
Add Customer:
angular-4-spring-jpa-postgresql-result-add-customer

Show Customers & click on any Customer:
angular-4-spring-jpa-postgresql-result-show-customers

>> PostgreSQL DB:
angular-4-spring-jpa-postgresql-result-db

Search Customer:
angular-4-spring-jpa-postgresql-result-search-customers

Go back to ShowCustomers, chose a Customer and click on Delete Customer:
angular-4-spring-jpa-postgresql-result-delete-customer

>> PostgreSQL DB after deleting:
angular-4-spring-jpa-postgresql-result-db-after-delete-customer

IV. Source Code

SpringJpaPostgreSQLAngular4
Angular4Client

By JavaSampleApproach | August 29, 2017.


Related Posts


9 thoughts on “Angular 4 + Spring JPA + PostgreSQL example | Angular 4 Http Client – Spring Boot RestApi Server”

  1. I have error line in customer-details.component.ts on line @Input() customer: Customer;

    I just copy yours. I don’t know what’s going on. Please help me out.

  2. Hi JSA, love these tutorials, best I find online!

    Can you please make similar tutorial for using browser and Angular 4 and connecting to FTP server , select and read unprocessed CSV file from folder_one, perform simple process( example UpperCase) and save processed CSV to folder_two on FTP server. With browser interaction: User can see unprocess files in folder_one and select file to process / download. Also can see process files in folder_two and select file to download?

    Many Thanks
    Frank

Got Something To Say:

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

*