Spring Boot + Angular 10 CRUD Example Tutorial

Go to Part 1
In this tutorial, we will learn how to develop a full-stack CRUD (Create, Read, Update, Delete) web application using Angular 10 as a front-end and Spring boot 2 restful API as a backend.
Check out Angular 9 with spring boot 2 integration example at Spring Boot + Angular 9 CRUD Example Tutorial.
Check out Angular 8 with spring boot 2 integration example at Spring Boot + Angular 8 CRUD Example Tutorial.
Check out Angular 7 with spring boot 2 integration example at Spring Boot 2 + Angular 7 CRUD Example.
Check out Angular 6 with spring boot 2 integration example at Spring Boot + Angular 6 CRUD Example.

Goals

We will develop a FULL STACK application with Angular 10 and Spring Boot.

You can download the source code of this tutorial from my GitHub repository at the end of this 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.

Angular 10 + Spring Boot CRUD Full Stack Application - Free Course

This is the complete Angular + Spring Boot CRUD Full Stack Application development course series on my YouTube channel at Free Course on YouTube - Angular + Spring Boot CRUD Full Stack Application:

Spring Boot + Angular 10 CRUD Example Tutorial - 5 Part Series

To keep it simple, I divide this tutorial into 5 parts, and here are the topics that I am going to cover in each Part.

1. Spring Boot + Angular 10 CRUD Full Stack - Part 1 - Develop Spring Boot CRUD Rest APIs

  • create employee
  • list employee
  • delete employee
  • update employee
  • get employee by id
2. Spring Boot + Angular 10 CRUD Full Stack - Part 2 - Create an Angular 10 App
  • Install the latest version of Angular CLI
  • Create Angular 10 client application using Angular CLI
  • Identify Components, Services, and Modules
  • Create Service & Components using Angular CLI
  • Integrate JQuery and Bootstrap with Angular
3. Spring Boot + Angular 10 CRUD Full Stack - Part 3 - Develop Angular 10 CRUD Operations
  • Create an Employee class
  • Employee Service
  • Creating Employee List Template and Component
  • Create Add Employee Template and Component
  • Update Employee Template and Component
  • Create View Employee Details Template and Component
4. Spring Boot  + Angular 10 CRUD Full Stack - Part 4 - Angular 10 CRUD App Configuration
  • npm package.json - Configure Dependencies
  • App Routing Module
  • App Component
  • App Component Template
  • App Module
  • Main Index Html File
  • Main (Bootstrap) File
  • Polyfills
  • TypeScript tsconfig.json
5. Spring Boot 2 + Angular 10 CRUD, Part 5 - Running Angular 10 CRUD App
  • Running Angular 10 Client Application
  • Demo

Spring Boot Angular 10 CRUD App Architecture

    Features Implementation

    • Create an Employee
    • Update an Employee
    • List of Employees
    • Delete Employee
    • View Employee

    What we will build?

    Basically, we will create two projects (Client and Server):
    1. springboot2-jpa-crud-example: This project is used to develop CRUD RESTFul APIs for a simple Employee Management System using Spring Boot 2, JPA and MySQL as a database.
    2. angular10-springboot-client: This project is used to develop single page application using Angular 10 as front-end technology. This Angular 10 application consumes CRUD Restful APIs developed and exposed by a springboot2-jpa-crud-example project.
    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


    Tools and technologies used

    Server-side technologies

    • Spring Boot - 2.0.5.RELEASE
    • JDK - 1.8 or later
    • Spring Framework - 5.0.8 RELEASE
    • Hibernate - 5.2.17.Final
    • Spring Data JPA - 2+

    Front end technologies

    • Angular 10
    • Bootstrap 4
    • npm- 6.9.0
    • JQuery
    • Node js 10+

    Tools

    • Maven - 3.2+
    • IDE - Eclipse or Spring Tool Suite (STS) // Spring boot API development
    • Visual Studio 2017 // Angular App development
    • Angular CLI 10

    Move to Part 1 - Develop Spring Boot CRUD Rest APIs

    In the next part 1 of this tutorial series, we will learn how to create CRUD REST APIs using Spring Boot 2.

    Use below links to visit different parts of this tutorial:

    1. Spring Boot + Angular 10 CRUD Example Tutorial - Main Tutorial
    2. Spring Boot + Angular 10 CRUD Full Stack - Part 1 - Develop Spring Boot CRUD Rest APIs
    3. Spring Boot + Angular 10 CRUD Full Stack - Part 2 - Create an Angular 10 App
    4. Spring Boot + Angular 10 CRUD Full Stack - Part 3 - Develop Angular 10 CRUD Operations
    5. Spring Boot  + Angular 10 CRUD Full Stack - Part 4 - Angular 10 CRUD App Configuration
    6. Spring Boot 2 + Angular 10 CRUD Full Stack - Part 5 - Running Angular 10 CRUD App
    Go to Part 1

    Comments

    1. HI
      getting error
      localhost/:1 Access to XMLHttpRequest at 'http://localhost:8080/webapps/users' from origin 'http://localhost:4200' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
      zone-evergreen.js:2845 GET http://localhost:8080/webapps/users net::ERR_FAILED
      scheduleTask @ zone-evergreen.js:2845
      scheduleTask @ zone-evergreen.js:385
      onScheduleTask @ zone-evergreen.js:272
      scheduleTask @ zone-evergreen.js:378
      scheduleTask @ zone-evergreen.js:210
      scheduleMacroTask @ zone-evergreen.js:233
      scheduleMacroTaskWithCurrentZone @ zone-evergreen.js:1134
      (anonymous) @ zone-evergreen.js:2878
      proto. @ zone-evergreen.js:1449
      (anonymous) @ http.js:1776
      _trySubscribe @ Observable.js:42
      subscribe @ Observable.js:28
      innerSubscribe @ innerSubscribe.js:67
      _innerSub @ mergeMap.js:57
      _tryNext @ mergeMap.js:51
      _next @ mergeMap.js:34
      next @ Subscriber.js:49
      (anonymous) @ subscribeToArray.js:3
      _trySubscribe @ Observable.js:42
      subscribe @ Observable.js:28
      call @ mergeMap.js:19
      subscribe @ Observable.js:23
      call @ filter.js:13
      subscribe @ Observable.js:23
      call @ map.js:16
      subscribe @ Observable.js:23
      getUsers @ user-list.component.ts:20
      ngOnInit @ user-list.component.ts:16
      callHook @ core.js:3038
      callHooks @ core.js:3008
      executeInitAndCheckHooks @ core.js:2960
      refreshView @ core.js:7178
      refreshComponent @ core.js:8319
      refreshChildComponents @ core.js:6956
      refreshView @ core.js:7213
      renderComponentOrTemplate @ core.js:7277
      tickRootContext @ core.js:8491
      detectChangesInRootView @ core.js:8516
      detectChanges @ core.js:9893
      tick @ core.js:28344
      _loadComponent @ core.js:28380
      bootstrap @ core.js:28321
      (anonymous) @ core.js:28023
      _moduleDoBootstrap @ core.js:28023
      (anonymous) @ core.js:27993
      invoke @ zone-evergreen.js:364
      onInvoke @ core.js:27430
      invoke @ zone-evergreen.js:363
      run @ zone-evergreen.js:123
      (anonymous) @ zone-evergreen.js:857
      invokeTask @ zone-evergreen.js:399
      onInvokeTask @ core.js:27418
      invokeTask @ zone-evergreen.js:398
      runTask @ zone-evergreen.js:167
      drainMicroTaskQueue @ zone-evergreen.js:569
      Promise.then (async)
      scheduleMicroTask @ zone-evergreen.js:552
      scheduleTask @ zone-evergreen.js:388
      scheduleTask @ zone-evergreen.js:210
      scheduleMicroTask @ zone-evergreen.js:230
      scheduleResolveOrReject @ zone-evergreen.js:847
      then @ zone-evergreen.js:979
      bootstrapModule @ core.js:28018
      zUnb @ main.ts:11
      __webpack_require__ @ bootstrap:79
      0 @ main.js:11
      __webpack_require__ @ bootstrap:79
      checkDeferredModules @ bootstrap:45
      webpackJsonpCallback @ bootstrap:32
      (anonymous) @ main.js:1
      Show 25 more frames
      core.js:4197 ERROR HttpErrorResponse {headers: HttpHeaders, status: 0, statusText: "Unknown Error", url: "http://localhost:8080/webapps/users", ok: false, …}

      ReplyDelete
      Replies
      1. Make sure you added @CrossOrigin to Spring MVC contollers like:
        @RestController
        @CrossOrigin(origins = "http://localhost:4200")
        @RequestMapping("/api/v1")
        public class EmployeeController {
        }

        Delete

    Post a comment