Spring Boot 2.1 + Angular 8 + MySQL example | Angular HTTP Client + RestAPIs + Spring JPA CRUD + MySQL tutorial

spring-boot-angular-8-example-crud-mysql-feature-image

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

Related Post:
How to use Spring JPA MySQL | Spring Boot
Spring JPA + MySQL + AngularJS example | Spring Boot
How to install Angular 8 locally

Technologies

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

Spring Boot + Angular 8 + MySQL example Overview

Spring Boot RestApis Server

spring-boot-angular-8-example-crud-mysql-spring-boot-server-architecture

Our Django Server can work with MySQL Database and provides APIs:

  • GET /customers/: get all customers
  • GET /customers/[id]: get a customer by id
  • GET /customers/age/[age]: find all customers by age
  • POST /customers/: save a customer
  • PUT /customers/[id]: update a customer by id
  • DELETE /customers/[id]: delete a customer by id
  • DELETE /customers/: delete all customers

Angular 8 Client

The image below shows overview about Angular Components that we will create:

spring-boot-angular-8-example-crud-mysql-angular-8-client-components

Implement Spring Boot Server

Project Structure

spring-boot-angular-8-example-crud-mysql-spring-boot-server-project-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 MySQL in pom.xml

We will keep the tutorial as simple as possible, so for post with Spring JPA details, you can visit:
How to use Spring JPA MySQL | Spring Boot

Dependencies

Data Model

model/Customer.java

JPA Repository

repo/CustomerRepository.java

REST Controller

controller/CustomerController.java

Configuration for Spring Datasource & JPA properties

application.properties

Implement Angular 8 HTTP Client

Project Structure

spring-boot-angular-8-example-crud-mysql-angular-8-client-project-structure

We have:
– 4 components: customers-listcustomer-detailscreate-customersearch-customer.
– 3 modules: FormsModuleHttpClientModuleAppRoutingModule.
– customer.ts: class Customer (id, firstName, lastName)
– customer.service.ts: Service for Http Client methods
– app-routing.module.ts: Routing configuration

Create Service & Components

On Project folder, 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

App Module

app.module.ts

Add Router

app-routing.module.ts

AppComponent HTML for routing:
app.component.html

Data Model

Create new file named customer.ts:

Data Service

customer.service.ts

Components

List of Customers

customers-list/customers-list.component.ts

customers-list/customers-list.component.html

Customer Details

customer-details/customer-details.component.ts

customer-details/customer-details.component.html

Create Customer

create-customer/create-customer.component.ts

create-customer/create-customer.component.html

Search Customers

search-customers/search-customers.component.ts

search-customers/search-customers.component.html

Run & Check Results

– 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-8-example-crud-mysql-add-customer

Show Customers:

spring-boot-angular-8-example-crud-mysql-show-customers

Click on Active button to update Customer status:

spring-boot-angular-8-example-crud-mysql-update-customers

Search Customers by Age:

spring-boot-angular-8-example-crud-mysql-search-customers

Delete a Customer:

spring-boot-angular-8-example-crud-mysql-delete-customer

Delete All Customers:

spring-boot-angular-8-example-crud-mysql-delete-all-customers

Source Code

server-SpringBootRestApiMySQL
client-Angular8SpringBoot

By grokonez | February 25, 2019.



Related Posts


Got Something To Say:

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

*