https://loizenai.com/angular-11-springboot-crud-mysql-example/
Angular 11 SpringBoot CRUD MySQL Example
In the tutorial, I introduce how to create an “SpringBoot Angular 11 MySQL CRUD Example” with POST/GET/PUT/DELETE requests to SpringBoot RestAPIs.
– Design overview system by Architecture Diagram that includes: Angular Client, SpringBoot RestAPIs, and MySQL database.
– Implement Angular CRUD Client with Angular built-in HttpClient to communicate with server side.
– Implement SpringBoot RestAPIs that gets data from MySQL using Spring Data JPA and returns back data as Json format to requested Angular Client.
– SpringBoot Project Structure
Angular 11 CRUD Application is designed with 3 main layers:
Angular 11 CRUD Application defines 3 components, 2 services, 1 routers, and 2 data models:
– Components:
add-customer component is used to add a new customer to system
list-customer component is used to show all customers on view pages, delete a customer and update a customer
message component is used to define a view to show logging message on browser
– Services:
customer.service.ts defines POST/GET/PUT/DELETE HTTP requests to SpringBoot RestAPIs with the built-in Angular HttpClient.
message.service.ts defines an array storage to log all messages when Angular CRUD App running
– Router: app-routing.module.ts defines how to map a corresponding Angular component with an URL.
– Models:
customer.ts defines the main data model of our application.
message.ts defines the response data model between SpringBoot and Angular application.
– Add new Customer: from Angular to SpringBoot and save to MySQL.
– List All Customers: from Angular calls SpringBoot RestAPI to get customer from MySQL.
– Details a Customer: from Angular calls get http request from SpringBoot RestAPI to get a record in MySQL database
– Update a Customer: from Angular calls a put http request from SpringBoot RestAPI to update a record in MySQL database.
– Delete a Customer: from Angular calls a delete http request from SpringBoot RestAPI to delete a record in MySQL database.
– Check database records: do a get request from Angular to SpringBoot RestAPI.
#angular #springboot #crud #mysql