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/
We will build a full-stack Tutorial Application in that:
– Add a Tutorial:
– Retrieve all Tutorials:
– Click on Edit button to update a Tutorial:
On this Page, you can:
– Search Tutorials by title:
– This is tutorials
collection on the MongoDB database:
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.
These are APIs that Spring Boot App will export:
/api/tutorials
: create new Tutorial/api/tutorials
: retrieve all Tutorials/api/tutorials/[id]
: retrieve a Tutorial by :id/api/tutorials/[id]
: update a Tutorial by :id/api/tutorials/[id]
: delete a Tutorial by :id/api/tutorials
: delete all Tutorials/api/tutorials?title=[keyword]
: find all Tutorials which title contains keywordPlease visit:
Angular 11 + Spring Boot + MongoDB example: CRUD Application
Other databases:
More Practice:
– Angular + Spring Boot: JWT Authentication & Authorization example
Serverless with Firebase:
– Angular 11 Firebase CRUD Realtime DB | AngularFireDatabase
– Angular 11 Firestore CRUD example | AngularFireStore
#spring-boot #angular #spring #mongodb #javascript #java