Angular 11 Node.js PostgreSQL Crud Example
angular
22
nodejs
97
Postgresql
17
CRUD
9
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

30 bài viết.
32 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Bài viết liên quan
White
0 3
Các @Input ở component con chỉ khởi tạo giá trị ban đâu, do đó, các biến ở component cha thay đổi thì các @Input ở component con sẽ không thay đổi ...
Vani viết gần 3 năm trước
0 3
White
0 0
Thực Hành Content Projection, Lifecycle Liên Quan và QueryList Changes Event Trong Angular Bài viết này là bài tiếp theo trong series "Thử Nghiệm ...
Tiep Phan viết gần 4 năm trước
0 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

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


Male avatar
{{userFollowed ? 'Following' : 'Follow'}}
30 bài viết.
32 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á!