带超媒体的AngularJS(HATEOAS)：如何使用超媒体URL来增加状态

Question

我有一个带有ui路由器的AngularJS应用程序，它使用带有超媒体的REST API。一般的想法是让API为其各种调用生成URL，并防止客户机自己构造URL。

[
  {
    "id": 1,
    "name": "Product A",
    "_links": {
      "self": {
        "href": "http://localhost:4444/api/products/1",
        "name": null,
        "templated": false
      },
      "actions": []
    }
  },
  {
    "id": 2,
    "name": "Product B",
    "_links": {
      "self": {
        "href": "http://localhost:4444/api/products/2",
        "name": null,
        "templated": false
      },
      "actions": []
    }
  }
]

还有别的想法吗？

除非我在这方面非常错误，否则我不是在寻找模板化的解决方案，即API返回一个url模板的解决方案，该url模板需要客户机注入参数。关键在于url已经填充了数据，因为有些url比上面提供的示例要复杂得多。

Answer 1

我以前遇到过几次这个问题。我在下面一步一步地详细说明了我首选的解决方案。最后两个步骤专门针对您在文章中概述的问题，但同样的原则可以应用于您的整个应用程序。

首先在API级别上定义根endpoint。对应的根实体是顶级链接的集合，换句话说，客户端需要直接访问的链接。

其思想是客户机只需要知道一个endpoint，即根endpoint。这样做的好处是，您不必将路由逻辑复制到客户机，并且API的版本控制变得容易得多。

{
    "_links": {
      "products": {
        "href": "http://localhost:4444/api/products",
      }
    }
}

$stateProvider.state('main', {
    resolve: {
        root: function($http) {
         return $http.get("http://localhost:4444/api/").then(function(resp){
              return resp.data;
         });
        }
    }
});

 $stateProvider.state('products', {
    parent: 'main',
    url: "/products",
    resolve: {
        products: function($http, root) {
         return $http.get(root._links.products.href).then(function(resp){
              return resp.data;
         });
        }
    }
});

$stateProvider.state('products.product', {
    url: "/{productId}"
    resolve: {
        product: function($http, $timeout, $state, $stateParams, $q products) {
         var productId = parseInt($stateParams.productId);
         var product;

        for (var i = 0; i < products.length; i++) {
            product = products[i];
            if (product.id === productId) {
                return $http.get(product._links.self.href).then(function(response){
                    return response.data;
                });
                }
        }

        // go back to parent state if no child was found, do so in a $timeout to prevent infinite state reload
        $timeout(function(){
            $state.go('^', $stateParams);
        });

        // reject the resolve
        return $q.reject('No product with id ' + productId);
    }
});

您可以将上面的代码移动到服务中，以使您的状态更加轻量级。

希望这能有所帮助！