Spring Boot + Angular 6 example | Spring Data JPA + REST + MySQL CRUD example

spring-boot-angular-6-example-spring-data-jpa-rest-mysql-crud-example-feature-image

In this tutorial, we show you Angular 6 Http Client & Spring Boot Server example that uses Spring JPA to do CRUD with MySQL and Angular 6 as a front-end technology to make request and receive response.

Related Posts:
How to use Spring JPA MySQL | Spring Boot
Spring JPA + MySQL + AngularJS example | Spring Boot

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-mysql-spring-server-architecture

2. Angular 6 Client

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

III. Practice

1. Project Structure

1.1 Spring Boot Server

spring-boot-angular-6-spring-rest-api-data-mysql-spring-server-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 MySQL in pom.xml

1.2 Angular 6 Client

spring-boot-angular-6-spring-rest-api-data-mysql-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 JPA Repository

repo/CustomerRepository.java

2.1.4 REST Controller

controller/CustomerController.java

2.1.5 Configuration for Spring Datasource & JPA properties

application.properties

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-mysql-add-customer

Show Customers:

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

Click on Active button to update Customer status:

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

Search Customers by Age:

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

Delete a Customer:

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

Delete All Customers:

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

IV. Source Code

Angular6SpringBoot-Client
SpringRestMySQL-Server

By grokonez | June 21, 2018.

Last updated on October 28, 2018.



Related Posts


9 thoughts on “Spring Boot + Angular 6 example | Spring Data JPA + REST + MySQL CRUD example”

  1. Respected Sir,
    I am new to SPRING BOOT.
    I have download SpringRestMySql-Server above project and unzip,import in STS.
    When I run this app I got the following error.
    ***************************
    APPLICATION FAILED TO START
    ***************************
    Description:

    Field repository in com.javasampleapproach.springrest.mysql.controller.CustomerController required a bean named ‘entityManagerFactory’ that could not be found.

    Action:

    Consider defining a bean named ‘entityManagerFactory’ in your configuration.

    Could you please give solution for run above project.

    Thanks & Regards
    S.K.Mahalingam

    1. Here is how I started the application (there can be efficient ways and this is not an official instruction):
      > Created repository : .\ng6SpringBoot
      > Extracted source code files with following Folder Structure ::
      >> .\ng6SpringBoot
      |
      |-> Angular6SpringBoot-Client
      |-> SpringRestMySQL

      ## Frontend
      >>> cd Angular6SpringBoot-Client
      >>> npm install
      >>> ng serve -o
      ^ This step will run the frontend at http://localhost:4200

      ## Backend
      > Open IntelliJ
      >> Import project
      >> Navigate to ./ng6SpringBoot/SpringRestMySQL
      >> Select Maven Project (if not already selected), click Next.
      >> Select the option for “searching Maven Repository recursively” (or something similar)
      >> Click Next > Next > Next.. > Finish

      ## Database
      Install Mysql client and workbench.
      Configure the server with the properties found in application.properties file.

      >> spring.datasource.url=jdbc:mysql://localhost:3306/testdb?useSSL=false
      >> spring.datasource.username=root
      >> spring.datasource.password= 12345
      >> spring.jpa.generate-ddl=true

      DbName: testdb
      Tablename: customer
      columns:
      id: number;
      name: string;
      age: number;
      active: boolean;
      ##

      run the db server
      run the maven application by right clicking SpringRestMySqlApplication.java file and click Run.

      # The projects runs as expected.

  2. throwing error

    ng serve
    C:\Users\AppData\Roaming\npm\node_modules\ng-cli\node_modules\resolve\lib\sync.js:45
    throw err;
    ^

    Error: Cannot find module ‘ng-factory’ from ‘D:\Projects\SpringBootExample\Angular6SpringBoot-Client’
    at Function.module.exports [as sync] (C:\Users\AppData\Roaming\npm\node_modules\ng-cli\node_modules\resolve\lib\sync.js:43:15)
    at module.exports (C:\Users\AppData\Roaming\npm\node_modules\ng-cli\node_modules\resolve-require\lib\index.js:10:24)
    at Command. (C:\Users\AppData\Roaming\npm\node_modules\ng-cli\lib\index.js:49:5)
    at Command.listener (C:\Users\AppData\Roaming\npm\node_modules\ng-cli\node_modules\commander\index.js:315:8)
    at Command.emit (events.js:182:13)
    at Command.parseArgs (C:\Users\AppData\Roaming\npm\node_modules\ng-cli\node_modules\commander\index.js:654:12)
    at Command.parse (C:\Users\AppData\Roaming\npm\node_modules\ng-cli\node_modules\commander\index.js:474:21)
    at Object. (C:\Users\AppData\Roaming\npm\node_modules\ng-cli\lib\index.js:55:9)
    at Module._compile (internal/modules/cjs/loader.js:678:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:689:10)
    PS D:\Projects\SpringBootExample\Angular6SpringBoot-Client>

  3. I have a question.
    I started an application as same as you, but when I browser for url http://localhost:4200/ I see the frontend, but when I click inspect there is no customer.service.ts in sources or any other .ts file.

    May you help me?

    When I try to run SpringRestMySqlApplication.java I get an Error: Could not find or load main class com.javasampleapproach.springrest.mysql.SpringRestMySqlApplication

  4. Hi,

    Great tutorial, however when I tried to deploy the spring boot part as a war file on tomcat and spring boot and call it from the angular part I wasn’t able to make contact with the methods in the war file. Even checking from advanced rest api client give me back the following:-

    Error404 – Not Found

    Any pointers as to where to start looking?

    Thanks,

    1. To add, I changed the main class to extend SpringBootServletInitializer and added the following:-

      It was also packaged as a war file and the tomcat thingy in the dependency was set to provided.

      It looked better when deploying, but no joy when trying to call:-

      http://localhost:8080/api/customers

      1. OK, sorted, not related to the tutorial, but I had to include the name of the application in the link in baseURL in the customer.service.ts file

        private baseUrl = ‘http://localhost:8080/spring-boot-rest-mysql-0.0.1-SNAPSHOT/api/customers’;

Got Something To Say:

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

*