Kotlin Spring Boot + Angular 6 CRUD HttpClient + MySQL 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 MySQL and Angular 6 as a front-end technology to make request and receive response.

Related Posts:
How to use Spring JPA MySQL | Spring Boot
Spring JPA + MySQL + AngularJS example | Spring Boot
Spring JPA Hibernate Many to Many – SpringBoot + PostgreSQL
Spring JPA Hibernate One to Many Relationship – SpringBoot + MySQL
Spring Boot + React Redux + MySQL CRUD example
Kotlin + SpringBoot JPA + MySQL- Save/retrieve Files/Images with @Lob annotation
Spring Security – JDBC Authentication – SpringBoot + MySQL + Bootstrap

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-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + angular-http-service-architecture

1. Spring Boot Server

kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + spring-server-architecture

2. Angular 6 Client

kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + angular-client-architecture

III. Practice

1. Project Structure

1.1 Spring Boot Server

Angular-6-Crud-HttpClient-Kotlin-SpringBoot-MySQL-CRUD-Spring-JPA +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 MySQL in pom.xml

1.2 Angular 6 Client

kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + 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


2.1.3 JPA Repository


2.1.4 REST Controller


2.1.5 Configuration for Spring Datasource & JPA 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


2.2.2 CustomerService


2.2.3 Components

– CustomerDetailsComponent:


– CustomersListComponent:


– CreateCustomerComponent:


– SearchCustomersComponent:


2.2.4 AppRoutingModule


And AppComponent HTML for routing:

2.2.5 AppModule


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:


Show Customers:

kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + show-customers

Click on Active button to update Customer status:

kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa +update-customers

Search Customers by Age:

kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + search-customers

Delete a Customer:

kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + delete-customer

Delete All Customers:

kotlin-spring-boot-angular-6-crud-httpclient-spring-rest-api-data-mysql-crud-spring-jpa + delete-all-customers

IV. Source Code


By grokonez | August 16, 2018.

Related Posts

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

Got Something To Say:

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