Kotlin Spring Boot + Angular 6 CRUD + PostgreSQL example | Spring Data JPA + REST APIs example
Tags: angular6, postgres, springdata
Published: 2021-04-21 16:26:57

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-spring-boot-angular-6-crud-postgresql-example-spring-data-jpa-rest-apis-example

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:
- <a href="https://grokonez.com/spring-framework/spring-boot/use-spring-jpa-postgresql-spring-boot">How to use Spring JPA with PostgreSQL | Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/spring-jpa-postgresql-angularjs-example-spring-boot">Spring JPA + PostgreSQL + AngularJS example | Spring Boot</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/kotlin-spring-jpa-postgresql-spring-boot-example">Kotlin Spring JPA + Postgresql | Spring Boot Example</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/kotlin-spring-mvc-requestmapping-restful-apis-getmapping-postmapping-putmapping-deletemapping-springboot-example">Kotlin RequestMapping RESTful APIs with @GetMapping, @PostMapping, @PutMapping, @DeleteMapping</a>
- <a href="https://grokonez.com/spring-framework/spring-data/kotlin-springjpa-hibernate-one-many-relationship">Kotlin SpringJPA Hibernate One-To-Many relationship</a>

Related Pages:
<ul>
<li><strong><a href="https://grokonez.com/kotlin-tutorial">Kotlin</a></strong></li>
<li><a href="https://grokonez.com/angular-tutorial">Angular</a></li>
<li><a href="https://grokonez.com/angular-tutorial">SpringBoot</a></li>
</ul>

<!--more-->
<h2>I. Technologies</h2>
– 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
<h2>II. Overview</h2>
<img src="https://grokonez.com/wp-content/uploads/2018/08/kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database-angular-http-service-architecture.png" alt="kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + angular-http-service-architecture" width="570" height="542" class="alignnone size-full wp-image-14237" />
<h3>1. Spring Boot Server</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/08/kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database-spring-server-architecture.png" alt="kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + spring-server-architecture" width="699" height="325" class="alignnone size-full wp-image-14238" />
<h3>2. Angular 6 Client</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/08/kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-angular-client-architecture.png" alt="kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql + angular-client-architecture" width="696" height="462" class="alignnone size-full wp-image-14239" />
<h2>III. Practice</h2>
<h3>1. Project Structure</h3>
<h4>1.1 Spring Boot Server</h4>
<img src="https://grokonez.com/wp-content/uploads/2018/08/Angular-6-HttpClient-Kotlin-SpringBoot-PostgreSQLKotlin-SpringBoot-project.png" alt="Angular-6-HttpClient-Kotlin-SpringBoot-PostgreSQL+Kotlin-SpringBoot-project" width="352" height="363" class="alignnone size-full wp-image-14240" />

- <strong>Customer</strong> class corresponds to entity and table <strong>customer</strong>.
- <strong>CustomerRepository</strong> is an interface extends <strong>CrudRepository</strong>, will be autowired in <strong>CustomerController</strong> for implementing repository methods and custom finder methods.
- <strong>CustomerController</strong> is a REST Controller which has request mapping methods for RESTful requests such as: <code>getAllCustomers</code>, <code>postCustomer</code>, <code>deleteCustomer</code>, <code>deleteAllCustomers</code>, <code>findByAge</code>, <code>updateCustomer</code>.
- Configuration for Spring Datasource and Spring JPA properties in <strong>application.properties</strong>
- <strong>Dependencies</strong> for <strong>Spring Boot</strong> and <strong>PostgreSQL</strong> in <strong>pom.xml</strong>
<h4>1.2 Angular 6 Client</h4>
<img src="https://grokonez.com/wp-content/uploads/2018/08/kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database-angular-client-structure.png" alt="kotlin-spring-boot-angular-6-httpclient-spring-rest-api-data-postgresql-database + angular-client-structure" width="251" height="547" class="alignnone size-full wp-image-14241" />

In this example, we focus on:
- 4 components: <strong><em>customers-list</em></strong>, <strong><em>customer-details</em></strong>, <strong><em>create-customer</em></strong>, <strong><em>search-customer</em></strong>.
- 3 modules: <strong><em>FormsModule</em></strong>, <strong><em>HttpClientModule</em></strong>, <strong><em>AppRoutingModule</em></strong>.
- <strong><em>customer.ts</em></strong>: class Customer (id, firstName, lastName)
- <strong><em>customer.service.ts</em></strong>: Service for Http Client methods
<h3>2. How to do</h3>
<h4>2.1 Kotlin Spring Boot Server</h4>
<h5>2.1.1 Dependency</h5>
<pre><code class="language-html">&lt;dependency&gt;
	&lt;groupId&gt;org.jetbrains.kotlin&lt;/groupId&gt;
	&lt;artifactId&gt;kotlin-stdlib-jdk8&lt;/artifactId&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
	&lt;groupId&gt;org.jetbrains.kotlin&lt;/groupId&gt;
	&lt;artifactId&gt;kotlin-reflect&lt;/artifactId&gt;
&lt;/dependency&gt;
&lt;dependency&gt;
	&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
	&lt;artifactId&gt;spring-boot-starter-data-jpa&lt;/artifactId&gt;
&lt;/dependency&gt;
 
&lt;dependency&gt;
	&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
	&lt;artifactId&gt;spring-boot-starter-web&lt;/artifactId&gt;
&lt;/dependency&gt;
 
&lt;dependency&gt;
	&lt;groupId&gt;org.postgresql&lt;/groupId&gt;
	&lt;artifactId&gt;postgresql&lt;/artifactId&gt;
	&lt;scope&gt;runtime&lt;/scope&gt;
&lt;/dependency&gt;</code></pre>
<h5>2.1.2 Customer - Data Model</h5>
<em>model/Customer.java</em>

https://grokonez.com/spring-framework/spring-boot/kotlin-spring-boot/kotlin-spring-boot-angular-6-crud-postgresql-example-spring-data-jpa-rest-apis-example

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