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

28 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

      • Ivaldo
        October 15, 2017 at 1:18 am

        How to install material for angular 4? I try “npm install –save @angular/material @angular/cdk” and after startup server the console show me “ERROR in Error: Error encountered resolving symbol values statically. Calling function ‘MaterialModule’, function calls are not supported. Consider replacing the function or lambda with a reference to an exported function, resolving symbol AppModule in /home/ivaldo/bikes/src/app/app.module.ts, resolving symbol AppModule in /home/ivaldo/bikes/src/app/app.module.ts”. Please, add the package.json to check compatibility of libraries. Tanks.

        • October 15, 2017 at 2:21 pm

          Thanks for the suggestion, i will work on it.

  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

  7. deepmala pathak
    October 18, 2017 at 1:57 pm

    Hi

    From where i can download the code …

  8. DJ
    October 23, 2017 at 4:23 am

    Hi there, It’s very interesting stuff to start on, however, I could see there are lot of files which are different from what the tutorial says vs gitlab links. I am using angular 4 and resolved quite a few errors but now seeing this error which is not letting the program to start. Could you please help me out as I am newbie to Angular.

    Below is the error :-

    Uncaught Error: Template parse errors:
    ‘md-input-container’ is not a known element:

    • October 23, 2017 at 3:30 pm

      Hi, what is the git url you are referring to? Directly copying all file from this tutorial should help you get the app working. for md-input-container error, are you sure the angular material library is included?

      • DJ
        October 26, 2017 at 9:20 am

        I tried with the below https://github.com/theJavaGeek/angular link and what I found out there are lot of files which are not available. Therefore, I created the rest of the files mentioned as per the above article.

        As far as Angular material is concerned, then yes. I am using Angular 4 and using angular material 2.0.

        Please let me know If I am missing something here.

        • October 26, 2017 at 11:05 am

          hi DJ,

          The gitHub url you mentioned is a complete repository. THere is a separate branch for each angular tutorial I have written. You can find all branches here. https://github.com/theJavaGeek/angular/branches . Each branch corresponds to a separate tutorial.

          However, for this CRUD application tutorial, which involves java code also, I could not push in angular repository and hence code for this tutorial is not available in git repository.

          Please feel free to copy all angular code from this tutorial itsef. Please let me know if you encounter any problems.

          • DJ
            October 27, 2017 at 4:03 am

            Thanks for the response, I went ahead and copied all the files mentioned in the article and ended up the error “Uncaught Error: Template parse errors:
            ‘md-input-container’ is not a known element:” I googled around and mostly they talk about the angular material. Therefore, I went ahead and used angular material2.0.

            import { MatInputModule,MatButtonModule,MatCardModule,MatMenuModule,MatToolbarModule,MatIconModule,MatSelectModule,MatListModule } from ‘@angular/material’;

            Please help me out what am I missing OR share the angular code as well so that would be easy for newbie like me.

  9. adriann
    October 23, 2017 at 5:44 pm

    hello! when i try to acces http://localhost:4200/bikes all it says is ” Loading…” and nothing happens. no error in client/server side and the spring boot application is working

    • October 24, 2017 at 9:13 am

      hi Adriann, by client, do you mean node js console or browser console ? Please check whether you are getting any error in browser developer tools console.

  10. Darryl Pierce
    November 3, 2017 at 6:07 pm

    I’m trying to adapt your demo to my own Ruby on Rails application. All features work except for creation. When I click the link to create (in my case) a note, I see on the Ruby side:’

    Started POST “/notes” for 127.0.0.1 at 2017-11-03 08:34:01 -0400
    Processing by NotesController#create as HTML
    Parameters: {“note”=>{}}
    Completed 400 Bad Request in 0ms (ActiveRecord: 0.0ms)

    ActionController::ParameterMissing (param is missing or the value is empty: note):

    app/controllers/notes_controller.rb:51:in note_params'
    app/controllers/notes_controller.rb:18:in
    create’

    It seems that clicking the link is trying to post an empty note and isn’t showing a form on the Angular side to allow the user to enter the note details. I added to the createNote method in my note.server.ts:

    createNote(note: Note): Promise {
    alert(“JSON=” + JSON.stringify(note));

    return this.http.post(this.notesUrl, JSON.stringify(note), { headers: this.headers })
    .toPromise()
    .then(res => res.json() as Note)
    .catch(this.handleError);
    }

    And the output from the alert is:

    localhost:4200 says:

    JSON={}

    Any ideas? I’d like to have the create link show a form to the user and, when they save it, then post to the backend Rails app.

    • Darryl Pierce
      November 3, 2017 at 6:10 pm

      Ugh, never mind. I realized I missed where you had added the form above the create button. I’ve now fixed things on my end.

      Thanks for the tutorials.

Leave a Reply

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