如何在Angular控制器中带ID参数调用指定路径的REST API？

问题场景回顾 #

你已经搭建了：

• 产品浏览器的HTML视图，路径为#/Products
• 基于JAX-RS的REST API，通过GET #/Products/{id}根据ID查询产品，对应的Java代码如下：

@Path("/{id:[0-9][0-9]*}")
@Produces("application/json")
public Response findById(@PathParam("id") Long id) {
    // 接口逻辑
}

现在需要完善Angular控制器的performSearchById方法，让它正确传递ID参数调用API。

解决方案步骤 #

1. 确保ProductResource的配置正确

首先你需要（或检查）ProductResource这个Angular资源工厂的定义，让它和你的API路径匹配。$resource需要指定URL模板和对应的参数映射：

angular.module('searchingPage')
  .factory('ProductResource', function($resource) {
    // 定义资源，URL模板中的:id会被参数替换
    return $resource('#/Products/:id', { id: '@id' }, {
      findById: {
        method: 'GET',
        params: { id: '@id' }, // 绑定参数到URL的占位符
        isArray: false // 因为返回单个产品对象，不是数组
      }
    });
  });

2. 修改控制器中的调用逻辑

$resource的方法是异步的，不能直接把返回值赋值给$scope.searchResults，需要通过回调或者Promise处理结果：

方式一：使用回调函数

angular.module('searchingPage').controller('SearchProductsController', function($scope, $http, $filter, ProductResource ) {
 $scope.search={};
 $scope.performSearchById = function() {
   // 传入ID参数，通过回调处理成功/失败
   ProductResource.findById({ id: $scope.search.id }, 
     // 成功回调
     function(product) {
       $scope.searchResults = product;
     },
     // 失败回调
     function(error) {
       console.error('查询产品失败:', error);
       // 可以在这里添加用户提示，比如$scope.errorMessage = '查询失败，请检查ID格式'
     }
   );
 };
})

方式二：使用Promise（推荐）

如果你更习惯Promise风格的写法，可以用$promise属性：

$scope.performSearchById = function() {
  ProductResource.findById({ id: $scope.search.id })
    .$promise
    .then(function(product) {
      $scope.searchResults = product;
    })
    .catch(function(error) {
      console.error('查询产品失败:', error);
    });
};

关键说明 #

• URL模板中的:id会被传入的id参数值替换，刚好匹配你的JAX-RS接口的@Path("/{id:[0-9][0-9]*}")路径。
• { id: '@id' }的作用是告诉$resource，当调用方法时，从传入的对象中提取id属性来填充URL的占位符。
• 必须处理异步结果：$resource返回的是一个空的对象引用，实际数据会在API响应后填充，所以必须用回调或Promise来更新$scope.searchResults。

内容的提问来源于stack exchange，提问作者abcd