Spring Boot + Angular 5 +Spring Data + Rest Example(CRUD)

author-image   By Dhiraj,   Last updated on: 04 January, 2019 329K

This tutorial provides a complete implementation of Spring Boot, Angular 5 and spring data to build an end to end single page java web application with example.We will be using spring boot 1.5 to expose REST APIs and angular5 with routing to build our client that will be consuming the APIs exposed by the server.Also, we will be integrating MySql database with the backend code for CRUD operation.We will be using angular CLI to generate angular project and spring boot initializers to generate spring boot project.At the end of this article, you will be able to build a user management application with CRUD operation that can either be deployed to a standalone tomcat or deploy client and server to different servers with cross origin requests.

Angular 7 got released this October and here is an Angular 7 full stack App example with Spring Boot.

You can follow this article for Angular 8 integration with Spring Boot.

In the next article, we will look into different ways to package spring boot and angular 5 application together in a single war file with maven and deploy to standalone tomcat. Also you might be interested in integrating this application with Angular5 JWT Authentication with Spring Boot Security

The latest Angular version is 6 and here is an CRUD Example with Angular 6

Table of Contents
  1. Angular 5 Features
  2. Environment Setup
    1. Angular 5 Environment SetUp
    2. Spring Boot Environment SetUp
  3. Different Files Generated by CLI command
  4. Spring Boot Implementation
    1. Spring Boot Rest APIs
    2. Spring Boot Service Implementation
    3. Spring Boot JPA Implementation
    4. Spring Boot Application Configuration
  5. Angular Implementation
    1. Different Angular Component
    2. Angular List User Component
    3. Add User Component
  6. Angular Routing
  7. Angular Module
  8. Angular CLI Proxy Configuration
  9. Running Spring Boot Application
  10. Running Angular App

Angular 5 Features

1. Angular 5 is more faster, lighter and easy to use.

2. Material design capabilities and improved compiler with build optimizer

3. New HttpClientModule is introduced which is a complete rewrite of the existing HttpModule.

4. TypeScript 2.4 support.

5. Reactive Forms Support

Environment Setup

We have two different part, client and server, of the application that we are going to build and hence, the environment set up is also specific to each part.

Angular 5 Environment SetUp

We will have a plain angular project setup here.Check one of my article to integrate material design in angular 5 project. Angular 5 provides a beautiful tool - Angular CLI to get started with Angular. Here, we will be using the same tool to generate a sample angular app and then modify it to match our requirement.To get started with Angular CLI, it is required to have node installed so that we can use the NPM tool. You can check if node is installed or not on your machine by hitting node -v. On my machine I get following result.


If not installed visit NodeJs official website to install it first.Now, once it is done, traverse to your workspace location and execute following commands to install angular cli and generate a sample angular project.

npm install -g @angular/cli
ng new portal-app

Once this is done, you can traverse to the location and see a folder portal-app is created that contains all the files and folders generated by angular cli command to get started with angular 5.Now you can open your favourite editor to import the project.I imported this project in IntellijIdea and got the structure as below:


One thing to check here is that if you have installed your NodeJs with sudo command, then you might get some permission issue as below while installing angular cli.To avoid these kind of situation, it is always recommended to use brew command while installing any new software.

If you face this issue then provide read/write access to the folder - /usr/local/lib/node_modules or follow the instruction here - Mac Support

For windows user, you can use git command line or cygwin for the installation.

Spring Boot Environment Setup

Spring boot team has really made spring boot environment setup easy by providing default initializers.Open the url https://start.spring.io/ and generate the project as follow.


Now unzip user-portal.zip and import into java IDE. Following will be the final structure.


Files Generated by Angular CLI

Now let us try to understand the different files generated.

Modules - Modules break up the application into logical pieces of code. Each piece of code or module is designed to perform a single task.All the modules are loaded by main.ts.

Component - Component is used to bring the modules together.

tsconfig.json - The presence of tsconfig.json file in a directory indicates that the directory is the root of a typescript project.This file specifies the root files and typescript compiler motions required to compile typescript.

package.json - It contains all the dependencies defined for the angular project.Once, we do nom install, these dependencies are automatically downloaded.

karma.conf.json - Config file for karma unit tests.

The file .angular-cli.json will have all the application configurations such as info about the root and out directory.The welcome or main html file along with the main ts file. All the other environment related information will be present here.

Now it's time to run the dfault generated application and see it in the browser. If you are using IntellijIdea then you can run ng serve command from Terminal inside it and if not hit following command in the terminal.

 cd portal-app
 ng serve

After this open your browser and hit the url - http://localhost:4200/ and the angular app is up. Now we can start modifying the app to create a user management portal.

Spring Boot Rest APIs

Now, let's start by creating our APIs first.We have UerController where all the APIs for CRUD operation is exposed.The @CrossOrigin is used to allow Cross-Origin Resource Sharing (CORS) so that our angular application running on different server can consume these APIs from a browser.We can also configure the proxy in angular side using proxy.config.json which has been discussed in the subsequent topic.

package com.devglan.userportal;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.web.bind.annotation.*;

import java.util.List;

@CrossOrigin(origins = "http://localhost:4200", maxAge = 3600)
public class UserController {

    private UserService userService;

    public User create(@RequestBody User user){
        return userService.create(user);

    @GetMapping(path = {"/{id}"})
    public User findOne(@PathVariable("id") int id){
        return userService.findById(id);

    public User update(@RequestBody User user){
        return userService.update(user);

    @DeleteMapping(path ={"/{id}"})
    public User delete(@PathVariable("id") int id) {
        return userService.delete(id);

    public List findAll(){
        return userService.findAll();

Spring Boot Service Implementation

The service class has no extra logic here and it's a very a simple implementation.

public class UserServiceImpl implements UserService {

    private UserRepository repository;

    public User create(User user) {
        return repository.save(user);

    public User delete(int id) {
        User user = findById(id);
        if(user != null){
        return user;

    public List findAll() {
        return repository.findAll();

    public User findById(int id) {
        return repository.findOne(id);

    public User update(User user) {
        return null;

Spring Boot Data Implementation

We will be using Spring data JPA implementation for ORM related solution.To know inside implementation of Spring data you can visit my other post - Spring Boot JPA and Spring Boot Hibernate implementation.

package com.devglan.userportal;

import org.springframework.data.repository.Repository;

import java.util.List;

public interface UserRepository extends Repository {

    void delete(User user);

    List findAll();

    User findOne(int id);

    User save(User user);

Spring Boot Application Configuration


Default Scripts


Different Angular Components

Angular CLI has generate command to create component.Hit the command ng generate component user and it will create a user folder inside app folder.This user folder will have all the required files for user module.

At first we will modify app.component.html to include 2 links for list users and add users.All our views willl be loaded inside router-outlet.

<div class="container-fluid">
<div class="col-md-offset-1">
    Welcome to {{title}}!

<a routerLink="/users"> List Users</a>
<a style="margin-left:10px" routerLink="/add">Add User</a>

Angular List User Component

Since, we have two routes defined above, we require two different views(user.component.html, add-user.component.html) and components(user.component.ts, add-user.component.ts) to render on each click.Now let us implement the code for user.component.ts.Here, the method ngOnInit() will be invoked when this component is loaded and it will fetch all the user records and the html page will be populated.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

import { User } from '../models/user.model';
import { UserService } from './user.service';

  selector: 'app-user',
  templateUrl: './user.component.html',
  styles: []
export class UserComponent implements OnInit {

  users: User[];

  constructor(private router: Router, private userService: UserService) {


  ngOnInit() {
      .subscribe( data => {
        this.users = data;

  deleteUser(user: User): void {
      .subscribe( data => {
        this.users = this.users.filter(u => u !== user);

<div class="col-md-6">
<h2> User Details</h2>

<table class="table table-striped">
    <th class="hidden">Id</th>
  <tr *ngFor="let user of users">
    <td class="hidden">{{user.id}}</td>
    <td><button class="btn btn-danger" (click)="deleteUser(user)"> Delete User</button></td>

Angular Add User Component

Similarly we have add-user.component.ts
import { Component } from '@angular/core';
import { Router } from '@angular/router';

import { User } from '../models/user.model';
import { UserService } from './user.service';

  templateUrl: './add-user.component.html'
export class AddUserComponent {

  user: User = new User();

  constructor(private router: Router, private userService: UserService) {


  createUser(): void {
        .subscribe( data => {
          alert("User created successfully.");



<div class="col-md-6">
  <h2 class="text-center">Add User</h2>
  <div class="form-group">
    <label for="email">Email address:</label>
    <input type="email" [(ngModel)]="user.email" placeholder="Email" name="email" class="form-control" id="email">

  <div class="form-group">
    <label for="firstName">First Name:</label>
    <input [(ngModel)]="user.firstName" placeholder="First Name" name="firstName" class="form-control" id="firstName">

  <div class="form-group">
    <label for="lastName">Last Name:</label>
   <input [(ngModel)]="user.lastName" placeholder="Last name" name="lastName" class="form-control" id="lastName">

  <button class="btn btn-success" (click)="createUser()">Create</button>

export class User {

  id: string;
  firstName: string;
  lastName: string;
  email: string;
import {Injectable} from '@angular/core';
import { HttpClient, HttpHeaders } from '@angular/common/http';

import { User } from '../models/user.model';

const httpOptions = {
  headers: new HttpHeaders({ 'Content-Type': 'application/json' })

export class UserService {

  constructor(private http:HttpClient) {}

  //private userUrl = 'http://localhost:8080/user-portal/user';
	private userUrl = '/api';

  public getUsers() {
    return this.http.get<User[]>(this.userUrl);

  public deleteUser(user) {
    return this.http.delete(this.userUrl + "/"+ user.id);

  public createUser(user) {
    return this.http.post<User>(this.userUrl, user);


Angular Routing Implementation

Now it's time to configure routing in angular.In this configuration, we will configure the path and corresponding component to load which will in turn load the respective view.Following is our routing configuration.

import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';

import { UserComponent } from './user/user.component';
import {AddUserComponent} from './user/add-user.component';

const routes: Routes = [
  { path: 'users', component: UserComponent },
  { path: 'add', component: AddUserComponent }

  imports: [
  exports: [
  declarations: []
export class AppRoutingModule { }

Angular Module Implementation

Now we are almost done with our application.We only need to include all the above implementation in our main module.

import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { FormsModule } from '@angular/forms';

import { AppComponent } from './app.component';
import { UserComponent } from './user/user.component';
import { AppRoutingModule } from './app.routing.module';
import {UserService} from './user/user.service';
import {HttpClientModule} from "@angular/common/http";
import {AddUserComponent} from './user/add-user.component';

  declarations: [
  imports: [
  providers: [UserService],
  bootstrap: [AppComponent]
export class AppModule { }

Angular CLI Proxy Configuration

To configure proxy in angular CLI, we need to create proxy.config.json file in the root of the angular project and edit the start script in package.json.

  "/api/*": {
    "target": "http://localhost:8080/user-portal",
    "secure": false

The value of target here is the context root of the application and api is the endpoint for user API.

 "start": "ng serve --proxy-config proxy.config.json",

Doing so, the request to http://localhost:4200/api would be proxied to http://localhost:8080/user-portal.

Recently, when I tried above command, it gave me following error.


To fix the above error,replace "@angular/cli": "1.6.3", with "@angular/cli": "^1.6.3", in package.json and run npm update.After this it should work perfectly.

Now make sure to change the userUrl value to '/api' in user.service.ts file and comment @CrossOrigin in UserController.java.Once this done use ng serve --proxy-config proxy.config.json or npm start to start the angular app.

Final Application Structure


Running Spring Boot Application

We will be using spring boot embedded tomcat feature to deploy application.For more on this feature check this.

package com.devglan.userportal;

import org.springframework.boot.SpringApplication;
import org.springframework.boot.autoconfigure.SpringBootApplication;

public class UserPortalApplication {

	public static void main(String[] args) {
		SpringApplication.run(UserPortalApplication.class, args);

Run Angular App

Now the server is up.Hit ng serve to deploy angular application and let's test the application.

Hit the url - http://localhost:4200/ and you can see following result.


Now, click on the Add User link and following form will appear to add user.


Now, click on the list user after adding multiple users.



This is pretty much about spring boot and angular 5 integration tutorial.In the next article, we will look into deploying this application in a single war file with maven and tomcat. You can download the source from here.If time permits, we will try to integrate spring security with it. In fact, we have already integrated with it here - Angular JWT Authentication with Spring Security and Angular OAuth2 JWT Authentication with Spring Security.Please let me know your comments below.

If You Appreciate This, You Can Consider:

  • Like us at: Facebook or follow us at Twitter
  • Share this article on social media or with your teammates.
  • We are thankful for your never ending support.

About The Author


I am an energetic professional who enjoys the challenges involved in working with people and resolving real-time problems. Technical expertise in building highly scalable, distributed and self-healing cloud applications. Technical Skills: Java/J2EE, Spring Framework, Hibernate, Angular, Reactive Programming, Microservices, Rest APIs, Kafka, ELK, etc.

Further Reading on Spring Boot

1 Angular 7 Crud Example

2 Spring Boot Angular Captcha

3 Angular 6 Example

4 Spring Boot Angular Websocket

5 Angular Jwt Authentication

6 Angular Material Dialog

7 Angular Material App

8 Spring Boot Angular Deployment

9 File Upload Angularjs Spring Boot Rest

10 Spring Boot Security Oauth2 Example

11 Spring Boot Security Password Encoding Bcrypt Encoder

12 Storing Hashed Password Database Java

13 Spring Boot Jwt Auth