Express js routing for update issue

Question

I currently have a MEAN stack project and am trying to get the routing for updating work. Saving works fine.

Basically in my angular controller I have the following scope method where staff is the object sent on form submit:

$scope.updateStaff = function(staff) {
    $scope.submitted = true;

    if (form.$valid) {
        staffActionService.update({ id: staff._id }, staff)
        .then(function () {
            $scope.success = true;
            console.log("successful");
        })
        .catch(function (err) {
            var err = err.data;
            $scope.errors = {};
            angular.forEach(err.errors, function (error, field) {
                form[field].$setValidity('mongoose', false);
                $scope.errors[field] = error.message;
            });
        });
    }
}

Also, I have a factory method which basically does the client side routing using $resource :

angular.module('xxx')
    .factory('staffActionService', function ($resource)  {
        return $resource('/api/staffs/:id/:controller',
            { id: '@_id' },
            { 'update': { method:'PUT' } }
        );
    });
});

My server side routing is set as follows

var express = require('express');
var controller = require('./staff.controller');

var router = express.Router();

router.get('/', controller.index);
router.get('/:id', controller.show);
router.post('/', controller.create);
router.put('/:id/staff', controller.update);
router.patch('/:id', controller.update);
router.delete('/:id', controller.destroy);

module.exports = router;

But for some reason my server side is not being hit

Any ideas as have tried a few things with the routing but no joy

Cheers

Answer 1

Looks like your calling the route for the PATCH method, but are using the PUT method on the client, which will result in a 404.

You can fix this in one of three ways:

You can fix it in express by making the PUT route respond to '/:id':

router.get('/', controller.index);
router.get('/:id', controller.show);
router.post('/', controller.create);
router.put('/:id/staff', controller.update);
router.put('/:id', controller.update); // add this
router.patch('/:id', controller.update);
router.delete('/:id', controller.destroy);

module.exports = router;

OR you can fix it in your angular controller by defining the ':controller' from the $resource factory you set up:

staffActionService.update({ id: staff._id, controller: 'staff' }, staff)

OR you can fix it in your $resource factory by changing the method to PATCH:

angular.module('xxx')
  .factory('staffActionService', function ($resource)  {
    return $resource('/api/staffs/:id/:controller', { id: '@_id' }, {'update': {method:'PATCH'}})
  });

Note: don't combine the above examples, use only one!