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!

Answer 1

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

Answer 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.

Answer 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.

Answer 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.

Answer 5

I think the confusion may be that you are asking for an Angular solution, when what you really want to do is have Spring Data send a more complete JSON response. I.e, you really just want the server to return the employee data as part of the response JSON, rather than having the client perform extra steps to look it up. I don't know what data store you are using in Spring Data, but the general solution would be to add public getEmployee() method to your Activity class and then annotate the method with @RelatedTo and @Fetch (this would be the setup for Neo4J -- may be different annotations for your flavor of Spring Data). This should cause Spring HATEOAS to include the Employee record within the response for /activity. Hope this helps.