Angular 11 Node.js PostgreSQL Crud Example
angular
39
nodejs
106
Postgresql
23
CRUD
23
Male avatar

loveprogramming viết ngày 24/12/2020

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

Angular 11 Node.js PostgreSQL Crud Example

Angular 11 Node.js PostgreSQL Crud Example

Tutorial: “Angular 11 Node.js PostgreSQL Crud Example – using Express and Sequelize ORM”

In the tutorial, I introduce how to build an Angular 11 Node.js PostgreSQL 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 PostgreSQL CRUD Example Fullstack

Fullstack Angular 11 Nodejs CRUD Application – Overview Architecture

  • We build backend Nodejs Application that provides RestAPIs for POST/GET/PUT/DELETE Customer entities and store them in PostgreSQL/PostgreSQL database.
  • We implement Angular 11 Application that use Angular 11 HTTPClient to interact (call/receive requests) with SpringBoot backend and display corresponding page view in browser.

Nodejs CRUD RestAPIs Design

In the tutorial “Angular 11 Node.js PostgreSQL Crud Example”, we create a Nodejs CRUD RestAPI with below diagram design:

Nodejs-Build-CRUD-Application-Architecture-Overview

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 PostgreSQL/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 PostgreSQL/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 – Angular 11 Node.js PostgreSQL Crud Example

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

Angular 11 Nodejs CRUD Application – Frontend Design Architecture

Angular 11 CRUD Application is designed with 3 main layers:

  • Service Layer is used to define Angular 11 Common Services and HttpClient Services to interact with RestAPIs
  • Component Layer is used to define Angular 11 Components to show views in Browser for interacting with Users
  • Router Layer is used to route URLs mapping with the corresponding Angular 11 Components

Angular 11 Project Structure in the tutorial: “Angular 11 Node.js PostgreSQL Crud Example”

Angular 11 Nodejs CRUD Application – 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 11 HttpClient.
  • message.service.ts defines an array storage to log all messages when Angular 11 CRUD App running

– Router: app-routing.module.ts defines how to map a corresponding Angular 11 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 11 application.

Project Goal – Angular 11 Node.js PostgreSQL Crud Example

Here is the overview project goal of the tutorial “Angular 11 Express PostgreSQL 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 PostgreSQL Crud Example

https://youtu.be/vytbP5vdh2U

Related posts

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

Male avatar

loveprogramming

126 bài viết.
60 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
Male avatar
1 0
Tutorial Link: (Link) (Ảnh) Django is a Pythonbased free and opensource web framework that follows the modeltemplateview architectural pattern. A...
loveprogramming viết 5 tháng trước
1 0
Male avatar
1 0
Angular Spring Boot jwt Authentication Example Github https://loizenai.com/angularspringbootjwt/ (Ảnh) Tutorial: ” Angular Spring Boot jwt Authe...
loveprogramming viết 4 tháng trước
1 0
Bài viết liên quan
Male avatar
0 0
https://grokonez.com/springframework/springmvc/angular4springbootcassandracrudexample no_toc]In this tutorial, grokonez shows you Angular Http Cli...
loveprogramming viết 24 ngày trước
0 0
White
25 0
(Ảnh) Slow query là gì? Khi các câu query chậm hơn một thời gian nhất định tùy theo bạn định nghĩa, ví dụ chậm hơn 50ms, thì các câu query đó đư...
Triet Pham viết gần 4 năm trước
25 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
126 bài viết.
60 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!