4

Railsアプリにangularjsアプリが埋め込まれています。「タスク」という名前のリソースに対して、Rails が提供する 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

すべてのタスクの GET が正常に機能する Task アイテム用の angularjs-resource があります。(コードはコーヒースクリプトです)

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 メソッドにスラッシュを挿入して format を取得しようとしています/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 の質問を見てきましたが、良い答えが見つからないようです。どんな助けでも大歓迎です。

4

2 に答える 2

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
        });
    }

試してみて、私に知らせてください

于 2015-10-02T01:57:26.050 に答える