Angular 11 + Spring Boot + MongoDB example: CRUD Application

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

Overview

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

We make CRUD operations & finder methods with Spring Data MongoDB’s MongoRepository.

Technology

• Java 8
• Spring Boot 2 (with Spring Web MVC, Spring Data MongoDB)
• MongoDB
• Maven 3.6.1

Project Structure

• Tutorial data model class corresponds to entity and table tutorials.
• TutorialRepository is an interface that extends MongoRepository for CRUD methods and custom finder methods. It will be autowired in TutorialController.
• TutorialController is 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:
https://bezkoder.com/angular-11-spring-boot-mongodb/

Source code: https://github.com/bezkoder/spring-boot-mongodb-angular-crud