Angular 11 + Node.js + PostgreSQL: CRUD example with Express Rest Apis

In this tutorial, I will show you how to build a full-stack (Angular 11 + Node.js + Express + PostgreSQL) example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HTTPClient.

Angular 11 + Node.js + PostgreSQL CRUD example

We will build a full-stack Tutorial Application in that:

• Tutorial has id, title, description, published status.
• User can create, retrieve, update, delete Tutorials.
• There is a search box for finding Tutorials by title.
• Here are screenshots of the example.

– Add an object:

– Retrieve all Tutorials:

– Click on Edit button to update a Tutorial:

On this Page, you can:

• change status to Published using Publish button
• delete the Tutorial using Delete button
• update the Tutorial details with Update button

– Search Tutorials by title:

Full-stack CRUD App Architecture

We’re gonna build the application with following architecture:

– Node.js Express exports REST APIs & interacts with PostgreSQL Database using Sequelize ORM.
– Angular 11 Client sends HTTP Requests and retrieves HTTP Responses using HTTPClient, consume data on the components. Angular Router is used for navigating to pages.

Node.js Express back-end

These are APIs that Node.js Express App will export:

• POST /api/tutorials create new Tutorial
• GET /api/tutorials retrieve all Tutorials
• GET /api/tutorials/:id retrieve a Tutorial by :id
• PUT /api/tutorials/:id update a Tutorial by :id
• DELETE /api/tutorials/:id delete a Tutorial by :id
• DELETE /api/tutorials delete all Tutorials
• GET /api/tutorials?title=[keyword] find all Tutorials which title contains keyword

– db.config.js exports configuring parameters for PostgreSQL connection & Sequelize.
– Express web server in server.js where we configure CORS, initialize & run Express REST APIs.
– Next, we add configuration for PostgreSQL database in models/index.js, create Sequelize data model in models/tutorial.model.js.
– Tutorial controller in controllers.
– Routes for handling all CRUD operations (including custom finder) in tutorial.routes.js.

Angular 11 front-end

– The App component is a container with router-outlet. It has navbar that links to routes paths via routerLink.
– TutorialsList component gets and displays Tutorials.
– Tutorial component has form for editing Tutorial's details based on :id.
– AddTutorial component has form for submission new Tutorial.
– These Components call TutorialService methods which use Angular HTTPClient to make HTTP requests and receive responses.

Video

This is our Angular + Node.js PostgreSQL application demo and brief instruction, running with Express Rest Apis:

In the video, we use Angular 10, but the UI and logic are the same as this Angular version 11.

For more details, implementation and Github, please visit:
https://bezkoder.com/angular-11-node-js-express-postgresql/

Further Reading

• Run both projects in one place:
  How to Integrate Angular with Node.js Restful Services

• Security:
  Angular + Node.js Express: JWT Authentication & Authorization example

• Server side Pagination with Node.js and Angular

• Or Serverless with Firebase:

Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase

Angular 11 Firestore CRUD example | AngularFireStore