angularjs - 使用 Angular ngResource 自定义 URL

标签 angularjs api url ngresource

我想知道连接我的 API 的最佳实践,因为它的工作原理如下:

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

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

获取 -> 产品/:id

我在 services.js 中得到以下代码:

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

但我真的不知道如何访问这些自定义 URL。我可以使用 ngResource 来实现吗?

谢谢!

最佳答案

请参阅此处https://docs.angularjs.org/api/ngResource/service/ $资源

您可以向 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="<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="a4c5cac3d1c8c5d68aced7e4958a908adc" rel="noreferrer noopener nofollow">[email protected]</a>" 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>

关于angularjs - 使用 Angular ngResource 自定义 URL,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32060074/

相关文章:

javascript - Angular ng-repeat 标签不起作用

javascript - 当没有记录与 Angular 过滤器匹配时显示自定义消息

ruby-on-rails - 事件模型序列化器——自定义 JSON 响应

javascript - Googlebot 和 Javascript 中的 URL

ios - 如何将输入数据的文本字段传递到 swift 上的 url

javascript - Angularjs:[$injector:modulerr] 无法实例化模块 ui-router

android - 我应该在什么 API 中发布我的应用程序?

api - GDB内部结构: Getting variable contents

asp.net-mvc - 如何在 ASP MVC 中编码完整的 URL 字符串

javascript - Angular JS 是否支持对象日志记录