I just announced the new Learn Spring course, focused on the fundamentals of Spring 5 and Spring Boot 2:

1. Overview

In this tutorial, we’re going to create an example of a simple CRUD application using AngularJS for the front-end and Spring Data REST for the back-end.

2. Creating the REST Data Service

In order to create the support for persistence, we’ll make use of the Spring Data REST specification that will enable us to perform CRUD operations on a data model.

You can find all the necessary information on how to setup the REST endpoints in the introduction to Spring Data REST. In this article, we will reuse the existing project we have setup for the introduction tutorial.

For persistence, we will use the H2 in memory database.

As a data model, the previous article defines a WebsiteUser class, with id, name and email properties and a repository interface called UserRepository.

Defining this interface instructs Spring to create the support for exposing REST collection resources and item resources. Let’s take a closer look at the endpoints available to us now that we will later call from AngularJS.

2.1. The Collection Resources

A list of all the users will be available to us at the endpoint /users. This URL can be called using the GET method and will return JSON objects of the form:

All of these service methods will be called by an AngularJS controller.

3.2. Angular Controller

We will create an UserCRUDCtrlAngularJS controller that will have an UserCRUDService injected and will use the service methods to obtain the response from the server, handle the success and error cases, and set $scope variables containing the response data for displaying it in the HTML page.

Let’s take a look at the getUser() function that calls the getUser(userId) service function and defines two callback methods in case of success and error. If the server request succeeds, then the response is saved in a user variable; otherwise, error messages are handled:

3.3. HTML Page

The users.html page will make use of the controller functions defined in the previous section and the stored variables.

First, in order to use the Angular module, we need to set the ng-app property:

<html ng-app="app">

Then, to avoid typing UserCRUDCtrl.getUser() every time we use a function of the controller, we can wrap our HTML elements in a div with a ng-controller property set:

<div ng-controller="UserCRUDCtrl">

Let’s create theform that will input and display the values for the WebiteUser object we want to manipulate. Each of these will have a ng-model attribute set, which binds it to the value of the attribute: