Link: https://loizenai.com/angular-11-node-js-mysql-crud-example/

Tutorial: “Angular 11 Node.js Mysql Crud Example – using Express and Sequelize ORM” In the tutorial, I introduce how to build an Angular 11 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.

• 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.

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.

• config package is used to configure Sequelize and MySQL/PostgreSQL database environment
• models package is used to define a Sequelize model to interact with database
• routers package is used to define Rest APIs’ URL
• controllers is used to implement business logic to processing each RestAPIs
• views folder is used to implement HTML view pages
• resources/js folder is used to implement JQuery Ajax to Post/Get/Put/Delete RestAPIs

Now I explain more about architecture of Angular application in the tutorial “Angular Express MySQL CRUD Example”:

Angular 11 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 11 Project Structure:

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.

Here is the overview project goal of the tutorial “Angular Express MySQL CRUD Example”:

– Add new Customer:

– List All Customers:

– Details a Customer:

– Update a Customer:

– Delete a Customer:

– Check database records:

https://youtu.be/vytbP5vdh2U

• Angular 9 Node.js MySQL CRUD Example
• Angular 8 Node.js MySQL CRUD Example
• Angular 10 Node.js MySQL CRUD Example
• Angular 10 Nodejs PostgreSQL CRUD Example
• Angular 8 Nodejs PostgreSQL CRUD Example
• Angular 9 Node.js PostgreSQL CRUD Example
• Angular 11 Nodejs CRUD MySQL Example