Spring Boot + MongoDB + Angular 11: CRUD example
Tags: spring, mongodb, angular, springboot
Published: 2020-12-18 12:49:26

In this tutorial, we will learn how to build a full stack Angular 11 + Spring Boot + MongoDB example with a CRUD App. The back-end server uses Spring Boot with Spring Web MVC for REST Controller and Spring Data MongoDB for interacting with MongoDB database. 
Front-end side is made with Angular 11, HTTPClient & Router.

Original Post: [https://bezkoder.com/angular-11-spring-boot-mongodb/](https://bezkoder.com/angular-11-spring-boot-mongodb/)

## Angular 11 + Spring Boot + MongoDB CRUD example
We will build a full-stack Tutorial Application in that:

- Each Tutorial has id, title, description, published status.
- We can create, retrieve, update, delete Tutorials.
- We can also find Tutorials by title.
- The images below shows screenshots of our System.

– Add a Tutorial:

![angular-11-spring-boot-mongodb-example-crud-create-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/g68kqdasm8gjaf9zzw3d.png)

– Retrieve all Tutorials:

![angular-11-spring-boot-mongodb-example-crud-retrieve-all-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/kyga56x2fbt0u3cphz8b.png)

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

![angular-11-spring-boot-postgresql-example-crud-retrieve-one-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/a1z7pzktl7nph4lbw82c.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

![angular-11-spring-boot-postgresql-example-crud-update-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/dnqyltlcefp9nkp155q9.png)

– Search Tutorials by title:

![angular-11-spring-boot-mongodb-example-crud-search-tutorial](https://dev-to-uploads.s3.amazonaws.com/i/zus6rba648rv713k2zdz.png)

– This is `tutorials` collection on the MongoDB database:

![angular-11-spring-boot-mongodb-example-crud-database-collection](https://dev-to-uploads.s3.amazonaws.com/i/50px0b5binusklr8wlgg.png)

## Angular 11 & Spring Boot MongoDB Architecture
This is the application architecture we will build:

![angular-11-spring-boot-mongodb-example-crud-architecture](https://dev-to-uploads.s3.amazonaws.com/i/z0z28gp4nozmjbetu0nz.png)

– Spring Boot exports REST Apis using Spring Web MVC & interacts with MongoDB Database using Spring Data MongoDB.
– Angular 11 Client sends HTTP Requests and retrieve HTTP Responses using **axios**, shows data on the components. We also use Angular Router for navigating to pages.

## Spring Boot Server

These are APIs that Spring Boot 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

## Angular 11 Client

![angular-11-spring-boot-mongodb-example-crud-client-overview](https://dev-to-uploads.s3.amazonaws.com/i/7q5g993q3kuabp2uzxip.png)

For more details, implementation and Github, please visit:
[https://bezkoder.com/angular-11-spring-boot-mongodb/](https://bezkoder.com/angular-11-spring-boot-mongodb/)

Other databases:
- [Angular 11 + Spring Boot + MySQL](https://bezkoder.com/angular-11-spring-boot-crud/)
- [Angular 11 + Spring Boot + PostgreSQL](https://bezkoder.com/angular-11-spring-boot-postgresql/)

More Practice:
– [Angular + Spring Boot: JWT Authentication & Authorization example](https://bezkoder.com/angular-11-spring-boot-jwt-auth/)

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/)