HATEOAS client with AngularJS

Question

I was wondering if there were any features hidden in Angular or exposed by some 3rd-party libraries to easily create HATEOAS-compliant Restful clients.

On backend side, I am using Spring Data/REST to produce an HATEOAS JSON API. Consuming it, though, is quite another story.

For instance, I've got those 3 entities:

• Company {name, address}
• Employee {firstName, lastName, employer[Company]}
• Activity {rate, day, employee[Employee], client[Company]}

and requesting an activity (the most complex entity of the model) produces something like this:

{
    links: [],
    content: [{
            rate: 456,
            day: 1366754400000,
            links: [{
                rel: "self",
                href: "http://localhost:8080/api/activities/1"
            },
            {
                rel: "activities.activity.client",
                href: "http://localhost:8080/api/activities/1/client"
            },
            {
                rel: "activities.activity.employee",
                href: "http://localhost:8080/api/activities/1/employee"
            }]
        }]
}

My API talks in terms of REST (resources identified by links). An Activity has an Employee for instance. What I really want to use is : {rate: 456, day: 1366754400000, employee: {firstName:"xxx", lastName:"xxx" ...}}.

However, as you can see in the first output, my Activity only contains a link to the employee, not its data. Is there anything in Angular or in a 3rd-party library to resolve those links and embed the resulting data instead?

Any input on this?

Thanks in advance!

Solution 1

Checkout angular-hateoas. ITs an AngularJS module for using $resource with a HATEOAS-enabled REST API.

Solution 2

You could write a Response Transformation that would inspect your returned object, check for links, and resolve them before returning the response. See the section "Transforming Requests and Responses" in the $http service documentation.

Something like this:

transformResponse: function(rawData) {
  var json = JSON.parse( rawData );
  forEach( json.content.links, function(link) {
    // resolve link...
  });
  return json;
}

Since the "resolve link" step is itself an $http call, sub-references would also be resolved. HOWEVER, since these are asynchronous, you would likely return a promise instead of the real value; I don't know if the transform function is allowed to do this.

As @charlietfl pointed out, however, please note that this will result in several HTTP calls to return a single entity. Even though I like the concept of HATEOAS, this will likely result in sluggishness if too many calls are made. I'd suggest that your server return the data, or some of it, directly, PLUS the link for details.

Solution 3

Based on your comment about wanting to work with data as against links on the client, I think Restangular would be a good fit.

Solution 4

I've been using angular-hal for one of my projects. It was a Spring HATEOAS backend. And I didn't run into any issues. It handles parametrized resources. I suspect it only supports HAL so since you're using Spring Data Rest you probably have to configure it to generate HAL compliant responses.

View more solutions

Comments

[Yosh]

As for now in 2014 I'm also thinking a bit about what would be the best fit in the AngularJS ecosphere for HATEOAS-style consuming. So how did it end, @Rolf?

[fbiville]

Well, I did not investigate enough on the issue. Restangular allows consuming an API over HTTP (may it be RESTful or not) very easily. No automatic discovery (based on HATEOAS) though.

[fbiville]

Cool, it looks very similar to Restangular (API-wise).

[fbiville]

And it really embeds the notion of following links, contrary to Restangular, which is very cool!

[mounds]

From version 2.2.0 Spring Data Rest responses are HAL by default