Spring framework and AngularJS are very popular for developing back end and front end application. AngularJS is an advanced JS framework, which supports back end interaction with Spring based components. In this article, we will try to explore how AngularJS can work with Spring Data REST and make CRUD operation simple.
What is Spring Data REST?
Spring Data REST is based on Spring DATA project. It helps to make hypermedia-driven REST web services to connect to the Spring Data repositories. Spring DATA Rest takes care of boilerplate code and makes it simple to build CRUD applications.
Advantages of Spring Data REST
Spring DATA Rest is a way to expose your data as a Restful service. It is not like Spring Data JPA. It is the implementation where you can expose your data repository as a Restful service. And, you can perform CRUD operation through Rest calls.
Why Angular JS?
AngularJS is one of the most popular JS frameworks to build applications. AngularJS has all the components to interact with the back end Rest service. It is well structured and simple to build applications. So, AngularJS and Spring DATA Rest is a perfect combination to make efficient CRUD applications.
Combining AngularJS and Spring Data REST
In this article, we will create applications by using AngularJS components and Spring DATA Rest. We will use MySQL DB to perform CRUD operations. We will use maven to get the dependencies and build the simple CRUD application. AngularJS components will be embedded in the HTML file.
Sample application
In this section we will build one simple CRUD application by using AngularJS and Spring Data REST.
First, we will check different components to set the Spring Data REST.
Following is a sample pom.xml file mentioning the dependencies for Spring Data REST. Here, we have mentioned MySQL as the data base. But, it can be changed to any other database as per the requirement.
Listing 1: – Sample maven dependencies
[code]
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId
<artifactId>spring-boot-starter-data-rest</artifactId></dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-data-jpa</artifactId>
</dependency>
<dependency>
<groupId>mysql</groupId>
<artifactId>mysql-connector-java</artifactId>
</dependency>
[/code]
Now, we will create a domain object. The domain object depends upon the business requirement. Here, we will have a simple domain object for user of our application ‘ApplicationUser’. In this domain object, we have auto generated user id, username and useremail.
Listing 2: – Sample domain object referring user
[code]
@Entity
public class ApplicationUser {
@Id
@GeneratedValue(strategy = GenerationType.AUTO)
private long id;
private String username;
private String useremail;
// create standard getters and setters
}
[/code]
Here, we will write a simple interface to deal with ApplicationUser objects. Here the end point is ‘/appusers’.
Listing 3: – Sample interface
[code]
@RepositoryRestResource(collectionResourceRel = "appusers", path = "appusers")
public interface AppUserRepository extends PagingAndSortingRepository<ApplicationUser, Long> {
List<ApplicationUser> findByName(@Param("username") String username);
}
[/code]
We have completed the 1st part of setting up Spring Data Rest components. It is now ready to be used from AngularJS application.
In the second part, we will check AngularJS components which will initiate the CRUD operations through Spring Data REST.
Here, we will create the AngularJS client. This is the access point to the application.
Listing 4: – Sample appusers.html file
[code] <html ng-app="app"> <head> <meta charset="ISO-8859-1"> <title>App user CRUD application</title> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script> <script src="view/app.js"></script> </head> <body> <div ng-controller="AppUserCRUDCtrl"> <a ng-click="getAppUser(user.id)">Get User</a> </body> </html> [/code]
Now, we will check the service part of AngularJS. There will be different methods to call different services. We will examine the initial method to understand the coding part.
Listing 5: – Sample Angular service
[code]
app.service('AppUserCRUDService', [ '$http', function($http) {
this.getAppUser = function getAppUser(appuserId) {
return $http({
method : 'GET',
url : 'appusers/' + appuserId
});
}
} ]);
[/code]
Following is the sample Angular controller having the getAppUser () method. The Angular service is added in the controller. We can also have other CRUD methods defined in the controller. We have added a single method to keep it simple.
Listing 6: – Sample Angular controller
[code]
app.controller('AppUserCRUDCtrl', ['$scope','AppUserCRUDService',
function ($scope,AppUserCRUDService) {
$scope.getAppUser = function () {
var appid = $scope.user.id;
AppUserCRUDService.getAppUser($scope.user.id)
.then(function success(response) {
$scope.appuser = response.data;
$scope.user.id = appid;
$scope.message='';
$scope.errorMessage = '';
},
function error (response) {
$scope.message = '';
if (response.status === 404){
$scope.errorMessage = 'App User not found!';
}
else {
$scope.errorMessage = "Error getting App user!";
}
});
};
}]);
[/code]
Here ends the coding part. Once the html page is executed , it will show the app users based on the user id.
Conclusion: –
This article is all about Spring Data REST and AngularJS. We have made a simple application to show how AngularJS can work with Spring framework and make the CRUD operation simple.
