[FullStack] [Debug MODE] Angular 10 + SpringBoot + MySQL CRUD RestAPIs Application Example
Angular 10 + SpringBoot + MySQL CRUD RestAPIs Application Example
#angular10 #springboot #restapis #sprinbootcrudapplication
#angular8crud #angularhttpclient #angularspringbootmysql
Article: Angular 10 CRUD Application + SpringBoot + MySQL/PostgreSQL RestAPIs – Angular HttpClient Post/Get/Put/Delete
https://loizenai.com/angular-crud-app...
In the tutorial, I introduce how to create an Angular 10/8 + SpringBoot + MySQL CRUD application to POST/GET/PUT/DELETE requests to SpringBoot RestAPIs application with MySQL database.
I. How to build Angular CRUD Application with SpringBoot FullStack?
1. SpringBoot Backend Architecture
For building RestAPIs in SpringBoot application, we use Spring MVC Web.
For interacting with database MySQL/PostgreSQL, we use Spring JPA.
We implement RestAPI’s URL in RestAPIController.java file to process bussiness logic.
For manipulating database’s records, we define a JPA model for mapping field data and use a JPA CRUD repository to do CRUD operation with MySQL/PostgreSQL.
2. Angular Frontend Architecture
Angular 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.
II. Video Guide-Line Structure
1. Introduce Overview
0:00 - Demo Overall Angular SpringBoot CRUD Application
0:36 - Introduce Overall Article
1:45 - Download sourcecode SpringBoot + Angular
2. SpringBoot project and Debug
2:10 - Import SpringBoot project to Eclipse
Start Review SpringBoot Sourcecode
2:30 - application.properties file
2:35 - Customer.java model file
2:42 - CustomerRepository.java file
2:45 - CustomerServices.java file
2:51 - RestAPIController.java file
3:11 - pom.xml file
3:20 - Start Debug SpringBoot project
3:41 - Start DEBUG Post a Customer to SpringBoot
5:08 - start Debug Retrieve all Customers from MySQL database
5:41 - Start DEBUG get a Customer by given ID
6:15 - Start debug PUT (update) a Customer
7:31 - Start debug DELETE RestAPI - delete a Customer with a given ID
3. Angular Project and Full Stack Debug Mode
8:08 - Start Extract Sourcecode Angular CRUD project
8:14 - Install needed dependencies for Angular Project
8:25 - Import Angular Project to Visual Studio Code
8:40 - Start review Angular Project Code
8:43 - Review Add Customer Component coding
9:02 - Review List Customer Component Coding
9:26 - Review Message Component Coding
9:31 - Review Customer Service Coding
9:46 - Review index.html coding
9:56 - Start Angular Project
10:02 - Start review overall Angular CRUD Project features
12:37 - Start FullStack Debug Angular Coding + SpringBoot coding
13:00 - Debug Post a Customer from Angular CRUD app to SpringBoot RestAPIs
15:15 - Start Debug Retrieve all Customer on MySQL from Angular CRUD app via SpringBoot RestAPIs
16:03 - Start DEBUG Update/PUT a Customer to MySQL from Angular CRUD app via SpringBoot RestAPIs PUT request
17:46 - Start DEBUG Delete a Customer with given ID from Angular CRUD app via RestAPIs
III. Sourcecode
https://loizenai.com/angular-crud-app...
IV. Related post
1. Spring Boot Security JWT Authentication Example – MySQL/PostgreSQL + Spring JPA + RestAPIs
https://loizenai.com/spring-boot-secu...
2. Angular Spring Boot JWT Authentication Example – Angular 6, 8, 9 + Spring Security + MySQL/PostgreSQL
https://loizenai.com/angular-spring-b...
3. Angular Django CRUD RestAPIs Application Examples – Fullstack Angular 10 + Django + MySQL/PostgreSQL Tutorial
https://loizenai.com/angular-django-c...
Article: Angular 10 CRUD Application + SpringBoot + MySQL/PostgreSQL RestAPIs – Angular HttpClient Post/Get/Put/Delete
https://loizenai.com/angular-crud-app...
------------------
@Copyright by: https://loizenai.com
Youtube: loizenai
Email: [email protected]