Angular 11 + Node.js + PostgreSQL: CRUD example with Express Rest Apis
Tags: angular, node, javascript, webdev
Published: 2020-12-23 01:57:49

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:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fm2nl533a1qpwevvlwlm.png)

– Retrieve all Tutorials:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/qpikazoosv8r870kl1tf.png)

– Click on **Edit** button to update a Tutorial:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/dht8fqmnivozb2zos4dp.png)

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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/r0v9g8dfovb1ajmadr1t.png)

– Search Tutorials by title:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/ovhsojakx1vkhb7djrvs.png)

## Full-stack CRUD App Architecture
We’re gonna build the application with following architecture:

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s5etvyyb2p6w7z6eococ.png)

– 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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/u5kz0unmg6o345soj5ie.png)

– _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

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/91a67qpopseqa4gb5vac.png)

– 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.

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/s9xhhs2o5cm2bzg3fl7y.png)

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

{% youtube YXfixWQApDA %}

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/](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](https://bezkoder.com/integrate-angular-10-node-js/)

- Security:
[Angular + Node.js Express: JWT Authentication & Authorization example](https://bezkoder.com/node-js-angular-11-jwt-authentication/)

- [Server side Pagination with Node.js and Angular](https://bezkoder.com/server-side-pagination-node-js-angular/) 

![Alt Text](https://dev-to-uploads.s3.amazonaws.com/i/fskluepc3kov58xj761f.png)

- Or Serverless with Firebase:

[Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase](https://bezkoder.com/angular-11-firebase-crud/)

[Angular 11 Firestore CRUD example | AngularFireStore](https://bezkoder.com/angular-11-firestore-crud-angularfirestore/)