带有 AngularJS 的 HATEOAS 客户端

Posted 2023-02-26

【中文标题】带有 AngularJS 的 HATEOAS 客户端

【英文标题】：HATEOAS client with AngularJS

【发布时间】：2013-04-14 04:13:32

【问题描述】：

我想知道是否有任何隐藏在 Angular 中或被某些 3rd-party 库公开的功能来轻松创建符合 HATEOAS 的 Restful 客户端。

在后端，我使用 Spring Data/REST 来生成 HATEOAS JSON API。 但是，消费它是另一回事。

例如，我有这 3 个实体：

公司name, address 员工firstName, lastName, employer[Company] 活动rate, day, employee[Employee], client[Company]

并请求一个活动（模型中最复杂的实体）会产生如下内容：

    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"
            ]
        ]

我的 API 以 REST（由链接标识的资源）的形式进行讨论。 例如，一个 Activity 有一个 Employee。我真正想要使用的是：rate: 456, day: 1366754400000, employee: firstName:"xxx", lastName:"xxx" ...。

但是，正如您在第一个输出中看到的那样，我的 Activity 只包含一个到员工的链接，而不是它的数据。 Angular 或第 3 方库中是否有任何东西可以解析这些链接并嵌入结果数据？

对此有何意见？

提前致谢！

【问题讨论】：

any features hidden in Angular...您尝试过哪些功能无法满足您的需求？在 Angular 中有多种方式来呈现您的数据。真的不清楚你的问题是什么。你的最后一句话很难理解。请详细说明

嗨，我编辑了最后一句，希望它更清楚。我的基本意思是：在客户端，我不想使用链接，而是直接使用数据。

创建一个设置链接的服务，这很简单。你知道如何创建服务吗？那么你就知道如何在 json 文件中搜索链接并根据链接请求某些内容。这就像从服务加载配置文件一样。配置可用后，只需正确设置服务即可。

创建一个 Angular 服务，是的，我可以做到。但我不确定如何有效地实现跟踪链接并解决它们的逻辑。

你控制 REST 吗？如果是这样，为什么它在请求员工时输出链接而不是数据。否则，您将不得不向该 url 发出请求以获取数据。仍然不是很清楚是什么问题。解释不是很准确

【参考方案1】：

结帐angular-hateoas。它是一个 AngularJS 模块，用于将 $resource 与支持 HATEOAS 的 REST API 一起使用。

【讨论】：

酷，它看起来非常类似于 Restangular（API 方面）。

它确实嵌入了跟随链接的概念，与Restangular相反，非常酷！

【参考方案2】：

您可以编写一个响应转换来检查您返回的对象、检查链接并在返回响应之前解析它们。请参阅$http service documentation 中的“转换请求和响应”部分。

类似这样的：

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

由于“解析链接”步骤本身就是一个 $http 调用，因此子引用也将被解析。然而，由于这些是异步的，你可能会返回一个承诺而不是真正的价值；我不知道是否允许转换函数这样做。

然而，正如@charlietfl 指出的那样，请注意这将导致多次 HTTP 调用返回单个实体。尽管我喜欢 HATEOAS 的概念，但如果调用过多，这可能会导致反应迟缓。我建议您的服务器直接返回数据或其中的一部分，加上链接以获取详细信息。

【参考方案3】：

根据您关于希望使用数据而不是客户端上的链接的评论，我认为Restangular 将是一个不错的选择。

【讨论】：

就目前而言，在 2014 年，我还在思考什么最适合 AngularJS 生态圈中的 HATEOAS 风格消费。那么它是如何结束的，@Rolf？

好吧，我没有对这个问题进行足够的调查。 Restangular 允许非常轻松地通过 HTTP 使用 API（可能是 RESTful 或非 RESTful）。但是没有自动发现（基于 HATEOAS）。

【参考方案4】：

我一直在为我的一个项目使用angular-hal。这是一个 Spring HATEOAS 后端。而且我没有遇到任何问题。它处理参数化资源。我怀疑它只支持 HAL，因此由于您使用的是 Spring Data Rest，您可能必须对其进行配置以生成符合 HAL 的响应。

【讨论】：

From version 2.2.0 Spring Data Rest responses are HAL by default

【参考方案5】：

我认为混淆可能是您要求使用 Angular 解决方案，而您真正想要做的是让 Spring Data 发送更完整的 JSON 响应。即，您真的只是希望服务器将员工数据作为响应 JSON 的一部分返回，而不是让客户端执行额外的步骤来查找它。我不知道您在 Spring Data 中使用的是什么数据存储，但一般的解决方案是将 public getEmployee() 方法添加到您的 Activity 类，然后使用 @RelatedTo 和 @Fetch 注释该方法（这将是设置Neo4J - 可能是您对 Spring Data 风格的不同注释）。这应该会导致 Spring HATEOAS 在 /activity 的响应中包含 Employee 记录。希望这可以帮助。