Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Consume Spring Data Rest
using AngularJS
Corneil du Plessis
corneil.duplessis@gmail.com
corneil@jumpco.io
@corneil
about.m...
Introduction
What is Spring Data Rest
● Spring Data Repositories
● REST
Representational State Transfer
● HATEOAS
Hypermedia as Engine ...
Steps
● Spring Boot Application
– http://start.spring.io
– Entities
– Repositories
● Web Application
– Angular Service
– A...
Component Model
Spring Initializr
Entities
● JPA @Entity
● MongoDB @Document
@Entity
public class User {
@Id @GeneratedValue
private Long id;
@NotNull @Colu...
Repositories
public interface UserRepository extends CrudRepository<User, Long> {
User findOneByUserId(
@Param("userId") S...
Create Data
● SoapUI
● HAL Browser
Customizing Resources
● @RestResource
● @RepositoryRestResource
● Extend ResourceProcessor
● EntityLinks
● Projections
Custom Repository Behaviour
● Finder Methods
● Extend AbstractRepositoryEventListener
– onBefore and onAfter
– for Delete/...
Angular Service
● $q Asyncronous service with deferred and promises
● $resourceProvider
● Module ngResource
● $resource se...
Angular Service
angular.module('springDataRestDemo')
.service('UserService',
['$q', '$resource', '$log', 'userCache', '$ht...
Angular Service
createUser: function (user) {
var deferred = $q.defer();
Users.create(user).$promise.then(
function (user)...
Angular Service
saveUser: function (user) {
var deferred = $q.defer();
var User = $resource(user._links.self.href, {}, {sa...
Angular Controller
$scope.users = null;
$scope.promise = UserService.loadAllUsers();
$scope.promise.then(function (users) ...
Angular Controller
$scope.save = function () {
$scope.errorMessages = [];
$scope.user.dateOfBirth = moment($scope.dateOfBi...
Web Page
<table ng-controller="UserController">
<thead>
<tr>
<th>User Id</th>
<th>Name</th>
<th>Action</th>
</tr>
</thead>...
Security
● Spring Data Rest
– @RepositoryRestResource(
exported = false)
– @RestResource(exported = false)
● Spring Securi...
Questions
● Code - https://github.com/corneil/spring-data-rest-angular-demo
● Slides - http://www.slideshare.net/Corneildu...
Upcoming SlideShare
Loading in …5
×

Consume Spring Data Rest with Angularjs

686 views

Published on

Slides from talk at 'I code Java 2016'

Published in: Software
  • Be the first to comment

  • Be the first to like this

Consume Spring Data Rest with Angularjs

  1. 1. Consume Spring Data Rest using AngularJS Corneil du Plessis corneil.duplessis@gmail.com corneil@jumpco.io @corneil about.me/corneil
  2. 2. Introduction
  3. 3. What is Spring Data Rest ● Spring Data Repositories ● REST Representational State Transfer ● HATEOAS Hypermedia as Engine of Application State
  4. 4. Steps ● Spring Boot Application – http://start.spring.io – Entities – Repositories ● Web Application – Angular Service – Angular Controller – Web Page
  5. 5. Component Model
  6. 6. Spring Initializr
  7. 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. 8. Repositories public interface UserRepository extends CrudRepository<User, Long> { User findOneByUserId( @Param("userId") String userId); List<User> findByUserIdContainsIgnoreCase( @Param("input") String input); }
  9. 9. Create Data ● SoapUI ● HAL Browser
  10. 10. Customizing Resources ● @RestResource ● @RepositoryRestResource ● Extend ResourceProcessor ● EntityLinks ● Projections
  11. 11. Custom Repository Behaviour ● Finder Methods ● Extend AbstractRepositoryEventListener – onBefore and onAfter – for Delete/Save/Create/Link
  12. 12. Angular Service ● $q Asyncronous service with deferred and promises ● $resourceProvider ● Module ngResource ● $resource service ● $cacheFactory
  13. 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. 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. 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. 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. 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. 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. 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. 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

×