Angular 6 + Spring Boot + H2 Database [embedded mode] example | Spring Data JPA + RestAPIs CRUD example

In this tutorial, we show you Angular 6 Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with H2 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 + MySQL CRUD example
– Spring Boot + Angular 6 example | Spring Data JPA + REST + PostgreSQL CRUD example
– Spring Boot + Angular 6 example | Spring Data + REST + Cassandra CRUD example
– How to use Spring JPA with PostgreSQL | Spring Boot
– Integrate H2 database with SpringBoot & Spring JPA in Embedded mode
– Spring RequestMapping: @GetMapping, @PostMapping, @PutMapping, @DeleteMapping

Related Pages:

I. Technologies

– Java 1.8
– Maven 3.3.9
– Spring Tool Suite – Version 3.9.4.RELEASE
– Spring Boot: 2.0.4.RELEASE
– Angular 6
– RxJS 6
– H2

II. Overview

spring-boot-angular-6-httpclient-spring-rest-api-data-h2-in-memory-database + angular-http-service-architecture

1. Spring Boot Server

2. Angular 6 Client

spring-boot-angular-6-httpclient-spring-rest-api-data-h2 + angular-client-architecture

III. Practice

1. Project Structure

1.1 Spring Boot Server

spring-boot-angular-6-httpclient-spring-rest-api-data-h2-in-memory-database + springboot-structure

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

1.2 Angular 6 Client

spring-boot-angular-6-httpclient-spring-rest-api-data-h2-database + 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

	org.springframework.boot
	spring-boot-starter-data-jpa


	org.springframework.boot
	spring-boot-starter-web


    com.h2database
    h2
2.1.2 Customer – Data Model

model/Customer.java

package com.ozenero.springrest.h2.model;

import javax.persistence.Column;
import javax.persistence.Entity;
import javax.persistence.GeneratedValue;
import javax.persistence.GenerationType;
import javax.persistence.Id;
import javax.persistence.Table;

@Entity
@Table(name = "customer")
public class Customer {

	@Id
	@GeneratedValue(strategy = GenerationType.AUTO)
	private long id;

	@Column(name = "name")
	private String name;

	@Column(name = "age")
	private int age;

	@Column(name = "active")
	private boolean active;

	public Customer() {
	}

	public Customer(String name, int age) {
		this.name = name;
		this.age = age;
		this.active = false;
	}

	public long getId() {
		return id;
	}

	public void setName(String name) {
		this.name = name;
	}

	public String getName() {
		return this.name;
	}

	public void setAge(int age) {
		this.age = age;
	}

	public int getAge() {
		return this.age;
	}

	public boolean isActive() {
		return active;
	}

	public void setActive(boolean active) {
		this.active = active;
	}

	@Override
	public String toString() {
		return "Customer [id=" + id + ", name=" + name + ", age=" + age + ", active=" + active + "]";
	}
}
2.1.3 JPA Repository

repo/CustomerRepository.java

package com.ozenero.springrest.h2.repo;

import java.util.List;

import org.springframework.data.repository.CrudRepository;

import com.ozenero.springrest.h2.model.Customer;

public interface CustomerRepository extends CrudRepository {
	List findByAge(int age);
}
2.1.4 REST Controller

controller/CustomerController.java

package com.ozenero.springrest.h2.controller;

import java.util.ArrayList;
import java.util.List;
import java.util.Optional;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.HttpStatus;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.DeleteMapping;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.PutMapping;
import org.springframework.web.bind.annotation.RequestBody;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

import com.ozenero.springrest.h2.model.Customer;
import com.ozenero.springrest.h2.repo.CustomerRepository;

@CrossOrigin(origins = "http://localhost:4200")
@RestController
@RequestMapping("/api")
public class CustomerController {

	@Autowired
	CustomerRepository repository;

	@GetMapping("/customers")
	public List getAllCustomers() {
		System.out.println("Get all Customers...");

		List customers = new ArrayList<>();
		repository.findAll().forEach(customers::add);

		return customers;
	}

	@PostMapping(value = "/customers/create")
	public Customer postCustomer(@RequestBody Customer customer) {

		Customer _customer = repository.save(new Customer(customer.getName(), customer.getAge()));
		return _customer;
	}

	@DeleteMapping("/customers/{id}")
	public ResponseEntity deleteCustomer(@PathVariable("id") long id) {
		System.out.println("Delete Customer with ID = " + id + "...");

		repository.deleteById(id);

		return new ResponseEntity<>("Customer has been deleted!", HttpStatus.OK);
	}

	@DeleteMapping("/customers/delete")
	public ResponseEntity deleteAllCustomers() {
		System.out.println("Delete All Customers...");

		repository.deleteAll();

		return new ResponseEntity<>("All customers have been deleted!", HttpStatus.OK);
	}

	@GetMapping(value = "customers/age/{age}")
	public List findByAge(@PathVariable int age) {

		List customers = repository.findByAge(age);
		return customers;
	}

	@PutMapping("/customers/{id}")
	public ResponseEntity updateCustomer(@PathVariable("id") long id, @RequestBody Customer customer) {
		System.out.println("Update Customer with ID = " + id + "...");

		Optional customerData = repository.findById(id);

		if (customerData.isPresent()) {
			Customer _customer = customerData.get();
			_customer.setName(customer.getName());
			_customer.setAge(customer.getAge());
			_customer.setActive(customer.isActive());
			return new ResponseEntity<>(repository.save(_customer), HttpStatus.OK);
		} else {
			return new ResponseEntity<>(HttpStatus.NOT_FOUND);
		}
	}
}
2.1.5 Configuration for Spring Datasource & JPA properties

application.properties

spring.h2.console.enabled=true
spring.h2.console.path=/h2_console
spring.datasource.url=jdbc:h2:file:~/h2/testdb
spring.datasource.username=sa
spring.datasource.password=
spring.datasource.driverClassName=org.h2.Driver
spring.jpa.hibernate.ddl-auto = update
spring.jpa.show-sql=true

*Note:
– jdbc:h2:mem is for in-memory databases.
– jdbc:h2:file is for disk-based databases.

More details at: H2 Database URL Overview

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

export class Customer {
    id: number;
    name: string;
    age: number;
    active: boolean;
}
2.2.2 CustomerService

customer.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})
export class CustomerService {

  private baseUrl = 'http://localhost:8080/api/customers';

  constructor(private http: HttpClient) { }

  getCustomer(id: number): Observable {
    return this.http.get(`${this.baseUrl}/${id}`);
  }

  createCustomer(customer: Object): Observable {
    return this.http.post(`${this.baseUrl}` + `/create`, customer);
  }

  updateCustomer(id: number, value: any): Observable {
    return this.http.put(`${this.baseUrl}/${id}`, value);
  }

  deleteCustomer(id: number): Observable {
    return this.http.delete(`${this.baseUrl}/${id}`, { responseType: 'text' });
  }

  getCustomersList(): Observable {
    return this.http.get(`${this.baseUrl}`);
  }

  getCustomersByAge(age: number): Observable {
    return this.http.get(`${this.baseUrl}/age/${age}`);
  }

  deleteAll(): Observable {
    return this.http.delete(`${this.baseUrl}` + `/delete`, { responseType: 'text' });
  }
}


2.2.3 Components


– CustomerDetailsComponent:

customer-details/customer-details.component.ts


import { Component, OnInit, Input } from '@angular/core';
import { CustomerService } from '../customer.service';
import { Customer } from '../customer';

import { CustomersListComponent } from '../customers-list/customers-list.component';

@Component({
  selector: 'customer-details',
  templateUrl: './customer-details.component.html',
  styleUrls: ['./customer-details.component.css']
})
export class CustomerDetailsComponent implements OnInit {

  @Input() customer: Customer;

  constructor(private customerService: CustomerService, private listComponent: CustomersListComponent) { }

  ngOnInit() {
  }

  updateActive(isActive: boolean) {
    this.customerService.updateCustomer(this.customer.id,
      { name: this.customer.name, age: this.customer.age, active: isActive })
      .subscribe(
        data => {
          console.log(data);
          this.customer = data as Customer;
        },
        error => console.log(error));
  }

  deleteCustomer() {
    this.customerService.deleteCustomer(this.customer.id)
      .subscribe(
        data => {
          console.log(data);
          this.listComponent.reloadData();
        },
        error => console.log(error));
  }
}



customer-details/customer-details.component.html



  

     {{customer.name}}
  

  

     {{customer.age}}
  

  

     {{customer.active}}
  


  Inactive

  Active

  Delete

  






– CustomersListComponent:

customers-list/customers-list.component.ts


import { Component, OnInit } from '@angular/core';
import { Observable } from 'rxjs';

import { CustomerService } from '../customer.service';
import { Customer } from '../customer';

@Component({
  selector: 'customers-list',
  templateUrl: './customers-list.component.html',
  styleUrls: ['./customers-list.component.css']
})
export class CustomersListComponent implements OnInit {

  customers: Observable;

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
    this.reloadData();
  }

  deleteCustomers() {
    this.customerService.deleteAll()
      .subscribe(
        data => {
          console.log(data);
          this.reloadData();
        },
        error => console.log('ERROR: ' + error));
  }

  reloadData() {
    this.customers = this.customerService.getCustomersList();
  }
}



customers-list/customers-list.component.html


Customers




  





  





– CreateCustomerComponent:

create-customer/create-customer.component.ts


import { Component, OnInit } from '@angular/core';

import { Customer } from '../customer';
import { CustomerService } from '../customer.service';

@Component({
  selector: 'create-customer',
  templateUrl: './create-customer.component.html',
  styleUrls: ['./create-customer.component.css']
})
export class CreateCustomerComponent implements OnInit {

  customer: Customer = new Customer();
  submitted = false;

  constructor(private customerService: CustomerService) { }

  ngOnInit() {
  }

  newCustomer(): void {
    this.submitted = false;
    this.customer = new Customer();
  }

  save() {
    this.customerService.createCustomer(this.customer)
      .subscribe(data => console.log(data), error => console.log(error));
    this.customer = new Customer();
  }

  onSubmit() {
    this.submitted = true;
    this.save();
  }
}



create-customer/create-customer.component.html


Create Customer



  

    

      
      
    


    

      
      
    


    
  






  
You submitted successfully!

  





– SearchCustomersComponent:

search-customers/search-customers.component.ts


import { Component, OnInit } from '@angular/core';
import { Customer } from '../customer';
import { CustomerService } from '../customer.service';

@Component({
  selector: 'search-customers',
  templateUrl: './search-customers.component.html',
  styleUrls: ['./search-customers.component.css']
})
export class SearchCustomersComponent implements OnInit {

  age: number;
  customers: Customer[];

  constructor(private dataService: CustomerService) { }

  ngOnInit() {
    this.age = 0;
  }

  private searchCustomers() {
    this.dataService.getCustomersByAge(this.age)
      .subscribe(customers => this.customers = customers);
  }

  onSubmit() {
    this.searchCustomers();
  }
}



search-customers/search-customers.component.html


Find By Age



  

    

      
      
    


    

      
    

  




    
  
  • 
    
    {{customer.id}} - {{customer.name}} {{customer.age}}
    
  
    • 





2.2.4 AppRoutingModule


app-routing.module.ts


import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { CustomersListComponent } from './customers-list/customers-list.component';
import { CreateCustomerComponent } from './create-customer/create-customer.component';
import { SearchCustomersComponent } from './search-customers/search-customers.component';

const routes: Routes = [
    { path: '', redirectTo: 'customer', pathMatch: 'full' },
    { path: 'customer', component: CustomersListComponent },
    { path: 'add', component: CreateCustomerComponent },
    { path: 'findbyage', component: SearchCustomersComponent },
];

@NgModule({
    imports: [RouterModule.forRoot(routes)],
    exports: [RouterModule]
})

export class AppRoutingModule { }



And AppComponent HTML for routing:

app.component.html



  
{{title}}

  
{{description}}

  
  





2.2.5 AppModule


app.module.ts


import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { CreateCustomerComponent } from './create-customer/create-customer.component';
import { CustomerDetailsComponent } from './customer-details/customer-details.component';
import { CustomersListComponent } from './customers-list/customers-list.component';
import { SearchCustomersComponent } from './search-customers/search-customers.component';
import { AppRoutingModule } from './app-routing.module';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  declarations: [
    AppComponent,
    CreateCustomerComponent,
    CustomerDetailsComponent,
    CustomersListComponent,
    SearchCustomersComponent
  ],
  imports: [
    BrowserModule,
    FormsModule,
    AppRoutingModule,
    HttpClientModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }



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.

– Make a H2 connection request: http://localhost:8080/h2_console


spring-boot-angular-6-httpclient-spring-rest-api-data-h2-in-memory-database + connect-to-h2-database


– Open browser for url http://localhost:4200/:

Add Customer:


spring-boot-angular-6-httpclient-spring-rest-api-data-h2-in-memory-database-add-customer


Show Customers:


spring-boot-angular-6-httpclient-spring-rest-api-data-h2-in-memory-database + show-customers


Click on Active button to update Customer status:


spring-boot-angular-6-httpclient-spring-rest-api-data-h2-in-memory-database-update-customers


Search Customers by Age:


spring-boot-angular-6-httpclient-spring-rest-api-data-h2-in-memory-database + search-customers


Delete a Customer:


spring-boot-angular-6-httpclient-spring-rest-api-data-h2-in-memory-database-delete-customer


Delete All Customers:


spring-boot-angular-6-httpclient-spring-rest-api-data-h2-in-memory-database + delete-all-customers


IV. Source Code


– SpringBootRestAPIsH2

– Angular6SpringBoot-Client









	

	

    

    

            

            

            

                

                    0
                    0
                    votes

                
Article Rating

                

            
    

                    

                            

            

                

                                            

                             Subscribe 
                        

                                            

                                                
                    

                

                                                    

                                                    

                                
Notify of 

                                

                                    
                                

                                                                    
                                                                    

                                    
                                
 
                                                            

                                                

                            

                                        

                                        

                        

                            

                                                                                                        

                                        guest                                    

                                                
                                        

                        

                    

                    
                                        
                                    

                        

                
                    

                        

                

                    

                        730 Comments                    

                                        

                    

                                                    

                                                        

                                                        

                                                                        Oldest
                                                                        
                                

                                                                            Newest
                                                                                Most Voted
                                                                        

                            

                                                

                

                

                    
 Inline Feedbacks

                    
View all comments

                

                                

                                        

                                            

                

            

                

        

    

    

    
	
	

	



	

		

		
	










730
0
Would love your thoughts, please comment.x
()
x













    

		

			ozenero
		

		

		
	
			ozenero.com is a one stop blog for software developers looking for simple, feasible, practical and integrative guides and tutorials on Programming languages, Mobile & Web Development (Java, Kotlin, Python, Golang, JavaScript, Spring Boot, Django, Nodejs, Angular, React and Vue.js).
		


			



Written by Loi Le.

Visit us at: ozenero.com

20B Hoang Dieu Street, 10 Ward , Phu Nhuan, Ho Chi Minh City

Viet Nam


			



			
	
				© 2020 ozenero. All rights reserved | Privacy-Policy
			

		

			 DMCA.com Protection Status  
		

		

	

	
	

		

			Follow Me
		

		

		

			

			 Facebook 
			 Youtube 
			 Twitter 
             Github 

			

		

	

	

		

			About us
		

		

		

		
We are software engineers with many years working experiments in software development industry, we strongly believe the growth of the Internet and Technology.

		
Having a big passion about Internet for connecting knowledge and helping people to resolve problems, so I decide to execute the working place to share and develop my knowledge from year to year!
		

        
Contact me : leozenero@gmail.com