rest - AngularJS - PUT 方法不起作用(404 错误)

Question

我是 AngularJS 新手，无法通过 REST 更新对象。我正在使用 PHP/Mysql 后端(Slim 框架)。
我能够检索(GET)、创建(POST)一个新对象，但不能编辑(PUT)一个。代码如下:

我的表格:

<form name="actionForm" novalidate ng-submit="submitAction();">
  Name: <input type="text" ng-model="action.name" name="name" required>
  <input type="submit">
</form>

我的服务:

var AppServices = angular.module('AppServices', ['ngResource'])
AppServices.factory('appFactory', function($resource) {
  return $resource('/api/main/actions/:actionid', {}, {
    'update': { method: 'PUT'},
  });
});

app.js

var app = angular.module('app', ['AppServices'])
app.config(function($routeProvider) {
  $routeProvider.when('/main/actions', {
    templateUrl: 'partials/main.html',
    controller: 'ActionListCtrl'
  });
  $routeProvider.when('/main/actions/:actionid', {
    templateUrl: 'partials/main.html',
    controller: 'ActionDetailCtrl'
  });
  $routeProvider.otherwise({redirectTo: '/main/actions'});
});

Controller .js:

function ActionDetailCtrl($scope, $routeParams, appFactory, $location) {
  $scope.action = appFactory.get({actionid: $routeParams.actionid});
  $scope.addAction = function() {
    $location.path("/main/actions/new");
  }
  $scope.submitAction = function() {
    // UPDATE CASE
    if ($scope.action.actionid > 0) {
      $scope.action = appFactory.update($scope.action);
      alert('Action "' + $scope.action.title + '" updated');
    } else {
      // CREATE CASE
      $scope.action = appFactory.save($scope.action);
      alert('Action "' + $scope.action.title + '" created');
    }
    $location.path("/main/actions");
  }
}

在 Slim 的 api/index.php 中，我定义了这些路由和函数:

$app->get('/main/actions', 'getActions');
$app->get('/main/actions/:actionid',    'getAction');
$app->post('/main/actions', 'addAction');
$app->put('/main/actions/:actionid', 'updateAction');

当我创建一个新的“操作”时，一切都按预期进行。但是当我尝试编辑现有的时，出现此错误:

PUT http://project.local/api/main/actions 404 Not Found

操作未更新(尽管显示警报消息“操作 xxx 已更新”)

我的routeProvider设置有问题吗？我猜 PUT url 末尾缺少 id...

我精确地说，如果我尝试使用 POSTMan-Chrome-Extension 模拟 PUT 请求例如，一切正常(PUT http://project.local/api/main/actions/3 返回预期数据)

Answer 1

仔细阅读后，问题确实是你在进行更新请求时没有发送url中的id。此外，您调用更新/保存的方式并不完全符合资源的预期。创建资源后，您可以调用实例上的保存/更新方法，而不是作为工厂函数。您还可以将实例的属性绑定(bind)到 url 中的参数，这样您就不必在每次调用时指定它们:

AppServices.factory('appFactory', function($resource) {
  return $resource('/api/main/actions/:actionid', {actionid : '@actionid'}, {
    'update': { method: 'PUT'},
});

资源的第二个参数告诉 Angular 应该使用哪些属性来填充 url 参数。所以 get 操作保持不变:

$scope.action = appFactory.get({actionid: $routeParams.actionid});

现在更新:

$scope.submitAction = function() {
  // UPDATE CASE
  if ($scope.action.actionid > 0) {
    $scope.action.$update()
  } else {
    $scope.action.$save();  
  }
}

既然你使用 Angular-Cellar 作为基础，我可能应该检查一下，看看是否可以改进这个......