A big part of REST is the idea of Hypermedia As The Engine Of Application State. Using HATEOAS brings the qualities of the web such as the robustness and scalability to your system. In this presentation you will see how we have built a hypermedia-driven client using Angular.js. The media type we have used is HAL.

1. Using a hypermedia API with Angular.js
Pieter Herroelen
 1

2. Pieter Herroelen
 2

3. Pieter Herroelen
@piether
 3

4. Pieter Herroelen
@piether
AE
 4

5. Project
 5

6. Flexible UI
 6

7. First approach
"municipality": {
"criteria": {
"groups": [["LABEL“,"POSTAL_CODE"]],
“label": {
"type": "TEXT_MEDIUM",
"operators": "ALPHA",
"common": true,
"mandatory": false
},
…
},
…
 7

8. First approach
CLIENT
DATA
SERVER
CONFIG
 8

9. First approach
http://www.youtube.com/watch?v=62RvRQuMVyg
 9

10. Richardson maturity model
http://martinfowler.com/articles/richardsonMaturityModel.html
 10

11.  11

12. Richardson maturity model
http://martinfowler.com/articles/richardsonMaturityModel.html
 12

13. Hypermedia
CLIENT
HYPERMEDIA
SERVER
 13

14. Hypermedia
CLIENT
JSON over HTTP
SERVER
 14

15. http://www.toddmgreen.com/wp-content/uploads/2011/12/Arthur-C-2.png
 15

16. Hypermedia
Content-type: application/hal+json
CLIENT
HYPERMEDIA
SERVER
 16

17. Hypermedia
Content-type: application/hal+json
SPEC
 17

18. Hypermedia
Content-type: application/hal+json
SPEC
CLIENT
SERVER
 18

19. Which specification?
 19

20.  20

21.  21

22. HAL - Hypertext Application Language
http://stateless.co/hal_specification.html
 22

23. HAL
 23

24. "_links": {
"self": { "href": "/orders"}
},
"currentlyProcessing": 14,
"shippedToday": 20,
"_embedded": {
"ea:order": [
{
"_links": {
"self": { "href": "/orders/123" },
"ea:basket": { "href": "/baskets/98712" }
},
"total": 30.00
}
...
 24

25. "_links": {
"self": { "href": "/orders"}
},
"currentlyProcessing": 14,
"shippedToday": 20,
"_embedded": {
"ea:order": [
{
"_links": {
"self": { "href": "/orders/123" },
"ea:basket": { "href": "/baskets/98712" }
},
"total": 30.00
}
...
 25

26. "_links": {
"self": { "href": "/orders"}
},
"currentlyProcessing": 14,
"shippedToday": 20,
"_embedded": {
"ea:order": [
{
"_links": {
"self": { "href": "/orders/123" },
"ea:basket": { "href": "/baskets/98712" }
},
"total": 30.00
}
...
 26

27.  27

28. EPiaAACBSwaADEtPoHTMD
<resource uri=“http://example.com/path”> ...
 28

29. JSON
• properties
• links
• embedded
$scope
objects
 29

30. JSON
• properties
• links
• embedded
$scope
functions
 30

31. follow() Replace content of directive with
resource behind link
Example:
<a ng-click=“links[‘children’].follow()”></a>
 31

32. function(method, data) Do an HTTP call
with the specified method and the specified data
in the request. Returns a promise.
Example:
$scope.links[‘save’](‘POST’, $scope.form).then(...);
 32

33. HAL
CLIENT
SERVER
 33

34. HAL
CLIENT
SERVER
LINK RELATIONS
 34

35. JSON
• properties
• links
• embedded
$scope
Recursive
structure
 35

36. JSON
$scope
HTML
• properties
• links
• embedded
• header
property
 36

37. JSON
$scope
<ng-include
src=“property+’.html’”>
</ng-include>
• properties
• links
• embedded
• header
HTML
property
 37

38. http://www.x17online.com/gisele-elephant.jpg
 38

39. Where is the model?
 39

40. http://www.x17online.com/gisele-elephant.jpg
 40

41. QUESTIONS?
 41