使用 Angular ngResource 的自定义 URL答案

【问题标题】：Custom URL using Angular ngResource使用 Angular ngResource 的自定义 URL
【发布时间】：2015-11-10 15:53:05
【问题描述】：

我想知道连接我的 API 的最佳做法，因为它的工作原理如下：

GET -> products/list/latest -> 返回最新产品列表
GET -> products/list/热门 -> 返回热门产品列表
GET -> products/list/trending -> 返回热门产品列表

然后当我想要每个产品的详细信息时，它只是：

GET -> products/:id

我的 services.js 中有以下代码：

.factory('ProductService', function ($resource) {
    return $resource('http://domainname.com/api/products/:product',{product: "@product"});
})

但我真的不知道如何访问这些自定义 URL。我可以为此使用 ngResource 吗？

谢谢！

【问题讨论】：

标签： angularjs api url ngresource

【解决方案1】：

请看这里https://docs.angularjs.org/api/ngResource/service/$resource

您可以向 ngResources 添加自定义操作

即：

var app = angular.module('app', ['ngResource']);


app.factory('ProductService', function($resource) {

  var actions = {

    'latest': {
      method: 'GET',
      url: 'api/products/latest '

    },

    'popular': {
      method: 'GET',
      url: 'api/products/popular'

    },

    'trending': {
      method: 'GET',
      url: 'api/products/trending '

    }


  };

  var ProductService = $resource('/api/products/:productId', {ProductId: '@id'}, actions);

  return ProductService;

});
app.controller('MainCtrl', function($scope, ProductService) {
  $scope.name = 'World';

  ProductService.latest();
  ProductService.popular();
  ProductService.trending();
  ProductService.query();
  ProductService.get({id: 1});
});

<!DOCTYPE html>
<html ng-app="app">

<head>
  <meta charset="utf-8" />
  <title>AngularJS Plunker</title>
  <script>
    document.write('<base href="' + document.location + '" />');
  </script>
  <link rel="stylesheet" href="style.css" />
  <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.3/angular.js" data-semver="1.4.3"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.4/angular-resource.min.js"></script>
  <script src="app.js"></script>
</head>

<body ng-controller="MainCtrl">
  <p>Hello {{name}}!</p>
</body>

</html>

【讨论】：