Angular 6 HttpClient Crud + Node.js Express Sequelize + MySQL

Tags: angular6, node, mysql
Published: 2021-03-31 15:59:28

Angular 6 HttpClient Crud + Node.js Express Sequelize + MySQL - Get/Post/Put/Delete RestAPIs

https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-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 <code>GET/POST/PUT/DELETE</code> requests from Angular 6 Client to MySQL with NodeJs/Express RestAPIs using Sequelize ORM.

Related posts:
- <a href="https://grokonez.com/node-js/sequelize-orm-build-crud-restapis-with-nodejs-express-sequelize-mysql">Sequelize ORM – Build CRUD RestAPIs with NodeJs/Express, Sequelize, MySQL</a>
- <a href="https://grokonez.com/frontend/angular/angular-6/nodejs-restapis-angular-6-httpclient-get-post-put-delete-requests-bootstrap-4">Node.js/Express RestAPIs – Angular 6 HttpClient – Get/Post/Put/Delete requests + Bootstrap 4</a>

<!--more-->
<h2>Technologies</h2>
<ul>
<li>Angular 6</li>
<li>RxJS 6</li>
<li>Bootstrap 4</li>
<li>Visual Studio Code – version 1.24.0</li>
<li>Nodejs – v8.11.3</li>
<li>Sequelize</li>
<li>MySQL</li>
</ul>
<h2>Overview</h2>
<h3>Demo</h3>
<iframe width="853" height="480" src="https://www.youtube.com/embed/4qxHwuUtkjI?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<h3>Goal</h3>
We create 2 projects:

– Angular Client Project:

<img src="https://grokonez.com/wp-content/uploads/2018/07/angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql-angular-6-client-project-structure.png" alt="angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-project-structure" width="206" height="527" class="alignnone size-full wp-image-13484" />

– Node.js RestAPIs project:

<img src="https://grokonez.com/wp-content/uploads/2018/07/angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql-nodejs-project-structure.png" alt="angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +nodejs-project-structure" width="229" height="336" class="alignnone size-full wp-image-13485" />

<strong>UserCase</strong>

Start Node.js server -> Logs:

<pre><code class="language-javascript">
> 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');
</code></pre>

– Angular client retrieve all customers from Node.js RestAPIs:

<img src="https://grokonez.com/wp-content/uploads/2018/07/angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql-angular-6-client-retrieve-all-customeres.png" alt="angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-retrieve-all-customeres" width="404" height="383" class="alignnone size-full wp-image-13486" />

– Angular client update a customer -> Change the <code>firstname</code> of first customer: <em>‘Joe’</em> to <em>‘Robert’</em>.

<img src="https://grokonez.com/wp-content/uploads/2018/07/angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql-angular-6-client-edit-customer.png" alt="angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-edit-customer" width="429" height="504" class="alignnone size-full wp-image-13487" />

-> result:

<img src="https://grokonez.com/wp-content/uploads/2018/07/angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql-update-customer.png" alt="angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +update-customer" width="417" height="283" class="alignnone size-full wp-image-13488" />

– Delete <em>‘Peter’</em> customer:

<img src="https://grokonez.com/wp-content/uploads/2018/07/angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql-delete-customer.png" alt="– Delete &lt;em&gt;‘Peter’&lt;/em&gt; customer:" width="426" height="279" class="alignnone size-full wp-image-13489" />

– Add a new customer:

<img src="https://grokonez.com/wp-content/uploads/2018/07/angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql-add-customer.png" alt="angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql + add-customer" width="419" height="494" class="alignnone size-full wp-image-13490" />

-> result:

<img src="https://grokonez.com/wp-content/uploads/2018/07/angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql-submmit-customer-successfully.png" alt="angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +submmit-customer-successfully" width="422" height="282" class="alignnone size-full wp-image-13491" />

– Check final customer’s list:

<img src="https://grokonez.com/wp-content/uploads/2018/07/angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql-final-check.png" alt="angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +final-check" width="413" height="367" class="alignnone size-full wp-image-13492" />


https://grokonez.com/frontend/angular/angular-6/angular-6-httpclient-node-js-express-sequelize-mysql-get-post-put-delete-restapis