jmarquis / angular-hateoas Goto Github PK

Is Spring Data REST (based on Spring HATEOAS) supported by angular-hateoas?

I created a simple RepositoryRestResource with a PagingAndSortingRepository and the produced JSON code looks like this:

{
  "_links" : {
    "self" : {
      "href" : "http://localhost:8080/authors{?page,size,sort}",
      "templated" : true
    }
  },
  "_embedded" : {
    "authors" : [ {
      "firstname" : "J.R.R",
      "lastname" : "Tolkien",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/authors/1"
        },
        "books" : {
          "href" : "http://localhost:8080/authors/1/books"
        }
      }
    }, {
      "firstname" : "Stephen",
      "lastname" : "King",
      "_links" : {
        "self" : {
          "href" : "http://localhost:8080/authors/2"
        },
        "books" : {
          "href" : "http://localhost:8080/authors/2/books"
        }
      }
    } ]
  },
  "page" : {
    "size" : 20,
    "totalElements" : 2,
    "totalPages" : 1,
    "number" : 0
  }
}

Parsing this with angular-hateoas failed for me. Is this not supported or did I another error?

An api call returns me a link which uses querystring params like this:
itemBin: /myApi/widgets/12345/bin/?abc=:abc&def=:def&color=blue

I'm trying to call that link like this:
goodResourceObj.resource('itemBin').get({abc: '111', def: '222'}).$promise.then(function (data) { console.log(data); }

But it appears that the parameters for ":abc" and ":def" are not quite being replaced but end up appended to the end of the generated url like this:
http://myApi/widgets/12345/bin/?abc=&def=&color=blue&abc=111&def=222

Is this a case that angular-hateoas should be covering, or am I misusing or missing something here?

Hi, I'm trying to use this service with Ionic framework which, in turns, uses Angular JS 1.2.12, but it seems the returned resources are not implementing the correct interface.

I've digged a bit into the code and the HateoasInterceptor is correctly invoked, somewhere though either the data is unwrapped or replaced.

Did you ever try to use this service along with ionic or angular 1.2.12? I can see the build is based on angular 1.2.0rc1, did you try to build and test against a release version?

I would love to use this service, it looks amazing.

Hi,

I've just noticed an issue with the versioning resulting in a bower install for the latest version installing the version pre the pull request for the HAL Embedded feature which matches the tag v0.2.5

In order to install the latest master code with bower one needs to do the following

bower install --save [email protected]:jmarquis/angular-hateoas.git#7557ca28459a14060e8629db216cbbd82d9673c6

a bump of the version should suffice to fix the issue. That is if you intend to release the HAL feature.

Cheers

Pat

This is more of a provider style that I've come to like quite a bit from the angular providers and would like to see it also implemented here as well.

i.e

HateoasInterfaceProvider
    .setHalEmbedded('_embedded')
    .setLinksKey('_links');

Would be a pretty simple addition just a matter of wanting it or not.

I'm trying to run the unit tests for this project. Using Grunt gives the following warning:

$ grunt
Running "karma:continuous" (karma) task
Warning: Invalid configuration: client.args must be an array of strings Use --force to continue.

It's the same for the runTests, test, default and startTestServer tasks.
What is the correct way to run the unit tests, and am I missing something?

This:

app.config(function (HateoasInterfaceProvider) {
    HateoasInterceptorProvider.transformAllResponses();
});

Should probably be:

app.config(function (HateoasInterceptorProvider) {
    HateoasInterceptorProvider.transformAllResponses();
});

I've got a resource that returns a list of objects and some other items, see here for Gist: https://gist.github.com/Xerosigma/03cd1cc78882e6897019

Currently have to do the following to get what I want (the array of employees):

$scope.employeesPage = $resource("http://localhost:8080/employees").get(null, function () {
  angular.forEach($scope.employeesPage, function (item) {
    if(item.employees) {
      $scope.employees = item.employees;
    }
  });
});`

Is there an easier way to get the employees?

Thanks!

Are there any plans to upgrade this plugin for angular2 ?

Also if someone knows any good forks for hateoas in angular2 or any other library, please provide the links.

First of all, thanks for the module, I was really looking for this. However I seem to run into a problem.

.resource always returns:
Error: [$resource:badcfg] array

.query returns:
function f(a){D(a||{},this)}

Any help would be greatly apreciated.

My code:
.config(function (HateoasInterceptorProvider,HateoasInterfaceProvider) {
HateoasInterceptorProvider.transformAllResponses();
HateoasInterfaceProvider.setLinksKey("_links");
})
.controller('hateoasCtrl', function($scope,$resource) {
var personResource = $resource("http://localhost:8181/people/1").get(null,function(){
//console.log("Here's a related $resource object: ", personResource.resource("non-existant"));
console.log("Here's a related $resource object: ", personResource.resource("self"));
console.log("Here's a related $resource object: ", personResource.resource("address"));
});

    var personResource2 = $resource("http://localhost:8181/people/1").query(null,function(){

    });

})

My Json from "http://localhost:8181/people/1":
{
"created" : "2014-09-03T07:21:58.000+0000",
"updated" : "2014-09-03T07:21:59.000+0000",
"firstName" : "Bas",
"lastName" : "Gekking",
"telephone" : "0306550062",
"mobile" : "0306550062",
"email" : "[email protected]",
"password" : "bass",
"company" : "Zelfs BV",
"vat" : "234222525234",
"birthDay" : "3870-06-24",
"_links" : {
"self" : {
"href" : "http://localhost:8181/people/1"
},
"address" : {
"href" : "http://localhost:8181/people/1/address"
},
"bookmarkGroups" : {
"href" : "http://localhost:8181/people/1/bookmarkGroups"
},
"cartItems" : {
"href" : "http://localhost:8181/people/1/cartItems"
},
"alertGroups" : {
"href" : "http://localhost:8181/people/1/alertGroups"
},
"orders" : {
"href" : "http://localhost:8181/people/1/orders"
}
}
}

The output in console:
Error: [$resource:badcfg] array
http://errors.angularjs.org/1.2.22/$resource/badcfg?p0=object
at http://builderfront.codefined.com:8080/vendor/angular/angular.js:78:12
at p.then.m.$resolved (http://builderfront.codefined.com:8080/vendor/angular-resource/angular-resource.min.js:8:517)
at wrappedCallback (http://builderfront.codefined.com:8080/vendor/angular/angular.js:11546:81)
at http://builderfront.codefined.com:8080/vendor/angular/angular.js:11632:26
at Scope.$eval (http://builderfront.codefined.com:8080/vendor/angular/angular.js:12658:28)
at Scope.$digest (http://builderfront.codefined.com:8080/vendor/angular/angular.js:12470:31)
at Scope.$apply (http://builderfront.codefined.com:8080/vendor/angular/angular.js:12762:24)
at done (http://builderfront.codefined.com:8080/vendor/angular/angular.js:8357:45)
at completeRequest (http://builderfront.codefined.com:8080/vendor/angular/angular.js:8571:7)
at XMLHttpRequest.xhr.onreadystatechange (http://builderfront.codefined.com:8080/vendor/angular/angular.js:8510:11) angular.js:10046
(anonymous function) angular.js:10046
(anonymous function) angular.js:7343
wrappedCallback angular.js:11549
(anonymous function) angular.js:11632
Scope.$eval angular.js:12658
Scope.$digest angular.js:12470
Scope.$apply angular.js:12762
done angular.js:8357
completeRequest angular.js:8571
xhr.onreadystatechange angular.js:8510
bas test.js:43
Here's a related $resource object: function f(a){D(a||{},this)} test.js:45
Here's a related $resource object: function f(a){D(a||{},this)}

Kind regards,

Bas

When linksKey is defined to something different than 'links', in HateoasInterface you still look for default value of linksKey

if (data[linksKey]) {
    data = angular.extend(this, data, { links: arrayToObject("rel", "href", data[linksKey]), resource: resource });
}

I just changed this line to

var ext = {};

// if links are present, consume object and convert links
if (data[linksKey]) {
    ext[linksKey] = arrayToObject("rel", "href", data[linksKey]);
    ext.resource = resource;
    data = angular.extend(this, data, ext);
}

If you want, I can make pull req.

Hi,
I like the project, but I have a question:

What if the response next to rel and href also specifies the method to be used?
I assume it will be ignored.
Would it be a lot of work to get that recognised and implemented?

Cheers,