How to use an angularjs resource for rails/RESTful routes? - ruby-on-rails

Question

I've got an angularjs app embedded in a rails app. I'm using the RESTful methods provided by rails for a resource named "Task." Here are the routes I'm dealing with:
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
I've got an angularjs-resource for the Task item where the GET for all of the tasks works fine. (Code is in coffee script)
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"
]
As you can sort of see here, I'm trying to insert a slash for the PUT method to get the format /api/v1/tasks/:id.json. Unfortunately, angular puts this in as a %2f rather than a slash. I'm not particularly excited about the quality of this code, since added the slash parameter makes it less readable.
Here's my angularjs controller using this resource:
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']
Basically, my question is does anyone have an example of how do reproduce the traditional rails/RESTful URL formats with an angularjs resource? I've looked at several StackOverflow questions and can't seem to find a good answer. Any help is appreciated.

Answer 1

Have a look at restangular, its specifically designed to make HTTP verb requests to any REST api simple & easy.
https://github.com/mgonto/restangular

Answer 2

I had the problem with this and the nesting of the JSON data. The following code seems to work for me:
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
}
]);
In my controller I'm able to use:
function createContact(data) {
Contacts.save({
name: data.name,
phone: data.phone
});
}
Please give it a try and let me know