如何将 angularjs 资源用于 rails/RESTful 路由？答案

【问题标题】：How to use an angularjs resource for rails/RESTful routes?如何将 angularjs 资源用于 rails/RESTful 路由？
【发布时间】：2015-10-02 09:57:26
【问题描述】：

我在 rails 应用程序中嵌入了一个 angularjs 应用程序。我正在使用 rails 为名为“Task”的资源提供的 RESTful 方法。以下是我正在处理的路线：

GET    /api/v1/tasks.json
POST   /api/v1/tasks.json
GET    /api/v1/tasks/:id.json
PUT    /api/v1/tasks/:id.json
DELETE /api/v1/tasks/:id.json

我有一个用于任务项目的 angularjs 资源，其中所有任务的 GET 都可以正常工作。（代码在咖啡脚本中）

App.factory "Task", ["$resource", "$cookies", ($resource, $cookies) ->
  $resource "/api/v1/tasks:slash:type.json?api_token=:api_token",
    api_token: $cookies.api_token
    type: '@id'
  ,
    all:
      method: "GET"
      isArray: true

    create:
      method: "POST"

    update:
      method: "PUT"
      params:
        slash: "/"

    remove:
      method: "DELETE"

]

正如您在此处看到的那样，我正在尝试为 PUT 方法插入一个斜杠以获取 /api/v1/tasks/:id.json 格式。不幸的是，角度将其作为%2f 而不是斜线。我对这段代码的质量并不感到特别兴奋，因为添加了slash 参数会降低它的可读性。

这是我使用此资源的 angularjs 控制器：

taskController = App.controller 'TasksController', ($rootScope, $scope, $http, $cookies, Task)  ->
  $scope.message = $cookies.api_token  
  $scope.tasks = Task.all()
  $scope.selectedTask = null

  $scope.editTask = (task) ->
    $scope.selectedTask = task
    $scope.editDescription = task.description
    $rootScope.date = new Date(task.dueDate)
    console.log($rootScope.dt)
    $scope.taskModal = true

  $scope.saveTask = ->
    $scope.taskModal = false
    $scope.selectedTask.$update()
    # Task.update({taskID: $scope.selectedTask.id, task: $scope.selectedTask})
    console.log 'Implement saving...'
    $scope.tasks = Task.all()

  $scope.cancelTask = ->
    $scope.taskModal = false

  $scope.taskModalOptions = {
    dialogFade: true
  }

taskController.$inject = ['$rootScope', '$scope', '$http', '$cookies', 'Task']

基本上，我的问题是，有没有人举例说明如何使用 angularjs 资源重现传统的 rails/RESTful URL 格式？我查看了几个 StackOverflow 问题，似乎找不到一个好的答案。任何帮助表示赞赏。

【问题讨论】：

标签： ruby-on-rails angularjs coffeescript put angularjs-resource

【解决方案1】：

看看restangular，它专门设计用于使对任何REST api的HTTP动词请求变得简单和容易。

https://github.com/mgonto/restangular

【讨论】：

有一种方法可以做到这一点，只需 angular $resource：coderwall.com/p/rd0c8w

【解决方案2】：

我遇到了这个问题和 JSON 数据的嵌套问题。以下代码似乎对我有用：

contacts.factory('Contacts', ['$resource',
function($resource) {

    function nestData(data, headersGetter) {
        return JSON.stringify({
            contact: data
        });
    };

    return $resource('/api/v1/contacts/:id.json', {
        id: '@id'
    }, {
        'index': {
            method: 'GET',
            isArray: true
        },
        'show': {
            method: 'GET',
            isArray: false
        },
        'create': {
            method: 'POST',
            transformRequest: nestData
        },
        'save': {
            method: 'PUT',
            transformRequest: nestData
        },
        'destroy': {
            method: 'DELETE'
        }
    }); // Note the full endpoint address
}
]);

在我的控制器中我可以使用：

    function createContact(data) {
        Contacts.save({
            name: data.name,
            phone: data.phone
        });
    }

请试一试并告诉我

【讨论】：