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

Goal

We create 2 projects:

– Angular Client Project:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-project-structure

– Node.js RestAPIs project:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +nodejs-project-structure

UserCase

Start Node.js server -> Logs:

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

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-retrieve-all-customeres

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

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-edit-customer

-> result:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +update-customer

– Delete ‘Peter’ customer:

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

– Add a new customer:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql + add-customer

-> result:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +submmit-customer-successfully

– Check final customer’s list:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +final-check

-> Sequelize Logs:

-> MySQL records:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql + mysql-records

Node.js/Express RestAPIs

Node.js exposes 5 RestAPIs as below:

  • router.post(‘/api/customers’, customers.create);
  • router.get(‘/api/customers’, customers.findAll);
  • router.get(‘/api/customers/:id’, customers.findOne);
  • router.put(‘/api/customers’, customers.update);
  • router.delete(‘/api/customers/:id’, customers.delete);

– Configure cross-origin for Angular-Client which running at port: 4200.

Angular 6 HttpClient

Use Angular HttpClient APIs to do Get/Post/Put/Delete requests to Node.js RestAPIs:

Practice

Node.js Express RestAPIs
Setting up NodeJs/Express project

Following the guide to create a NodeJS/Express project.

Install Express, Sequelize, MySQL, and Cors:

– Express is one of the most popular web frameworks for NodeJs which is built on top of Node.js http module, and adds support for routing, middleware, view system etc.
– Cors is a mechanism that uses HTTP headers to tell a browser to let a web application running at one origin (domain) have permission to access selected resources from a server at a different origin.
– Sequelize is a promise-based ORM for Node.js v4 and up. It supports the dialects PostgreSQL, MySQL …

-> package.json file:

Setting up Sequelize MySQL connection

– Create ‘./app/config/env.js’ file:

– Setup Sequelize-MySQL connection in ‘./app/config/db.config.js’ file:

Create Sequelize model

Create file ./app/model/customer.model.js file:

Express RestAPIs

Route ->
Define Customer’s routes in ‘./app/controller/customer.route.js’ file:

Controller
Implement Customer’s controller in ‘./app/controller/customer.controller.js’ file:

Server.js

server.js ->

Angular 6 Client
Data Model

customer.ts ->

Configure AppModule

In the developed application, we use:

  • Angular Forms -> for building form
  • HttpClient -> for http Get/Post/Put/Delete requests
  • AppRouting -> for app routing

-> Modify AppModule app.module.ts:

HttpClient DataService

Implement CustomerService customer.service.ts with HttpClient for Get/Post/Put/Delete:

Angular Router

Implement App-Routing module app-routing.module.ts:

Router Outlet & Router Links

-> Questions:

  • How to show Componenets with Angular Routers? -> Solution: using Router Outlet
  • How to handle the routing that comes from user’s actions? (like clicks on anchor tag) -> Solution: using Router Link

-> We can achieve above functions by using Angular’s router-outlet and routerLink.

Modify the template file app.component.html of AppComponenet component as below:

Customer Component

Customer Component ->

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-retrieve-all-customeres

– Implement CustomerComponent class customer.component.ts:

– Implement the template customer.component.html :

Customer Detail Component

Customer Detail ->

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +angular-6-client-edit-customer

-> results:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +update-customer

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql + delete-customer

– Implement CustomerDetails class customer-details.component.ts:

– Implement CustomerDetailsComponent template customer-details.component.html :

We can change the value of ng-valid & ng-invalid for more visual feedback,
-> Create ./assets/forms.css file:

Add ./assets/forms.css file to index.html :

Add-Customer Component

AddCustomer Component ->

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql + add-customer

-> result:

angular-6-http-client-nodejs-express-restapis-sequelize-orm-mysql +submmit-customer-successfully
– Implement AddCustomerComponent class add-customer.component.ts:

– Implement the template add-customer.component.html:

SourceCode

Angular-6-Http-Client
Nodejs-Express-Sequelize-MySQL

By JavaSampleApproach | July 6, 2018.

Related Posts


Got Something To Say:

Your email address will not be published. Required fields are marked *

*