Rails + Angularjs: How to communicate (delete record from database) with backend?

Question

I stuck on this for the whole day.

On http://localhost:3001/posts/, I list all posts I have in the database. I am trying to delete a task with using Angularjs - every loaded record from the database has a link for its deleting:

= link_to 'Delete', '', 'ng-click' => "deletePost('#{post.id}')", :id => "post_#{post.id}"

Then I have a file /assets/javascript/angular/controller/posts.js that looks like this:

var app = angular.module('AngTestApp', ['ngResource']);

app.factory('Post', function($resource) {
    return $resource("/posts/:id", { id: '@id' }, {
        index:   { method: 'GET', isArray: true, responseType: 'json' },
      show:    { method: 'GET', responseType: 'json' },
      update:  { method: 'PUT', responseType: 'json' }
    });
})

app.controller("PostsCtrl", function($scope, Post) {
  $scope.posts = Post.index();
    $scope.deletePost = function(index) {
        console.log("index: "+index);
        post = $scope.posts[index];
      Post.delete(post);
        $scope.posts.splice(index, 1);
        console.log('aa');
    }
})

When I click the delete link, I receive this error in the JS console:

DELETE http://localhost:3001/posts 404 (Not Found)

and in terminal:

Started DELETE "/posts" for 127.0.0.1 at 2015-10-15 16:23:08 -0700

ActionController::RoutingError (No route matches [DELETE] "/posts"):

The routes look like this:

resources :posts do
  resources :comments
end

The JS code is very chaotic, I tried to modify a tutorial I found on the Internet, but it doesn't work well.

What is wrong in this attempt?

Thank you in advance.

Brad Johnson · Accepted Answer · 2015-10-16 01:36:27Z

1

You need to pass the ID of the record you're trying to delete as a parameter in the call to Rails. Rails is telling you it can't find the route because you do not have an ID.

Since you do not define the DELETE action in your factory, that is likely why the ID is not getting passed. You could also try explicitly passing the id as a param, like below: $resource takes a params attribute, so you can modify your factory like so:

app.factory('Post', function($resource) {
    return $resource("/posts/:id", { id: '@id' }, {
      index:   { method: 'GET', isArray: true, responseType: 'json' },
      show:    { method: 'GET', responseType: 'json' },
      update:  { method: 'PUT', responseType: 'json' },
      delete:  { method: 'DELETE', params: '@id', responseType: 'json' }
    });
})

The $resource docs are pretty helpful: https://docs.angularjs.org/api/ngResource/service/$resource

answered Oct 16, 2015 at 1:36

Brad Johnson

1519 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user984621 Over a year ago

Hi Brad, thanks for your answer. I tried this, but the result is TypeError: Cannot read property 'delete' of undefined in the JS console. Do I need to include into the project some libraries yet?

Brad Johnson Over a year ago

hmm, it seems like there is a type somewhere, and the factory is returning undefined. Also you might want to look at this:stackoverflow.com/questions/16167463/…

Collectives™ on Stack Overflow

Rails + Angularjs: How to communicate (delete record from database) with backend?

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related