Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example

#springboot #angular #mongodb #springdata

https://ozenero.com/spring-boot-angular-6-example-spring-data-rest-mongodb-crud-example

In this tutorial, we show you Angular 6 Http Client & Spring Boot Server example that uses Spring Data to do CRUD with MongoDb and Angular 6 as a front-end technology to make request and receive response.

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.8.4.RELEASE
– Spring Boot: 2.0.3.RELEASE
– Angular 6

RxJS 6
II. Overview

Demo

1. Spring Boot Server

2. Angular 6 Client

III. Practice

1. Project Structure

1.1 Spring Boot Server

Customer class corresponds to entity and table customer.
CustomerRepository is an interface extends MongoRepository, will be autowired in CustomerController for implementing repository methods and custom finder methods.
CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: getAllCustomers, postCustomer, deleteCustomer, deleteAllCustomers, findByAge, updateCustomer.
Configuration for Spring Datasource and Spring Data properties in application.properties
Dependencies for Spring Boot and MongoDb in pom.xml
1.2 Angular 6 Client

In this example, we focus on:

4 components: customers-list, customer-details, create-customer, search-customer.
3 modules: FormsModule, HttpClientModule, AppRoutingModule.
customer.ts: class Customer (id, firstName, lastName)
customer.service.ts: Service for Http Client methods
2. How to do

2.1 Spring Boot Server

2.1.1 Dependency