Angular 4 + Spring WebFlux + Spring Data Reactive MongoDB example | Full-Reactive Angular 4 Http Client

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:

• 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

  

  2. Reactive Spring Boot Server

  2.1 Dependency

  <dependency>
  <groupId>org.springframework.boot</groupId>
  <artifactId>spring-boot-starter-data-mongodb-reactive</artifactId>
  </dependency>

<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-webflux</artifactId>
</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.

import org.springframework.data.repository.reactive.ReactiveCrudRepository;
import reactor.core.publisher.Flux;

public interface ReactiveCustomerRepository extends ReactiveCrudRepository<Customer, String> {

    Mono<Customer> findByLastname(String lastname);
    Flux<Customer> findByAge(int age);

    @Query("{ 'firstname': ?0, 'lastname': ?1}")
    Mono<Person> findByFirstnameAndLastname(String firstname, String lastname);
}

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