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

In this tutorial, we show you Angular 6 Http Client & Spring Boot Server example that uses Spring Data to do CRUD with Cassandra 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-cassandra-spring-server-architecture

2. Angular 6 Client

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

III. Practice

1. Project Structure

1.1 Spring Boot Server

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

Customer class corresponds to entity and table customer.
CustomerRepository is an interface extends CassandraRepository, 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 Cassandra in pom.xml

1.2 Angular 6 Client

spring-boot-angular-6-spring-rest-api-data-cassandra-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.0 Set up Cassandra

Open Cassandra CQL Shell:

– Create Cassandra keyspace with name javasampleapproach:

– Create customer table for javasampleapproach keyspace:

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
spring.data.cassandra.keyspace-name=javasampleapproach
spring.data.cassandra.contact-points=127.0.0.1
spring.data.cassandra.port=9042

2.2 Angular 6 Client
2.2.0 Create Service & Components

Run commands below:
ng g s customer
ng g c create-customer
ng g c customer-details
ng g c customers-list
ng g c search-customers
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-cassandra-add-customer

Show Customers:

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

Click on Active button to update Customer status:

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

Search Customers by Age:

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

Delete a Customer:

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

Delete All Customers:

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

IV. Source Code

Angular6SpringBoot-Client
SpringRestCassandra-Server

By grokonez | June 24, 2018.

Last updated on November 2, 2018.



Related Posts


Got Something To Say:

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

*