CRUD application using angular 4 spring rest services spring data jpa

The following two tabs change content below.
Prasad Kharkar is a java enthusiast and always keen to explore and learn java technologies. He is SCJP,OCPWCD, OCEJPAD and aspires to be java architect.

Latest posts by Prasad Kharkar (see all)

In previous article we saw in detail how to create an end to end full stack application. Now, we are going to create crud application using angular 4 spring rest services spring data jpa.

 

CRUD application using angular 4 spring rest services spring data jpa:

Objective:

We want to create a simple app using which we will be able to Create, Update and Delete bikes.

  • We should be able to enter bike model and bike manufacturer in a form and should be able to submit.
  • Created bikes should be shown in a list.
  • On click of bike model, a separate page should open which helps us edit bike information.
  • Just beside bike model, Delete button should be able to delete bike.

I would recommend going through below articles for easy understanding of crud application using angular 4 spring rest services spring data jpa.

Technical Components:

  • Client side which runs on node js server.
    • angular html forms and their corresponding components.
    • angular services which connect with real API.
    • proxy configuration to connect to localhost:8080 from localhost:4200
  • Server side i.e. spring boot
    • spring controllers is entry point of application, invoked by calling a url
    • controllers will invoke spring services.
    • spring service will invoke spring data jpa repositories which can persist data in mysql database.

Requirements:

Technical Design:

  • Spring
    • BikeController.java : Accepts requests and serves response. Invokes BikeService
    • BikeService.java : An interface which defines contract for service implementations.
    • BikeServiceImpl.java: Implements BikeService and invokes methods on BikeRepository.
    • BikeRepository: Implements CrudRepository from spring data jpa.
    • Bike.java: Entity class which represents a database table.
    • Application.java: Runs application and starts serving requests.
    • application.properties : configures mysql url and credentials.
    • build.gradle: mentions dependencies for application.
  • Angular
    • bikes.component.html: responsible for showing bike form and list
    • bikes.component.ts: responsible for holding and managing data on html.
    • bike-info.component.html: shows info and enables us edit it.
    • bike-info.component.ts: corresponding to html.
    • bike.ts: model class for bike information.
    • proxy.conf.json : proxy configuration to connect to localhost:8080 from localhost:4200.

CRUD application using angular 4 spring rest services spring data jpa:

Server Application:

BikeController.java

BikeService.java:

BikeServiceImpl.java

BikeRepository.java

Bike.java

Application.java

application.properties:

build.gradle:

Client Application:

app-routing.module.ts

bike-info.component.html:

bike-info.component.ts:

bikes.component.html:

bikes.component.ts:

bike.service.ts:

bike.ts

app.component.html:

app.component.ts:

app.module.ts:

main.ts:

proxy.conf.json:

After all this is done, Open your package.json and change start script from “start”: “ng serve” to "start": "ng serve --proxy-config proxy.conf.json"  

Your final project structures will look like below.

Client side project structure

Client side project structure

 

server side project structure

server side project structure

We are done creating crud application using angular 4 spring rest services spring data jpa. It is time to fire up both client and api servers and see it running. run Application.java and API will be up. do npm start on node js and our angular app will be up. Now you can directly test it by visiting localhost:4200/bikes.

You can enter bike information and click on Create bike. Every time you create bike, those will be populated in a list just below the form. From there you can click on bike model name and navigate to the edit page or can simply delete it from database by clicking delete button. If you choose to edit it, then you will see form as below. 
Now, once you have entered the data, it is saved in mysql database. It is stored as below.I hope this article helped create a crud application using angular 4 spring rest services spring data jpa.

Share Button

15 comments for “CRUD application using angular 4 spring rest services spring data jpa

  1. Aqib
    July 17, 2017 at 9:06 am

    ‘Error’
    message: ‘Property ‘forRoot’ does not exist on type ‘typeof MaterialModule’.’
    What is the problem?

    • July 17, 2017 at 9:38 am

      do you have Angular Material library available? Did you install it?

      • Aqib
        July 17, 2017 at 9:52 am

        s i have

  2. Aqib
    July 17, 2017 at 9:54 am

    And in Spring sts it shows red mark under both findOne(bikeId) and delete(bikeId);

    • Aqib
      July 17, 2017 at 9:55 am

      in bike service impl

    • July 17, 2017 at 10:02 am

      What is the error it is showing?

  3. Aqib
    July 17, 2017 at 10:08 am

    The method delete(Bike) in the type CrudRepository is not applicable for the arguments (Integer)

    and

    The method findOne(Integer) is undefined for the type BikeRepository

  4. Aqib
    July 18, 2017 at 12:30 pm

    thanks man it’s worked finally.
    nice one to start learning angular 4 and spring boot.

    • July 18, 2017 at 3:27 pm

      I am glad it worked. Now you are on the way to become a full stack developer 🙂

  5. Erhard
    September 11, 2017 at 9:39 pm

    Hello! I always get a 404 when I try to access /api/bikes. I tried gradle and maven. It’s the same for both. I don’t know which information I could give more, because my setup is actually the same as yours. I only added @ComponentScan to the Application class to get it run.

    • September 12, 2017 at 9:13 am

      are you getting 404 error while going through UI or normally too? I mean is the spring boot application running? Is BikeController properly annotated with @RestContoller and @RequestMapping?

    • Erhard
      September 12, 2017 at 6:26 pm

      I already found a working solution by playing around. But I don’t know what the problem was.

      • Erhard
        September 12, 2017 at 6:28 pm

        Thx for your help. I just read the comment. Well, everything was annoated and the Spring Boot application is running. Anyway I removed the @ComponentScan annotation and now it’s working. But I’m using maven. Keep on the good tutorial work! (y)

  6. Marcus
    September 18, 2017 at 8:30 pm

    Error SpringApplication cannot be resolved

    Please help

Leave a Reply

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