Angular 6 HttpClient Crud + Node.js Express Sequelize + MySQL - Get/Post/Put/Delete RestAPIs
Sequelize is a promise-based ORM for Node.js v4 and later. In the tutorial, we will show how to GET/POST/PUT/DELETE requests from Angular 6 Client to MySQL with NodeJs/Express RestAPIs using Sequelize ORM.
Related posts:
- Sequelize ORM – Build CRUD RestAPIs with NodeJs/Express, Sequelize, MySQL
- Node.js/Express RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4
Technologies
- Angular 6
- RxJS 6
- Bootstrap 4
- Visual Studio Code – version 1.24.0
- Nodejs – v8.11.3
- Sequelize
- MySQL
Overview
Demo
Goal
We create 2 projects:
– Angular Client Project:
– Node.js RestAPIs project:
UserCase
Start Node.js server -> Logs:
> node server.js
App listening at http://:::8080
Executing (default): DROP TABLE IF EXISTS `customers`;
Executing (default): DROP TABLE IF EXISTS `customers`;
Executing (default): CREATE TABLE IF NOT EXISTS `customers` (`id` INTEGER NOT NULL auto_increment , `firstname` VARCHAR(255), `lastname` VARCHAR(255), `age` INTEGER, `createdAt` DATETIME NOT NULL, `updatedAt` DATETIME NOT NULL, PRIMARY KEY (`id`)) ENGINE=InnoDB;
Executing (default): SHOW INDEX FROM `customers`
Drop and Resync with { force: true }
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (1,'Joe','Thomas',36,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (2,'Peter','Smith',18,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (3,'Lauren','Taylor',31,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (4,'Mary','Taylor',24,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (5,'David','Moore',25,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (6,'Holly','Davies',27,'2018-07-06 13:01:05','2018-07-06 13:01:05');
Executing (default): INSERT INTO `customers` (`id`,`firstname`,`lastname`,`age`,`createdAt`,`updatedAt`) VALUES (7,'Michael','Brown',45,'2018-07-06 13:01:05','2018-07-06 13:01:05');
– Angular client retrieve all customers from Node.js RestAPIs:
– Angular client update a customer -> Change the firstname of first customer: ‘Joe’ to ‘Robert’.
-> result:
– Delete ‘Peter’ customer:
– Add a new customer:
-> result:
– Check final customer’s list:
Top comments (0)