Spring Boot + Angular CRUD Tutorial - Part #5 - Running Angular CRUD App

Author:
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 the 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 the 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 the 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 the Angular 8 CRUD application with spring boot as a back end.

Source Code on My GitHub Repository

The source code of this tutorial is 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.

Related Spring and Spring Boot Tutorials/Guides:

Spring Boot Tutorials [500+] Spring Boot Testing Tutorial Spring Boot Microservice Tutorial Spring Boot Kafka Microservices Spring Boot + Apache Kafka Tutorial Spring Core Tutorial Spring MVC Tutorial Spring Data JPA Tutorial Spring Framework for Beginners Spring AOP Tutorial Spring Security Tutorial Spring Exceptions Tutorial Spring Boot Interview Questions Spring Boot Microservices Interview Questions Apache Kafka Tutorials Docker Tutorials and Guides Spring Boot RabbitMQ Tutorials Angular CRUD Example with Spring Boot Spring Boot + Angular 12 CRUD Full Stack Spring Boot + Angular 8 CRUD Full Stack Spring Boot + Angular 10 CRUD Full Stack Spring Boot + React JS CRUD Full Stack React JS ( React Hooks) + Spring Boot Spring Boot Thymeleaf CRUD Full Stack Spring Boot User Registration and Login Node Js + Express + MongoDB CRUD Vue JS + Spring Boot REST API Tutorial

Comments

  1. zhuniqiabedin27 August 2019 at 13:32

    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. Ramesh Fadatare28 August 2019 at 02:14

      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. yusufs16 September 2019 at 04:14

    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. Ramesh Fadatare3 October 2019 at 05:52

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

      Delete
  3. Unknown26 September 2019 at 12:33

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

    ReplyDelete
  4. amina elleuch3 October 2019 at 03:28

    Thank You :)

    ReplyDelete
  5. Unknown31 October 2019 at 09:37

    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. Ramesh Fadatare31 October 2019 at 10:08

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

      Delete
  6. Unknown31 October 2019 at 10:19

    same*

    ReplyDelete
  7. zrowhsi17 November 2019 at 10:24

    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. zrowhsi18 November 2019 at 14:51

      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
    2. VRizki28 January 2020 at 20:33

      same with me :v

      Delete
  8. Anonymous11 December 2019 at 00:00

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

    ReplyDelete
  9. V.M13 May 2020 at 11:26

    Thank you. It works well.

    ReplyDelete
  10. Unknown28 September 2020 at 12:18

    Not able to render list page
    [object Object]

    ReplyDelete
  11. Unknown18 November 2020 at 01:03

    I open localhost:4200 but nothing shows up. No errors anywhere but I get a blank page.

    ReplyDelete

Post a Comment

Leave Comment