Slides from talk at 'I code Java 2016'

1. Consume Spring Data Rest
using AngularJS
Corneil du Plessis
corneil.duplessis@gmail.com
corneil@jumpco.io
@corneil
about.me/corneil

2. Introduction

3. What is Spring Data Rest
● Spring Data Repositories
● REST
Representational State Transfer
● HATEOAS
Hypermedia as Engine of Application State

4. Steps
● Spring Boot Application
– http://start.spring.io
– Entities
– Repositories
● Web Application
– Angular Service
– Angular Controller
– Web Page

5. Component Model

6. Spring Initializr

7. Entities
● JPA @Entity
● MongoDB @Document
@Entity
public class User {
@Id @GeneratedValue
private Long id;
@NotNull @Column(unique = true)
private String userId;
@Temporal(TemporalType.DATE)
@DateTimeFormat(iso = DateTimeFormat.ISO.DATE)
private Date dateOfBirth;
@Email @NotNull
private String emailAddress;
@NotNull
private String fullName;
}

8. Repositories
public interface UserRepository extends CrudRepository<User, Long> {
User findOneByUserId(
@Param("userId") String userId);
List<User> findByUserIdContainsIgnoreCase(
@Param("input") String input);
}

9. Create Data
● SoapUI
● HAL Browser

10. Customizing Resources
● @RestResource
● @RepositoryRestResource
● Extend ResourceProcessor
● EntityLinks
● Projections

11. Custom Repository Behaviour
● Finder Methods
● Extend AbstractRepositoryEventListener
– onBefore and onAfter
– for Delete/Save/Create/Link

12. Angular Service
● $q Asyncronous service with deferred and promises
● $resourceProvider
● Module ngResource
● $resource service
● $cacheFactory

13. Angular Service
angular.module('springDataRestDemo')
.service('UserService',
['$q', '$resource', '$log', 'userCache', '$http',
function ($q, $resource, $log, userCache, $http) {
var Users = $resource('/rest/users', {}, {
create: {method: 'POST'},
list: {method: 'GET'}
});
return {
loadAllUsers: function () {
var deferred = $q.defer();
Users.list().$promise.then(
function (users) {
deferred.resolve(users._embedded.users);
},
function (response) {
deferred.reject(response);
});
return deferred.promise;
}
}

14. Angular Service
createUser: function (user) {
var deferred = $q.defer();
Users.create(user).$promise.then(
function (user) {
deferred.resolve(user);
},
function (response) {
deferred.reject(response);
});
return deferred.promise;
}

15. Angular Service
saveUser: function (user) {
var deferred = $q.defer();
var User = $resource(user._links.self.href, {}, {save: {method: 'PUT'}});
User.save(user).$promise.then(
function (data) {
deferred.resolve(data);
},
function (response) {
deferred.reject(response);
});
return deferred.promise;
}

16. Angular Controller
$scope.users = null;
$scope.promise = UserService.loadAllUsers();
$scope.promise.then(function (users) {
for (var i in users) {
users[i].selected = false;
}
$scope.users = users;
}, function (response) {
alert('Load error: ' + response.statusText);
});

17. Angular Controller
$scope.save = function () {
$scope.errorMessages = [];
$scope.user.dateOfBirth = moment($scope.dateOfBirth).format('YYYY-MM-DD');
var promise = $scope.newUser ? UserService.createUser($scope.user)
: UserService.saveUser($scope.user);
promise.then(
function (user) {
$mdDialog.hide(user);
NotificationService.toastMessage($scope.newUser ? 'User Created'
: 'User Saved');
},
function (response) {
if (response.status == 409 && response.statusText == 'Conflict') {
$scope.userForm.userId.$setValidity('unique', false);
} else {
var errorData = response.data;
$scope.errorMessages.push(errorData.message);
}
});
}

18. Web Page
<table ng-controller="UserController">
<thead>
<tr>
<th>User Id</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>
<tbody>
<tr ng-repeat="user in users">
<td ng-bind="user.userId"></td>
<td ng-bind="user.fullName"></td>
<td>
<button ng-click="editUser($event, user)" value="Edit"></button>
<button ng-click="deleteUser($event, user)" value="Delete"></button>
</td>
</tr>
</tbody>
</table>

19. Security
● Spring Data Rest
– @RepositoryRestResource(
exported = false)
– @RestResource(exported = false)
● Spring Security
– HttpSecurity
– @PreAuthorize(“hasRole('UserAdmin')”)
● Spring Data
– @Query(“select u from User u where u.name
== ?#{principal.name}”)

20. Questions
● Code - https://github.com/corneil/spring-data-rest-angular-demo
● Slides - http://www.slideshare.net/CorneilduPlessis
● Profile https://about.me/corneil
● Twitter @corneil