为什么在使用ngresource save时出现404错误？

Question

我正在遵循一个旧的Pluralsight教程，该教程不再更新并且碰壁：我正在使用Visual Studio 2013和Angular JS v1.4，并且必须在使用此版本的AngularJS时使用此教程。工作。

HTML TEMLPLATE：NewEvent.html

<div style="padding-left:20px; padding-right: 20px">
<div class="container">
    <h1>New Event</h1>
    <hr />
    <form name="newEventForm">
        <fieldset>
            <label for="eventName">Event Name:</label>
            <input id="eventName" type="text" required ng-model="event.name" placeholder="Name of your event..." />
            <label for="eventDate">Event Date:</label>
            <input id="eventDate" type="text" required ng-pattern="/\d\d/\d\d/\d\d\d\d/" ng-model="event.date" placeholder="format (mm/dd/yyyy)..." />
            <label for="eventTime">Event Time:</label>
            <input id="eventTime" type="text" required ng-model="event.time" placeholder="Start and end time..." />
            <label for="eventLocation">Event Location:</label>
            <input id="eventLocation" type="text" required ng-model="event.location.address" placeholder="Address of event..." />
            <br />
            <input id="eventCity" type="text" required ng-model="event.location.city" class="input-small" placeholder="City..." />
            <input id="eventProvince" type="text" ng-model="event.location.province" class="input-small" placeholder="Province..." />
            <div>{{event.name}}</div>
            <label for="eventImageUrl">Image:</label>
            <input id="eventImageUrl" type="url" ng-model="event.imageUrl" class="input-xlarge" placeholder="Url of image..." />
        </fieldset>

        <img ng-src="{{event.imageUrl}}" src="" />
        <br />
        <br />

        <button type="submit" ng-disabled="newEventForm.$invalid" ng-click="saveEvent(event, newEventForm)" class="btn btn-primary">Save</button>
        <button type="button" ng-click="cancelEdit()" class="btn btn-default">Cancel</button>
    </form>
</div>

CONTROLLER：EditEventController.js

'use strict'

eventsApp.controller('EditEventController',
    function EditEventController($scope, eventData) {

    $scope.event = {};

    $scope.saveEvent = function (event, newEventForm) {
        if (newEventForm.$valid) {
            eventData.save(event)
                .$promise
                .then(function (response) { console.log('success', response) })
                .catch(function (response) { console.log('failure', response) });
        }
    };

    $scope.cancelEdit = function () {
        window.location = "./EventDetails.html";
    }
});

服务：EventData.js

eventsApp.factory('eventData', function ($resource) {
    var resource = $resource('data/event/:id.json', { id: '@id' }, { "getAll": { method: "GET", isArray: true, params: { something: "foo" } } });
    return {
        getEvent: function () {
            return resource.get({ id: 1 });
        },
        save: function (event) {
            event.id = 999;
            return resource.save(event);
        }
    }
});

我必须在var资源行中指定“ .json”，这是我对辅导员给出的代码所做的唯一更改，因为不会有另一个页面（在服务中使用getEvent函数）除非我这样做，否则不会工作。

单击“保存”后，即使事件模型已正确构建，我仍会在控制台中收到“失败”响应。

控制台中的错误屏幕截图：-

文件结构：-

尽管据我所知URL是正确的，但404错误似乎已附加到保存目标。如何正确使用ngresource.save保存此文件？

Answer 1

web-server.js -检查获取和发布路径

const express = require('express');
const path = require('path');
const events = require('./eventsController');
const app = express();
const rootPath = path.normalize(__dirname + '/../');
const bodyParser = require('body-parser');
const port = 8000;

app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());
app.use(express.static(rootPath + '/app'));

app.get('/data/event/:id', events.get);
app.post('/data/event/:id', events.save);

app.listen(port, function () {
    console.log('Listening on port ' + port + '...');
});

EventData.js -检查资源路径

'use strict';

eventsApp.factory('eventData', function ($resource) {
    var resource = $resource('/data/event/:id', { id: '@id' });
    return {
        getEvent: function () {
            return resource.get({ id: 2 });
        },
        save: function (event) {
            event.id = 999;
            return resource.save(event);
        }
    };
});