Search code examples
angularjsnode.jsmongodbexpressangular-resource

Using $resource to delete from database

I'm having trouble getting my head around $resource. I'm trying to apply a delete method to remove a MongoDB database entry when user presses a delete button. I am using Angular 1.4 with Express and Mongoose.

Here is my HTML:

<body ng-app="polls" ng-controller="PollsCtrl">
    Polls:

    <ul>
        <li ng-repeat="question in questions">
            {{ question.questionName }}
            <button ng-click="deletePoll(question._id, $index)">Delete</button>
        </li>

    </ul>

...

Here's the client-side controller:

"use strict";

var app = angular.module('polls', ['ngResource']);
app.controller('PollsCtrl', function ($scope, $resource) {

    var Poll = $resource('/api/polls');
    var PollID = $resource('/api/polls/:pollID');

    Poll.query(function (results) {
        $scope.questions = results;
    });

    $scope.questions = [];
    $scope.questionName = '';

    $scope.addPoll = function () {
        var poll = new Poll();
        poll.questionName = $scope.questionName;
        poll.$save(function (result) {
            $scope.questions.push(result);
            $scope.questionName = '';
        });
    };

    $scope.deletePoll = function (id, index) {
        var poll = new PollID();
        poll.$remove(function () {
            $scope.questions.splice(index, 1);
        });
    };
});

here's the server file including the remove method:

var express = require('express');
var path = require('path');
var mongoose = require('mongoose');
var bodyParser = require('body-parser');

var app = express();

mongoose.connect('mongodb://localhost/poll-app');

app.use('/controllers', express.static(__dirname + '/controllers'));
app.use('/bower_components', express.static(__dirname + '/bower_components'));

app.get('/', function (req, res) {
    res.sendFile(path.join(__dirname + '/index.html'));
});

app.get('/polls', function (req, res) {
    res.sendFile(path.join(__dirname + '/polls.html'));
});

app.get('/add-poll', function (req, res) {
    res.sendFile(path.join(__dirname + '/add-poll.html'));
});

var pollSchema = new mongoose.Schema({questionName: String});
var Poll = mongoose.model('Poll', pollSchema);

var creater = function (req, res) {
    var poll = new Poll(req.body);
    poll.save(function (err, result) {
        if (err) throw err;
        res.json(result);
    })
};

var list = function (req, res) {
    Poll.find({}, function (err, result) {
        if (err) throw err;
        res.json(result);
    });
};

var remove = function (req, res) {
    console.log(req.params);
    var poll = new Poll(req.body);
    poll.remove({_id: req.params}, function (err, result) {
        if (err) throw err;
        res.json(result);
    });
};

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.post('/api/polls', creater);
app.get('/api/polls', list);
app.delete('/api/polls/:pollID', remove);

app.listen(3000, function () {
    console.log('HI');
});

I'm pretty sure the error lies in the server's remove() method. When i test this, i actually get:

DELETE http://localhost:3000/api/polls 404 (Not Found)

as though it isn't routing to where i want it to.

Solution 
  • poll.$remove({pollID:id}, function () {
    $scope.questions.splice(index, 1);
})