Consume Spring Data Rest with Angularjs

Consume Spring Data Rest with Angularjs

• 1.
  Consume Spring DataRest using AngularJS Corneil du Plessis corneil.duplessis@gmail.com corneil@jumpco.io @corneil about.me/corneil
• 2.
  Introduction
• 3.
  What is SpringData Rest ● Spring Data Repositories ● REST Representational State Transfer ● HATEOAS Hypermedia as Engine of Application State
• 4.
  Steps ● Spring BootApplication – 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 UserRepositoryextends 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 ● $qAsyncronous 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>UserId</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 DataRest – @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