Angular 10 Node js MySQL CRUD Example – Express RestAPIs + Sequelize ORM
#angular10 #node.js #crud # sequelizeorm
#expressrestapis #mysql #angularnodejsmysqlexample
Angular 10 Node.js MySQL CRUD Example – Express RestAPIs + Sequelize ORM
Tutorial Link:
https://loizenai.com/angular-10-node-...
In the tutorial, I introduce how to build an Angular 10 Node.js MySQL CRUD Example RestAPIs Fullstack Project with the help of Express Web Framework and Sequelize ORM for POST/GET/PUT/DELETE requests with step by step coding examples.
I. Architecture for Angular 10 Node.js MySQL CRUD Fullstack
We build backend Nodejs Application that provides RestAPIs for POST/GET/PUT/DELETE Customer entities and store them in MySQL/PostgreSQL database.
We implement Angular Application that use Angular HTTPClient to interact (call/receive requests) with SpringBoot backend and display corresponding page view in browser.
II. NODEJS CRUD RESTAPIS DESIGN
We have 4 main blocks for backend Node.js application:
For building RestAPIs in Node.js application, we use Express framework.
For interacting with database MySQL/PostgreSQL, we use Sequelize ORM.
We define APIs URL in router.js file
We implement how to process each API URL in controller.js file
We use Bootstrap and JQuery Ajax to implement frontend client.
III. ANGULAR CRUD DESIGN
Angular CRUD Application is designed with 3 main layers:
Service Layer is used to define Angular Common Services and HttpClient Services to interact with RestAPIs
Component Layer is used to define Angular Components to show views in Browser for interacting with Users
Router Layer is used to route URLs mapping with the corresponding Angular Components
Angular CRUD Application defines 3 components, 2 services, 1 routers, and 2 data models:
– Components:
1. add-customer component is used to add a new customer to system
2. list-customer component is used to show all customers on view pages, delete a customer and update a customer
3. message component is used to define a view to show logging message on browser
– Services:
1. customer.service.ts defines POST/GET/PUT/DELETE HTTP requests to SpringBoot RestAPIs with the built-in Angular HttpClient.
2. 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:
1. customer.ts defines the main data model of our application.
2. message.ts defines the response data model between SpringBoot and Angular application.
IV. Video Structure
0:00 - Introduce Angular Nodejs MySQL CRUD Demo
0:40 - Overview Angular Nodejs MySQL CRUD Article
1:19 - Download Sourcecode
Nodejs CRUD RestAPIs Project
1:34 - Extract Nodejs Sourcecode
1:39 - Install needed dependencies for Nodejs project
1:46 - Import Nodejs folder to Visual Studio Code
1:55 - Review server.js file
2:03 - Review db.config.js file
2:11 - Review env.js file
2:15 - customer.model.js file
2:23 - router.js file
2:28 - controller.js file
2:38 - Start Nodejs Debug
3:06 - Debug Nodejs Post RestAPIs from Postman Client
4:15 - Debug GET RestAPI- retrieve all Customer from PostMAN Client
4:52 - Debug PUT RestAPI - start update a Customer from PostMan Client
6:03 - Debug DELETE RestAPI - start remove a Customer by a given id
Angular Project
6:48 - Install needed dependencies for Angular project
6:54 - Start Review Angular 10 CRUD RestAPIS Project Structure
7:48 - Start Running DEBUG Angular project
7:50 - Start Review Integration between Angular 10 CRUD application with Nodejs RESTAPIS
Integration Debug Full Flow:
9:43 - Explore Sourcecode of Angular for Debug in Browser
9:53 - Start Debug POST a Customer from Angular to MySQL via Nodejs project
12:31 - Start Debug UPDATE a Customer Angular to MySQL via Nodejs PUT RestAPIs
14:45 - start Delete a Customer from Angular Client to MySQL via Nodejs DELETE RestAPIs
V. Related posts
1. Angular Django CRUD RestAPIs Application Examples – Fullstack Angular 10 + Django + MySQL/PostgreSQL Tutorial
https://loizenai.com/angular-django-c...
2. Angular CRUD Application with SpringBoot and MySQL/PostgreSQL RestAPIs – Fullstack Angular 10-9-8 HttpClient Post/Get/Put/Delete
https://loizenai.com/angular-crud-app...
3. Build Angular Table Pagination Filtering Sorting with SpringBoot RestAPIs + Bootstrap Example – Angular 10-9-8-6 Tutorial
https://loizenai.com/build-angular-ta...
VI. Sourcecode
https://loizenai.com/angular-10-node-...
---------------------------------------
@Copyright by https://loizenai.com
youtube loizenai