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 JPA for interacting with MongoDB database. Front-end side is made with Angular 11, HTTPClient & Router.
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:
– 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:
– This is
tutorials collection on the MongoDB database:
Angular 11 & Spring Boot MongoDB Architecture
This is the application architecture we will build:
– 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 Back-end
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
- PUT /api/tutorials/[id]: update a Tutorial by
- DELETE /api/tutorials/[id]: delete a Tutorial by
- DELETE /api/tutorials: delete all Tutorials
- GET/api/tutorials?title=[keyword]: find all Tutorials which title contains
We make CRUD operations & finder methods with Spring Data MongoDB’s
- Java 8
- Spring Boot 2 (with Spring Web MVC, Spring Data MongoDB)
- Maven 3.6.1
Tutorialdata model class corresponds to entity and table tutorials.
TutorialRepositoryis an interface that extends MongoRepository for CRUD methods and custom finder methods. It will be autowired in
TutorialControlleris a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished…
- Configuration for Spring Data MongoDB is in application.properties.
- pom.xml contains dependencies for Spring Boot Web MVC and Spring Data MongoDB.
For more details and implementation please visit: