Angular 10 + Spring Boot + MongoDB example: full-stack CRUD Application

In this tutorial, I will show you way to build a full stack Angular 10 + Spring Boot + MongoDB example with a CRUD Application. 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 10, HTTPClient & Router.

More Practice: Spring Boot, MongoDB: JWT Authentication & Authorization example

Serverless with Firebase:
Angular 10 Firebase CRUD Realtime Database
Angular 10 Firestore CRUD with AngularFireStore


Angular 10 & 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 Tutorial:

angular-10-spring-boot-mongodb-crud-example-create

– Retrieve all Tutorials:

angular-10-spring-boot-mongodb-crud-example-retrieve

– Click on Edit button to update a Tutorial:

angular-10-spring-boot-mongodb-crud-example-update

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-10-spring-boot-mongodb-crud-example-update-successful

– Search Tutorials by title:

angular-10-spring-boot-mongodb-crud-example-search

– Check MongoDB Database:

angular-10-spring-boot-mongodb-crud-example-database

Angular 10 + Spring Boot + MongoDB Architecture

This is the application architecture we will build:

angular-10-spring-boot-mongodb-crud-example-architecture

– Spring Boot exports REST Apis using Spring Web MVC & interacts with MongoDB Database using Spring Data MongoDB
– Angular 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:

MethodsUrlsActions
POST/api/tutorialscreate new Tutorial
GET/api/tutorialsretrieve all Tutorials
GET/api/tutorials/:idretrieve a Tutorial by :id
PUT/api/tutorials/:idupdate a Tutorial by :id
DELETE/api/tutorials/:iddelete a Tutorial by :id
DELETE/api/tutorialsdelete 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.2.4 (with Spring Web MVC, Spring Data MongoDB)
  • MongoDB
  • Maven 3.6.1

Project Structure

angular-10-spring-boot-mongodb-example-server-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.

Implementation

You can find step by step to implement this Spring Boot Server Application in the post:
Spring Boot with MongoDB CRUD example using Spring Data

Angular 10 Front-end

Overview

angular-10-spring-boot-mongodb-example-front-end-overview

– The App component is a container with router-outlet. It has navbar that links to routes paths via routerLink.

TutorialsList component gets and displays Tutorials.
Tutorial component has form for editing Tutorial’s details based on :id.
AddTutorial component has form for submission new Tutorial.

– These Components call TutorialService methods which use Angular HTTPClient to make HTTP requests and receive responses.

Technology

  • Angular 10
  • Angular HTTPClient
  • Angular Router

Project Structure

angular-10-spring-boot-mongodb-example-angular-project-structure

– There are 3 components: tutorials-list, tutorial-details, add-tutorial.
tutorial.service has methods for sending HTTP requests to the Apis.
app-routing.module.ts defines routes for each component.
app component contains router view and navigation bar.
app.module.ts declares Angular components and import necessary modules.

Implementation

You can find step by step to implement this Angular App in the post:
Angular 10 CRUD Application example with Web API

Older version: Angular 8 CRUD Application example with Web API

Further Reading

Conclusion

Now we have an overview of Angular 10 + Spring Boot + MongoDB example when building a CRUD App.

We also take a look at client-server architecture for REST API using Spring Web MVC & Spring Data MongoDB, as well as Angular 10 project structure for building a front-end app to make HTTP requests and consume responses.

Next tutorials show you more details about how to implement the system:

You will want to know how to run both projects in one place:
How to Integrate Angular with Spring Boot Rest API

Serverless with Firebase:
Angular 10 Firebase CRUD Realtime Database
Angular 10 Firestore CRUD with AngularFireStore

Happy learning, see you again!

Leave a Reply

Your email address will not be published. Required fields are marked *