Angular 4 + Spring WebFlux + Spring Data Reactive MongoDB example | Full-Reactive Angular 4 Http Client – Spring Boot RestApi Server

In this tutorial, we’re gonna build a full Reactive Application in which, Spring WebFlux, Spring Data Reactive MongoDB are used for backend, and Angular, RxJS, EventSource are on client side.

Related Posts:
How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4
How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4
How to build SpringBoot MongoDb RestfulApi
How to use SpringData MongoRepository to interact with MongoDB
Angular 4 + Spring Boot + MongoDB CRUD example
Introduction to RxJS – Extensions for JavaScript Reactive Streams

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite 3.9.0.RELEASE
– Spring Boot 2.0.0.RELEASE
– Angular 4
– RxJS 5.1.0
– MongoDB 3.4.10

II. Overview

1. Full Stack Architecture

angular-4-spring-webflux-reactive-mongodb-architecture

2. Reactive Spring Boot Server

2.1 Dependency

2.2 Reactive Repository

We just need to create an interface that extends ReactiveCrudRepository to do CRUD operations for a specific type. This repository follows reactive paradigms and uses Project Reactor types (Flux, Mono) which are built on top of Reactive Streams.

2.3 Activate reactive Spring Data MongoDB

Support for reactive Spring Data is activated through an @EnableReactiveMongoRepositories annotation:

2.4 Call Reactive Repository

We can forward the reactive parameters provided by Spring Web Reactive, pipe them into the repository, get back a Flux/Mono and then work with result in reactive way.

In the rest controller methods which are annotated by @RequestMapping, we have used some methods of autowired repository which are implemented interface ReactiveCrudRepository:

And findByName method that we create in our interface ReactiveCustomerRepository:

Remember that we want to connect to backend from a client application deployed in a different port, so we must enable CORS using @CrossOrigin annotation.

3. Reactive Angular Client

3.1 Reactive Service

This service interacts with the backend using Server-Sent Events.

Whenever we receive an event through the EventSource object, onmessage() is invoked. That’s where we parse data and update item list.

Using RxJS Observable object, any Observer that subscribed to the Observable we created can receive events when the item list gets updated (when calling observer.next(...)).

For more details about RxJS, please visit:
Introduction to RxJS – Extensions for JavaScript Reactive Streams
3.2 Reactive Component

This Component calls Service above and keep result inside an Observable object:

In HTML template, we add async pipe that subscribes to the Observable and update component whenever a new event comes:

III. Practice

1. Reactive Spring Boot Server

1.1 Project Structure

angular-4-spring-webflux-reactive-mongodb-spring-boot-server-structure

– Class Customer corresponds to document in customer collection.
ReactiveCustomerRepository is an interface extends ReactiveCrudRepository, will be autowired in CustomerController for implementing repository methods.
CustomerController is a REST Controller which has request mapping methods for RESTful requests such as: getAll, create, update, delete Customers.
– Configuration for Spring Data MongoDB properties in application.properties
– Dependencies for Spring Boot WebFlux and Spring Data MongoDB in pom.xml

1.2 Dependency

1.3 Data Model

1.4 Reactive Repository

1.5 Enable reactive Spring Data MongoDB

1.6 REST Controller

To make the result live, we use delayElements(). It causes a delayed time between 2 events.

1.7 Configuration for Spring Data MongoDB

application.properties

2. Reactive Angular Client

2.1 User Interface

angular-4-spring-webflux-reactive-mongodb-angular-client-ui

2.2 Project Structure

angular-4-spring-webflux-reactive-mongodb-angular-client-structure

In this example, we have:
– 4 components: customers-list, customer-details, create-customer, search-customers.
– 3 modules: FormsModule, HttpClientModule, AppRoutingModule.
customer.ts: class Customer (id, name, age, active).
customer.service.ts: Service for HttpClient methods.

2.3 AppModule

app.module.ts

2.4 Model

customer.ts

2.5 Service

customer.service.ts

2.6 Components
2.6.1 CustomerDetailsComponent

customer-details.component.ts

customer-details.component.html

2.6.2 CustomersListComponent

customers-list.component.ts

customers-list.component.html

2.6.3 CreateCustomerComponent

create-customer.component.ts

create-customer.component.html

2.6.4 SearchCustomersComponent

search-customers.component.ts

search-customers.component.html

2.7 AppRoutingModule

app-routing.module.ts

2.8 App Component

app.component.ts

app.component.html

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: npm start.

– Open browser with url http://localhost:4200/, add some Customers.
– Click on Customers tab, each Customer displays one after another with 1s delayed time.

angular-4-spring-webflux-reactive-mongodb-result

– Click on Search tab, search ‘Jack’, the result shows each Customer one after another with 1s delayed time.

angular-4-spring-webflux-reactive-mongodb-result-search

IV. Source Code

SpringDataReactiveMongoDB
ReactiveAngularMongoDB

By grokonez | March 15, 2018.



Related Posts


Got Something To Say:

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

*