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:
- 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 objects:
- Click on Edit button to update an object:
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
- Search Tutorials by title:
- Check MongoDB Database:
Full-stack MEAN CRUD App Architecture
We're gonna build the application with following architecture:
– 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)