How to use angularjs resource for rails / RESTful routes?

Question

I have an angularjs application built into the rails application. I use the RESTful methods provided by the rails for a resource called 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 have an angularjs resource for a Task element, where the GET for all tasks works fine. (The code is in the 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 see here, I am trying to insert a slash for the PUT method to get the format /api/v1/tasks/:id.json . Unfortunately, angular puts this as %2f , not a slash. I am not particularly concerned about the quality of this code, since the added slash parameter makes it less readable.

Here is 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 to reproduce traditional rails / RESTful URL formats with angularjs resource? I looked through a few StackOverflow questions and didn't seem to find a good answer. Any help is appreciated.

Answer 1

Take a look at restangular, specially designed so that HTTP verb requests to any REST api are simple and easy.

https://github.com/mgonto/restangular

Answer 2

I am having a problem with this and embedding JSON data. The following code works 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 can use:

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

Please try and let me know.