Angular 6 HttpClient + Node.js/Express RestAPIs + MariaDB example | Sequelize ORM CRUD APIs example

In this tutorial, we show you Angular 6 Http Client & Node.js/Express Server example that uses Sequelize ORM to do CRUD with MariaDB and Angular 6 as a front-end technology to make request and receive response.

Related posts:
Mongoose CRUD MongoDB – Angular 6 HttpClient Get/Post/Put/Delete – Node.js/Express RestAPIs
Angular 6 HttpClient – Upload Files/Download Files to MySQL with Node.js/Express RestAPIs – using Multer + Sequelize ORM
Angular 6 HttpClient – PostgreSQL – Node.js/Express Sequelize CRUD APIs – Post/Get/Put/Delete

Related Pages:

I. Technologies

– Java 1.8
– Maven 3.3.9
– Node.js/Express
– Sequelize ORM
– Angular 6
– RxJS 6
– MariaDB

II. Overview

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + overview architecture

1. Node.js Server

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + node.js-design-architecture

2. Angular 6 Client

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + angular-6-project-component-architecture

III. Practice

1. Project Structure

1.1 Node.js Server

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + node.js-project-structure

customer.model.js file corresponds to entity and table customer.
customer.controller.js is used to interact with MariaDB via CRUD APIs of Sequelize ORM.
customer.route.js is used to configure Express RestAPIs.
– Configuration for MariaDB Datasource and Sequelize ORM properties in env.js and db.config.js

1.2 Angular 6 Client

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + angular-6-project-structure

In this example, we focus on:
– 4 components: customers-list, customer-details, create-customer, search-customer.
– 3 modules: FormsModule, HttpClientModule, AppRoutingModule.
customer.ts: class Customer (id, firstName, lastName)
customer.service.ts: Service for Http Client methods

2. How to do

2.1 Node.js Server
2.1.1 Setup NodeJs/Express Project

Following the guide to create a NodeJS/Express project.
Install Sequelize & MariaDB:

-> package.json file:

2.1.2 Setup Sequelize MariaDB Connection

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

– Setup Sequelize-MariaDB connection in ./app/config/db.config.js file:

2.1.3 Sequelize Model

2.1.4 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:

2.1.5 Server.js

2.2 Angular 6 Client
2.2.0 Create Service & Components

Run commands below:
ng g s Customer
ng g c CreateCustomer
ng g c CustomerDetails
ng g c CustomersList
ng g c SearchCustomers
On each Component selector, delete app- prefix, then change tslint.json rules"component-selector" to false.

2.2.1 Model

customer.ts

2.2.2 CustomerService

customer.service.ts

2.2.3 Components

– CustomerDetailsComponent:
customer-details/customer-details.component.ts

customer-details/customer-details.component.html

– CustomersListComponent:
customers-list/customers-list.component.ts

customers-list/customers-list.component.html

– CreateCustomerComponent:
create-customer/create-customer.component.ts

create-customer/create-customer.component.html

– SearchCustomersComponent:
search-customers/search-customers.component.ts

search-customers/search-customers.component.html

2.2.4 AppRoutingModule

app-routing.module.ts

And AppComponent HTML for routing:
app.component.html

2.2.5 AppModule

app.module.ts

3. Run & Check Result

Run Node.js project with commandlines: npm start.
– Run the Angular App with command: ng serve.

– Open browser for url http://localhost:4200/:
Add Customer:

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + add-customer

Show Customers:

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + get-all-customer

Click on Active button to update Customer status:

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + update-customer

Search Customers by Age:

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + search-by-age

Delete a Customer:

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + delete-a-customer

Delete All Customers:

angular-6-crud-httpclient-nodejs-express-rest-api-sequelize-orm-crud-mariadb + delete-all

IV. Source Code

Nodejs-Express-Sequelizejs-MariaDB
Angular6SpringBoot-Client

By grokonez | August 19, 2018.



Related Posts


Got Something To Say:

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

*