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

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
Kotlin Spring JPA + Postgresql | Spring Boot Example
Kotlin RequestMapping RESTful APIs with @GetMapping, @PostMapping, @PutMapping, @DeleteMapping
Kotlin SpringJPA Hibernate One-To-Many relationship

Related Pages:

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

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + angular-http-service-architecture

1. Spring Boot Server

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + spring-server-architecture

2. Angular 6 Client

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql + angular-client-architecture

III. Practice

1. Project Structure

1.1 Spring Boot Server

Angular-6-HttpClient-Kotlin-SpringBoot-PostgreSQL+Kotlin-SpringBoot-project

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

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + 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 Kotlin 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 CreateCustomer
ng g c CustomerDetails
ng g c CustomersList
ng g c SearchCustomers
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:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database-add-customer

Show Customers:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + show-customers

Click on Active button to update Customer status:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database +update-customers

Search Customers by Age:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + search-customers

Delete a Customer:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + delete-customer

Delete All Customers:

kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + delete-all-customers

IV. Source Code

SpringKotlinRestAPIsPostgreSQL
Angular6SpringBoot-Client

By grokonez | August 16, 2018.



Related Posts


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

  1. This example is awesome, but when i try to deply this on heroku I had this error:

    Error R10 (Boot timeout) -> Web process failed to bind to $PORT within 60 seconds of launch

    Google says that you can change this when you uses express, but this does not case.

    So how can I make it works on heroku

Got Something To Say:

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

*