Embed Size (px)
DESCRIPTION
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.
Citation preview
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?
![[JogjaJS] Single Page Application nganggo Angular.js](https://img.pdfslide.us/doc/110x75/54970c79b47959744d8b51a4/jogjajs-single-page-application-nganggo-angularjs.jpg)
