Spring Boot + Angular 8 CRUD, Part 5 - Running Angular 8 CRUD App


In the previous four parts, we have developed a complete step by step Angular 8 CRUD application with Spring boot as a back end.

Use below links to visit different parts of this tutorial:
  1. Spring Boot + Angular 8 CRUD Example Tutorial - Main Tutorial
  2. Spring Boot + Angular 8 CRUD, Part 1 - Develop Spring Boot CRUD Rest APIs
  3. Spring Boot + Angular 8 CRUD, Part 2 - Create Angular 8 App
  4. Spring Boot + Angular 8 CRUD, Part 3 - Develop Angular 8 CRUD Operations
  5. Spring Boot + Angular 8 CRUD, Part 4 - Angular 8 CRUD App Configuration
  6. Spring Boot + Angular 8 CRUD, Part 5 - Running Angular 8 CRUD App

In this final Part 5 of Spring Boot + Angular 7 CRUD Example Tutorial, we will run an Angular 8 CRUD App.

Running Angular 8 Client Application

Let's run the above developed Angular App with a command:
ng serve
By default, the Angular app runs on 4200 port but you can change default port with the following command:
ng serve --port 4201

Demo


Hit http://localhost:4200 link in a browser will host this Angular 8 CRUD app.

Below are the screenshots shows UI of our Employee Management System App:

Employee List Page

Add Employee Page


Update Employee Page

View Employee Details Page

Delete Employee


This completed the complete development of Angular 8 CRUD application with spring boot as a back end.

Source Code on my GitHub repository

The source code of this tutorial available on my GitHub repository at https://github.com/RameshMF/Angular8-SpringBoot-CRUD-Tutorial

Check out Angular 8 + Spring Boot Basic Authentication Example - You can implement basic login and logout features in this CRUD example. All the REST calls made from Angular to Spring Boot will be authenticated using Basic Authentication.

Leave a comment if you have any suggestions about this awesome tutorial.

The source code examples available on my GitHub Repository.

Comments

  1. I just have cloned you git project and It is coming with error at the backend.
    POST request for "http://localhost:8080/api/v1/employees" resulted in 404 (null); invoking error handler
    Exception in thread "main" org.springframework.web.client.HttpClientErrorException: 404 null.
    At this line
    Employee result = restTemplate.postForObject(CREATE_EMPLOYEE_ENDPOINT_URL, newEmployee, Employee.class);

    ReplyDelete
    Replies
    1. SpringRestClient.java file, i have created for testing REST APIs so you can delete that file or comment it out. Anyway i have removed this file from my GitHub repository. Let me know if have still issues.

      Delete
  2. I cant add a employee at the frontend. When I send a request from postman to localhost:4200/add coming error like "Cannot POST /add" inside body

    ReplyDelete
    Replies
    1. I highly recommend you to watch video tutorial of this tutorial on my youtube channel.

      Delete
  3. It says invalid CORS request when i try to post a request..

    ReplyDelete
  4. Hello, if I want to add Subscription List next to Employee List that has the save functionality (add, delete, and update), how I should code it? shell I repeat the same thing in app folder or what ?
    Thank you

    ReplyDelete
    Replies
    1. You can create a separate components in app folder for Subscription feature just like employee feature in this tutorial.

      Delete
  5. when i add new employee it goes to employee list page but don't shows me the last employee i added in list. it shows only when i refresh page.

    ReplyDelete
    Replies
    1. everything works fine after i update the "save()" method in createEmployee component as follows :

      save() {
      this.employeeService.createEmployee(this.employee)
      .subscribe(data => {
      console.log(data);
      this.gotoList();
      }, error => console.log(error));
      this.employee = new Employee();

      }

      Delete
  6. Thank You Ramesh. Everything is working fine for me. Nice tutorial

    ReplyDelete
  7. Thank you. It works well.

    ReplyDelete
  8. Not able to render list page
    [object Object]

    ReplyDelete

Post a comment