DEV Community

Cover image for Angular 11 + Node.js + MongoDB: CRUD example with Express Rest Apis
bezkoder
bezkoder

Posted on

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

In this tutorial, I will show you how to make Angular 11 CRUD with MongoDB via Node.js Express. We're gonna build a full-stack (MEAN stack) CRUD Application in which, the back-end server uses Node.js + Express for REST APIs, front-end side is an Angular App with HTTPClient.

Full Article: https://bezkoder.com/angular-11-mongodb-node-js-express/

Angular 11 + Node.js + MongoDB CRUD example Overview

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

  1. Tutorial has id, title, description, published status.
  2. User can create, retrieve, update, delete Tutorials.
  3. There is a search box for finding Tutorials by title.

Here are screenshots of the example.

  • Add an object:

Alt Text

  • Retrieve all objects:

Alt Text

  • Click on Edit button to update an object:

Alt Text

On this Page, you can:

1- change status to Published using Publish button
2- delete the Tutorial using Delete button
3- update the Tutorial details with Update button

Alt Text

  • Search Tutorials by title:

Alt Text

  • Check MongoDB Database:

Alt Text

Full-stack MEAN CRUD App Architecture

We're gonna build the application with following architecture:

Alt Text

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

Video

This is brief instruction and demo for Angular + Node.js Express application running with MongoDB database.

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

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

Further Reading

Security:
Node.js + MongoDB: User Authentication & Authorization with JWT

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

Serverless with Firebase:

Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase
Angular 11 Firestore CRUD example | AngularFireStore

Top comments (0)