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

angular-http-service-architecture

1. Spring Boot Server

spring-boot-angular-6-spring-rest-api-data-mongodb-spring-server-architecture

2. Angular 6 Client

spring-boot-angular-6-spring-rest-api-data-mongodb-angular-client-architecture

III. Practice

1. Project Structure

1.1 Spring Boot Server

spring-boot-angular-6-spring-rest-api-data-mongodb-spring-server-structure

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 JPA properties in application.properties
Dependencies for Spring Boot and MongoDb in pom.xml

1.2 Angular 6 Client

spring-boot-angular-6-spring-rest-api-data-mongodb-angular-client-structure

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

2.1.2 Customer – Data Model

model/Customer.java

2.1.3 Repository

repo/CustomerRepository.java

2.1.4 REST Controller

controller/CustomerController.java

2.1.5 Configuration for Spring Datasource & JPA properties

application.properties

2.2 Angular 6 Client
2.2.0 Create Service & Components

Run commands below:
ng g s Customer
ng g c CreateCustomer
ng g c CustomerDetails
ng g c CustomersList
ng g c SearchCustomers
On each Component selector, delete app- prefix, then change tslint.json rules"component-selector" to false.

2.2.1 Model

customer.ts

2.2.2 CustomerService

customer.service.ts

2.2.3 Components

– CustomerDetailsComponent:
customer-details/customer-details.component.ts

customer-details/customer-details.component.html

– CustomersListComponent:
customers-list/customers-list.component.ts

customers-list/customers-list.component.html

– CreateCustomerComponent:
create-customer/create-customer.component.ts

create-customer/create-customer.component.html

– SearchCustomersComponent:
search-customers/search-customers.component.ts

search-customers/search-customers.component.html

2.2.4 AppRoutingModule

app-routing.module.ts

And AppComponent HTML for routing:
app.component.html

2.2.5 AppModule

app.module.ts

3. Run & Check Result

Build and Run Spring Boot project with commandlines: mvn clean install and mvn spring-boot:run.
– Run the Angular App with command: ng serve.

– Open browser for url http://localhost:4200/:
Add Customer:

spring-boot-angular-6-spring-rest-api-data-mongodb-add-customer

Show Customers:

spring-boot-angular-6-spring-rest-api-data-mongodb-show-customers

Click on Active button to update Customer status:

spring-boot-angular-6-spring-rest-api-data-mongodb-update-customers

Search Customers by Age:

spring-boot-angular-6-spring-rest-api-data-mongodb-search-customers

Delete a Customer:

spring-boot-angular-6-spring-rest-api-data-mongodb-delete-customer

Delete All Customers:

spring-boot-angular-6-spring-rest-api-data-mongodb-delete-all-customers

IV. Source Code

Angular6SpringBoot-Client
SpringRestMongoDb-Server

By JavaSampleApproach | June 22, 2018.

Related Posts


1 thought on “Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example”

Got Something To Say:

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

*