using a hypermedia api with angular.js

1

Using a hypermedia API with Angular.js

Pieter Herroelen

2

Pieter Herroelen

3

Pieter Herroelen @piether

4

Pieter Herroelen @piether

AE

5

Project

6

Flexible UI

7

First approach

"municipality": {

"criteria": {

"groups": [["LABEL“,"POSTAL_CODE"]],

“label": {

"type": "TEXT_MEDIUM",

"operators": "ALPHA",

"common": true,

"mandatory": false

},

…

},

…

8

First approach

CLIENT SERVER

CONFIG

DATA

9

First approach

http://www.youtube.com/watch?v=62RvRQuMVyg

10

Richardson maturity model

http://martinfowler.com/articles/richardsonMaturityModel.html

11

12

Richardson maturity model

http://martinfowler.com/articles/richardsonMaturityModel.html

13

Hypermedia

CLIENT SERVER HYPERMEDIA

14

Hypermedia

CLIENT SERVER JSON over HTTP

15

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

16

Hypermedia

CLIENT SERVER HYPERMEDIA

Content-type: application/hal+json

17

Hypermedia

Content-type: application/hal+json

SPEC

18

Hypermedia

Content-type: application/hal+json

SPEC

CLIENT SERVER

19

Which specification?

20

21

22

HAL - Hypertext Application Language

http://stateless.co/hal_specification.html

23

HAL

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

}

...

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

}

...

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

}

...

27

28

EPiaAACBSwaADEtPoHTMD

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

29

JSON $scope

• properties • links • embedded

objects

30

JSON $scope

• properties • links • embedded

functions

31

follow() Replace content of directive with resource behind link

Example: <a ng-click=“links[‘children’].follow()”></a>

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(...);

33

HAL

CLIENT SERVER

34

HAL

CLIENT SERVER

LINK RELATIONS

35

JSON $scope

• properties • links • embedded

Recursive structure

36

JSON $scope

• properties • links • embedded

property • header

HTML

37

JSON $scope

• properties • links • embedded

property • header

HTML

<ng-include

src=“property+’.html’”>

</ng-include>

38

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

39

Where is the model?

40

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

41

QUESTIONS?