Implementation of CRUD operations for database entity with AngularJS, Spring Boot and Spring-Data-JPA

In this article, thanks to Veselin Pavlov, we will see how to implement CRUD (Create, Read, Update, Delete) functionality for a database entity. We will start by creating the tables in the database, after that we will define the entity in the java code. We will use spring-data-jpa to implement JPA repositories and we will define a RestController with Restful services for the entity. After that we will implement user interface for the REST API, with the help of the AngularJS framework. The whole project is available in the following github repository.

Implementation of the back-end

We will start the implementation of the back-end by preparing the database. After that we will create a maven project with Spring Tool Suite and we will implement the rest of the back-end functionality.

Create the database tables

Let’s create the following tables: Department and Employee with relation many to one between them. Many employees can be in the same department but one employee has only one department. For the example I will use PostgreSQL instead of the in memory database, because I want to show you how to configure the database in the Spring ecosystem. Below are listed the queries that create the two tables:

Setup the project with maven

Ok we are ready with the database setup, now let’s create a maven project in the STS(Spring Tool Suite) IDE.

1. Download and install Spring Tool Suite.
2. Once you run it, go to File -> New -> Maven Project
3. Check “Create a simple project (skip archetype selection)” and click Next
4. Populate Group Id with package name like: eu.dreamix.crud, and populate Artifact Id with just the last of the package name – crud. The part in the Group Id with name “crud” is the name of the application. This link here describes the naming convention for Group Id and Artifact Id:
5. Change the packaging to war and click Finish.
6. The first thing that we can notice is that we have an error in our pom file. This is because we chose war packaging but there is no web.xml file. We don’t need web.xml because we will use Spring Boot, so we simply have to add the necessary configuration and dependencies in the pom.xml file.
7. Change the pom file to include:

8. Call maven update by clicking with the right button on the project -> Maven -> Update Project (or simply press alt + F5). The error should disappear now.
9. The last step is to create a class with main method that will run our application. Create a package eu.dreamix.crud. Add a new class with a name CrudApp, check the checkbox to create main method. Modify the class according to the code below:

10. Now we have fully setup spring boot application. If we run the application it will start embedded tomcat server and we will be able to access it at localhost:8080. However we don’t have any actions implemented yet, so let’s create a simple rest controller to show a greeting message. I like to put the rest controllers in a sub package, so create a sub package and create a class GreetingController:

11. If we run the application and access http://localhost:8080/ we will see our “Greetings!” message. We are ready with the initial setup of the application.

Implement JPA Entities

We have our application up and running, we can now create the JPA entities reflecting the tables that we created in the database.

1. The first step is to add the spring-data-jpa dependency in our pom file. Add the following dependency under the dependencies tag:

2. Now we have all the annotations that will allow us to define the entity. Firstly, create another package eu.dreamix.crud.domain. In this package we will put our entities which define the domain of the application. Create a class Department as follows:

As you can see the class is annotated with @Entity, which marks it as database entity. The field id of type Integer is marked with annotation @Id which is used to specify the primary key for the entity. The annotation @GeneratedValue marks the field to use auto increment and GeneretionType.IDENTITY defines the auto increment strategy. The other two fields are annotated with @NotNull which is very descriptive. It forces the fields to not accept null values.

3. Let’s create the Employee entity. It is a bit more complex, because we will implement many-to-one relationship with the department entity. Create a class Employee as follows:

Here we use @ManyToOne annotation to implement a many-to-one relationship between Employee and Department. With @JoinColumn we point the field that relates to the other table. In “name” we write the name of the column in the employee table and in “referencedColumnName” we write the name of the column in the department table. With @Table and @UniqueConstraint we implement a composite unique constraint for the fields department_id and name. This creates a restriction to prevent inserting same Employee in different Department.

4. We will continue by configuring the database connection. In order to connect the database with our project, we must create a configuration file that Spring can find. Spring can find the configuration from a lot of places but I like to put it in the resources folder. In this Spring Reference of Spring Boot, we can see all the places where we can put our confguration:

So create a file in the the folder src/main/resources/config with the name application.yml, like it is shown in the screenshot.


The content of the file is as follows:

We can also create a .properties file, but I find the yml format more pretty. So as you can see we configure the jdbc url, username, password and driver class. As you can notice we are using a postgres driver but we don’t have it yet in our project. In order to add the driver to our application we must add another dependency in the pom file. Add the following between the <dependencies> tag.

Note that if you are using other database, you need to add the driver for the particular database that you use. For example if you use MySQL, you must configure the MySQL driver.

Here I also want to mention that you can configure the application to use the so called code-first approach. Code-first means that we first design our entities as java classes and then the application creates the tables by itself. In order to configure this behavior in our application we need to add the following configuration under spring tag:

This key: is from the hibernate library that spring-data-jpa uses. There are other values that can be configured. The update will only update or create the tables if they don’t exist.
One last thing about the configuration, we can change the type of the DataSource. Spring has several default choices if they are available in the classpath. You can read more about production DataSources in the Spring Boot Reference here:

That was all about the entities, there are a lot more useful annotations, however they are not included in this article. For example we often need to exclude some fields when we represent the objects in JSON and there is an annotation that can help us with this.

Implement JPA Repository

Now that we have all entities implemented, we can use them to map data from the tables as java objects. This is implemented with repositories. We will start by creating a simple employee repository.

1. Create a new package eu.dreamix.crud.repository. We will put all our repositories in this package.

2. Create an interface EmployeeRepository as follows:

That is all we need to create, update, read and delete records from the database programmatically. To be honest I was really surprised when I found out that I don’t need to implement any logic at all in order to communicate with the database. Spring is so smart that only from this code, it knows how to implement the interface and offer us the functionality. Here it is probably good to mention that we can add other methods that Spring will implement for us out of the box. For example we can add a method,  findByName(String name) and that will be enough to get the record with the given name. You can read more about this in Spring Boot Reference here:

3. Let’s create one more repository for the Department entity. Create an interface DepartmentRepository as follows:

You can notice here that we implemented one query method that makes searches by description.
That was all about the repositories. Pretty easy right?

Implement Services

This part is not really necessary but I like to create services in order to separate the business logic. For our simple example we don’t have a lot of business logic, however in a real project we will probably need the service layer. This is pretty standard architecture of a web application. We have a persistence layer, a business/service layer and presentation layer. Let’s create a simple service that will make all interactions with the repositories.

1. Create a new package eu.dreamix.crud.service. We will put all services in this package.

2. Create a class EmployeeService as follows:

In this service we have all methods that we need to create, update, delete and read records. We marked the class with @Service annotation, in order to inform spring that this is a service. We use @Autowired annotation in the constructor to autowire the EmployeeRepository. Note that this @Autowired annotation is not necessary if we have only one constructor as of spring 4.3 version, however I put it anyway because it is more descriptive that we use constructor injection. The implementation is very simple, we use the methods provided by the repository to manipulate the records. The Repository doesn’t offer an update method. The method save will update a record if it already exists and will create a new one if there is no such record yet. That is why for the save and update methods we first check if there is such an entry in the database. We throw appropriate exceptions for the situations that we are interested in. Later on we will handle them in the REST controllers.

3. Create a class DepartmentService as follows:

We are now ready with the services. The department service is a lot like the employee service, so I am not going to describe the implementation.

Implement REST Controller

Let’s implement now the rest controllers that our front-end will use to manipulate the entities. We will start with the employee resource.

1. Create a new class under called EmployeeResource with the following content:

In order to define the class as a rest controller we use the @RestController annotation. With @RequestMapping(“/api”) we define a root path that all methods will go under. We use the same annotation @RequestMapping when we define the methods as well, but there we define specific path only applied for the method. With the same annotation we define the method type ( GET, POST, PUT, DELETE etc.) and the returned media type. With @RequestBody we mark that a method parameter should be expected in the body of the request. With @PathVariable we mark that a method parameter should be retrieved from the requested path. Check the path for the delete method, there we define a variable {id} in the path itself. There is one more kind of parameters called query parameters, they are defined with @RequestParam and they are retrieved again from the url path but after the question mark (for example /api/employee?name=John). The rest of the implementation is self descriptive, we call the methods from the EmployeeService and we handle the exceptions. Note that for the update method I make one validation if the employee id is null. This logic should be implemented in the service as well. Basically when I develop rest services I try to minimize the code in the rest controller and put everything in the services. Here I will mention that we can even get rid of the code that handles the exceptions with the aspect oriented concepts implemented in spring. We can define a behavior, in event of an exception, for all rest controllers. Then we won’t need to implement try and catch for every method in every rest controller. The annotation used for this is @ControllerAdvice but it is not part of this article.

2. Create a new class under called DepartmentResource with the following content:

Again I won’t go into details about the implementation for DepartmentResource because it is very much similar to the EmployeeResource implementation.
With this we are finished with the the back-end and we can start implementing a client for our application.

Implementation of the front-end

The front-end will be implemented with AngularJS. We communicate with the back-end by making requests only for data. As comparison with other technologies, with JSF we prepare the UI in the back-end as well and we send the whole HTML to the client. However with the technology stack of this article we send the HTML only once and through JavaScript, we make asynchronous HTTP requests to retrieve data from the back-end. Then with the help of the JavaScript framework AngularJS we update the HTML accordingly.

Setup the AngularJS

Firstly we need to add new index.html file under /src/main/webapp and delete the GreetingController. By doing this we will make the spring boot load our index.html page at root, instead of the greeting message.

In order to use the AngularJS we simply have to add the dependency in our HTML. Since we will be making Http requests, we need to add another javascript to our project – angular-resource.js. I also include bootstrap in order to style and structure the UI, however this is not required. I use google CDN to add the javascripts in my project, but for a real project it is better to download the minified versions of the files and include them in the project. Those are the files that I include in the <head> of the html.

The jQuery is added because it is required by bootstrap. In order to create angular application I created another javascript under /webapp/app/ folder called app.js with the following content:

Note that every new javascript file that we create must be added in index.html as well. This code defines a new angular application, it is just one line but I like to keep the things separated. The ngResource is a module that our application uses. It comes from the file angular-resource.js. There is one last step, we must put ng-app attribute in our html <body> like this:

By doing this we define the scope of our application to be over the whole body.

Creating Angular Service to access the REST API

All the logic can be implemented in an angular controller, however it is a good idea to separate the logic that is not responsible for updating of the HTML in an angular service. We will put the logic that makes requests to the back-end in two services.

1. Create a file under webapp/app/ called employee.service.js and add it to the index.html. Below is the content of the file:

This code will create a service Employee. You probably noticed that we called again angular.module(), however this time we didn’t pass an array in the function. If we don’t pass an array of dependencies in the angular.module(), the function will return an already existing module with this name instead of creating new one. With the factory method we define a service, and with $Inject we include dependencies that we will use in our service. Here we are using the $resource factory which allows us to make REST calls to the back-end. It is a wrapper around $http and offers us more convenient way to implement our logic. You can read more about $resource in the angular documentation here:$resource

2. Create a file under webapp/app/ called department.service.js with the following content:
angular.module(‘crudApp’).factory(‘Department’, Department);

This code will create a Department service. It is similar to the employee service.

Creating a controller

The logic in the controller should be only concerned with the flow of user actions and the displayed content. For the example I created only one controller called, GeneralController. Create a file in the folder webapp/app/general.controller.js and include the file in index html. Below is the content of the file:

With the controller() function we create an angular controller. In order to use our controller we must define it in the HTML as well. I want this controller to operate over the whole html so I added it in the body tag as follows:

You will probably notice that we use a lot $scope in the code. The $scope is used to attach variables and functions that we can use in the HTML. Through the scope we implement two way binding, meaning that if some variable gets updated in the controller, it will be reflected in the UI and if some value in the HTML changes it will be reflected in the controller as well. I won’t go over every method in the controller because they are pretty straight forward. Only the updating of a record consist of two actions. The first one is when we initialize the updating, this will put the content of the record that we want to update in the input fields and when we click submit it will save them in the database.

Creating the user interface

For the user interface as I mentioned I use the bootstrap library. The UI is very simple and it only demonstrates the functionality. It is implemented in the index.html file. Here is a screenshot of how it looks:


Creating UI for Departments

Below is the html code to create, read, update and delete department entities. This code is located right under the body opening tag.


In this implementation we use several angular directives to attach the HTML with the javascript. One of them is ng-submit which takes function that is executed when the form is submitted. With ng-model we bind a javascript variable to html input field or select field. One interesting directive is ng-repeat. It is like a foreach loop and it repeats the html content defined inside it for every record. The ng-click again takes a function that is executed on every click of the component. We can use the curly brackets to write angular expressions, which are javascript code inside the HTML. For example {{}} will display the field name of the object department.

Creating UI for Employees

The UI for Employees is very similar to the departments UI. Below is the code:

There is only one different part here, the select tag. Again with the help of angular, we can bind variable in which we want to save the selected value with ng-model and we can bind another variable from where the list of values are taken.

That was everything about the UI

Data Access Object (DAO) design pattern in Java

Data Access Object (DAO) design pattern in Java – Tutorial Example

Data Access Object or DAO design pattern is a popular design pattern to implement persistence layer of Java application. DAO pattern is based on abstraction and encapsulation design principles and shields rest of application from any change in the persistence layer e.g. change of database from Oracle to MySQL, change of persistence technology e.g. from File System to Database. For example, if you are authenticating the user using a relational database and later your company wants to use LDAP to perform authentication. If you are using DAO design pattern to access database, it would be relatively safe as you only need to make a change on Data Access Layer. DAO design pattern also keeps coupling low between different parts of an application. By using DAO design pattern your View Layer is completely independent of DAO layer and only Service layer has the dependency on it which is also abstracted by using DAO interface.

Btw, DAO or Data Access Object Pattern is not a GOF design pattern as prescribed by Gang of Four on the classic book, Design Patterns: Elements of Reusable Object-Oriented Software.  It’s not one of the object oriented design pattern but something which arises from the use of Encapsulation. By keeping data access code together, away from business logic so that it can be developed, optimized and change without impacting other layers of application e.g. Model and View layer.

You can further use Generics to template your DAO layer. If you are using Spring then you can leverage JdbcTemplate for performing JDBC calls which save a lot of boilerplate coding. Using DAO pattern to access database is one of the JDBC best practices to follow. 

What is Data Access Object (DAO) pattern in Java

Data access object design patter or DAO pattern in Java with ExampleIn short Data Access Object or DAO design pattern is a way to reduce coupling between Business logic and Persistence logic. Application business logic often needs domain objects which are persisted in either Database, File System or any other persistence storage. DAO pattern allows you to encapsulate code for performing CRUD operation against persistence from rest of application. Which means any change on persistence logic will not affect other layers of application which are already tested. DAO pattern enables an application to cope with any change in database provider or persistence technology.In next section, we will What are the main benefits of using DAO design pattern in Java application. If you are a J2EE developer, you should read Real World Java EE patterns and best practices, one of the best books to learn Java EE patterns for experienced Java JEE programmers.


Good book to learn Java EE Patterns



Benefits of using DAO design pattern
DAO or Data Access Object design pattern is a good example of abstraction and encapsulation object oriented principles. It separates persistence logic is a separate layer called Data access layer which enables application to react safely to change in Persistence mechanism. For example, if you shift from File-based persistence mechanism to Database, your change will be limited to data access layer and won’t impact Service layer or domain Objects. Data Access Object or DAO pattern is pretty much standard in Java application being it core Java, web application or enterprise application. Following are couple of more benefits of using DAO pattern in Java application:


1) DAO design pattern allows JUnit test to run faster as it allows to create Mock and avoid connecting to database to run tests. It improves testing because it’s easy to write test with Mock objects, rather than an Integration test with the database. In the case of any issue, while running Unit test, you only need to check code and not database. Also shields with database connectivity and environment issues.
2) Since DAO pattern is based on interface, it also promotes Object oriented design principle “programming for interface than implementation” which results in flexible and quality code.


How to use DAO Pattern in Java JEE Application

Here is a nice diagram how to implement Data Access Pattern in a Java and J2EE application. You can see that your DAO classes e.g. AddressDAO, PersonDAO, and CompanyDAO are accessing database and populating data into a Contact object.

A Client Service is not directly accessing these classes instead it is accessing it via a ContactDAO interface and object are created using ContactDAOFactory class which returns the DAO implementation based on the database vendor e.g. here it is returning classes which can interact with HSQL DB. You can return classes which can interact with Oracle, SQL Server or MySQL database as well.


Data Access Object Pattern in Java



DAO design pattern Example

In the core of Data Access Object or DAO pattern is a Java interface, which defines a various method to perform CRUD operation e.g. Create, Read, Update, and Delete. Based on your application back-end technology you can create different implementation of this interface e.g. JdbcDAOImpl to connect database using JDBC, HibernateDAOImple to use hibernate or FileDAOImpl if you are using the File system for persistence. Service layer which uses this Data Access Object will use interface to interact with Data access layer. Here is how a typical DAO Interface looks like:
public interface AccountDAO{
public boolean save(Account account);
public boolean update(Account account);
public boolean findByAccountNumber(int accountNumber);
public boolean delete(Account account);

it defines various methods to perform CRUD operation. Now you can create different implementation of this AccountDAO interface e.g. JdbcAccountDAOImpl or HibernateAccountDAOImpl. Your JdbcAccountDAOImpl will use JDBC API or Spring JdbcTemplate along with SQL Queries to perform CRUD operations.
That’s all on what is Data Access Object or DAO pattern in Java and what are benefits of using DAO pattern in Java application. We have also seen a simple example of How to implement Data Access Object pattern with AccountDAO interface. It’s standard and one of the standard JDBC practices to use DAO pattern to create the persistent layer in Java application.

Further Learning
Design Pattern Library
From 0 to 1: Design Patterns – 24 That Matter – In Java
Java Design Patterns – The Complete Masterclass

Other Java design pattern tutorials from Javarevisited blog