Retrieve Todo List and Integration with UI
In Previous few topic's we have created our java application and tried to connect JAVA service to Angular and we found when we click on button's our java API is getting called. we saw the use of HTTP client modules.
In this topic we will start working on our todoList Application and create JAVA Services for below points:
- Retrieve all the todo list.
- Creating a todo
- Editing a todo
- Deleting a todo
Before this quickly move HelloWorldController.class and HelloWorldBean.class into a new package : package com.learnangularwithjava.restwebservice.helloworld as shown below the project structure:
Now create a new package com.learnangularwithjava.restwebservice.todoresources and create a new class TodoController.class in it. please see below screen shot of code.
Note: Add @CrossOrigin(origins = "http://localhost:4200/")
Now once the code is done start your service by running RestWebserviceApplication.class and hit this URL http://localhost:8080/users/dummy/todos you will see below response. You can add JSON Formatter extension in chrome for better view.
JAVA Project structure will look like below 
As we have created our todo API now we will integrate with our angular code, so let's create one service in angular which will retrieve list of todos.
Command : ng generate service service/data/todoData and add the code below:
Here we have created a method which will call respective JAVA API and in return it will return a list of TodoList POJO i.e. TodoList[] also we have put the URL inside tick i.e. " ` " keep in mind.
As we have created the method now we have to call this method from todos-list.component from ngOnInit and we have to subscribe the response and set it to todos. 
In todos-list.component.html update below
After all the change now start you java as well angular application and go to Todos section as show below and you can see the response is coming from java:
In Next topic we will refactor our code for readability.
Comments
Post a Comment