Angular 11 + Spring Boot + MongoDB example: CRUD Application
Tags: Spring Boot, Angular, Spring Boot 2, Angular 11, Mongodb

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

using button delete the Tutorial using Delete button

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.

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 .

is an interface that extends MongoRepository for CRUD methods and custom finder methods. It will be autowired in . TutorialController is a RestController which has request mapping methods for RESTful requests such as: getAllTutorials, createTutorial, updateTutorial, deleteTutorial, findByPublished…

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