Download - 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
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?
