DEV Community

loading...
Cover image for Angular 11 Node.js Mysql Crud Example

Angular 11 Node.js Mysql Crud Example

loizenai profile image loizenai ・4 min read

Angular 11 Node.js Mysql Crud Example

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

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.

Architecture for Angular 11 Node.js MySQL CRUD Example Fullstack

Architecture for Angular 11 Node.js MySQL CRUD Example 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.

Nodejs CRUD RestAPIs Design

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.

Backend Nodejs Build CRUD Application – Project Structure

  • 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

Angular 11 CRUD Design

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

Angular Nodejs CRUD Application – Frontend Design Architecture

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

Project Goal – Angular 11 Nodejs CRUD Example

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

– Add new Customer:

Angular 11 Nodejs CRUD App – Add New Customers

– List All Customers:

Angular 11 Nodejs CRUD Application – List All Customers

– Details a Customer:

Angular 11 Nodejs CRUD App – Details a Customer

– Update a Customer:

Angular 11 Nodejs CRUD Application – Update a Customer

– Delete a Customer:

Angular 11 Nodejs CRUD App – Delete a Customer successfully

– Check database records:

Angular 11 Nodejs CRUD App – Check Database Records

Video Guide – Angular 11 Node.js Mysql Crud Example

https://youtu.be/vytbP5vdh2U

Related post

Discussion (0)

pic
Editor guide