如何将railsjs资源用于rails / RESTful路由?

时间:2013-09-12 01:36:11

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

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

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

我有一个针对Task项的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。不幸的是,angular将其作为%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问题,似乎无法找到一个好的答案。任何帮助表示赞赏。

2 个答案:

答案 0 :(得分:4)

看看restangular,它专门设计用于向任何REST api发出HTTP动词请求简单&容易。

https://github.com/mgonto/restangular

答案 1 :(得分:1)

我遇到了这个问题以及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
        });
    }

请试一试让我知道