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

spring-boot-angular-6-example-spring-data-rest-mongodb-crud-example-feature-image-n

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.

Related Posts:
Spring Boot + Angular 6 example | Spring Data JPA + REST + PostgreSQL CRUD example
Spring Boot + Angular 6 example | Spring Data JPA + REST + MySQL CRUD example
Angular 6 HttpClient + Spring Boot + MariaDB example | Spring Data JPA + RestAPIs CRUD example
Spring Boot + Angular 6 example | Spring Data + REST + Cassandra CRUD example

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

Demo

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 Data 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 & Data MongoDb 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 grokonez | June 22, 2018.



Related Posts


3 thoughts on “Spring Boot + Angular 6 example | Spring Data + REST + MongoDb CRUD example”

  1. Thank you for providing a straightforward WORKING example of Angular+Java. There are many other tutorials and examples that describe similar configurations, but they are often missing complete descriptions, cluttered with ancillary technologies, or don’t actually work as described.

    1. Hi Kurt Risser,

      Thank you for your praise, it gives us more motivation to work harder and make more tutorials.

      Best Regards,
      grokonez.

Got Something To Say:

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

*