Angular 4 + Spring WebFlux + Spring Data Reactive MongoDB example | Full-Reactive Angular 4 Http Client 
Tags: springboot, angular, springwebflux, mongodb
Published: 2021-05-22 13:51:50

https://grokonez.com/reactive-programming/angular-4-spring-webflux-spring-data-reactive-mongodb-example-full-reactive-angular-4-http-client-spring-boot-restapi-server

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:
- <a href="https://grokonez.com/spring-framework/spring-boot/use-angular-http-client-fetch-data-springboot-restapi">How to use Angular Http Client to fetch Data from SpringBoot RestAPI – Angular 4</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/use-angular-httpclient-post-put-delete-data-springboot-rest-apis-angular-4">How to use Angular HttpClient to POST, PUT, DELETE data on SpringBoot Rest APIs – Angular 4</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/build-springboot-mongodb-restfulapi">How to build SpringBoot MongoDb RestfulApi</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/how-to-use-springdata-mongorepository-to-interact-with-mongdb-springboot-application">How to use SpringData MongoRepository to interact with MongoDB</a>
- <a href="https://grokonez.com/spring-framework/spring-boot/angular-4-spring-boot-mongodb-crud-example">Angular 4 + Spring Boot + MongoDB CRUD example</a>
- <a href="https://grokonez.com/frontend/introduction-to-rxjs-javascript-reactive-stream">Introduction to RxJS – Extensions for JavaScript Reactive Streams</a>

<!--more-->
<h2>I. Technologies</h2>
- 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
<h2>II. Overview</h2>
<h3>1. Full Stack Architecture</h3>
<img src="https://grokonez.com/wp-content/uploads/2018/03/angular-4-spring-webflux-reactive-mongodb-architecture.png" alt="angular-4-spring-webflux-reactive-mongodb-architecture" width="700" height="226" class="alignnone size-full wp-image-11165" />
<h3>2. Reactive Spring Boot Server</h3>
<h4>2.1 Dependency</h4>
<pre><code class="language-html">&lt;dependency&gt;
	&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
	&lt;artifactId&gt;spring-boot-starter-data-mongodb-reactive&lt;/artifactId&gt;
&lt;/dependency&gt;

&lt;dependency&gt;
	&lt;groupId&gt;org.springframework.boot&lt;/groupId&gt;
	&lt;artifactId&gt;spring-boot-starter-webflux&lt;/artifactId&gt;
&lt;/dependency&gt;</code></pre>
<h4>2.2 Reactive Repository</h4>
We just need to create an interface that extends <code>ReactiveCrudRepository</code> to do CRUD operations for a specific type. This repository follows reactive paradigms and uses Project Reactor types (<code>Flux</code>, <code>Mono</code>) which are built on top of Reactive Streams.
<pre><code class="language-java">import org.springframework.data.repository.reactive.ReactiveCrudRepository;
import reactor.core.publisher.Flux;

public interface ReactiveCustomerRepository extends ReactiveCrudRepository&lt;Customer, String&gt; {

	Mono&lt;Customer&gt; findByLastname(String lastname);
	Flux&lt;Customer&gt; findByAge(int age);

	@Query(&quot;{ 'firstname': ?0, 'lastname': ?1}&quot;)
	Mono&lt;Person&gt; findByFirstnameAndLastname(String firstname, String lastname);
}</code></pre>

More at:

https://grokonez.com/reactive-programming/angular-4-spring-webflux-spring-data-reactive-mongodb-example-full-reactive-angular-4-http-client-spring-boot-restapi-server

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