MEAN堆棧和ngResource - 不知道如何傳遞URL資源ID

Question

我想用平均堆棧來構建一個小應用程序，並且我一直在爲這個問題奮鬥幾天。該應用非常簡單，我可以創建測試，然後創建與這些測試相關的問題。

不同的REST的網址如下：

/api/quizes 
/api/quizes/:quizId 
/api/quizes/:quizId/questions 
/api/quizes/:quizId/questions/:questionId 

我能夠列出不同的測驗，添加，編輯和刪除它們沒有問題。但是，我在「查看測驗」視圖中有一個「添加問題」鏈接，該鏈接會將我重定向到「添加問題視圖」並向我顯示一個表單。當我提交此表單時，我從服務器收到錯誤404。

在Chrome網絡選項卡顯示我的POST那張/測驗/問題 URL，這當然是不正確的：

POST http://localhost:3000/api/quizes/questions 404 (Not Found) 

我注意到，它正試圖張貼到網址是：

/api/quizes/questions 

當它應該是：

/api/quizes/:quizId/questions 

我不明白爲什麼它不皮卡quizId，當我填寫了「創建問題視圖」的形式，因爲，該網址是正確的，並且包含quizId：

http://localhost:3000/#!/quizes/5483e94168bff98c17e1d120/questions/create 

一點點代碼：

我的問題的服務（我認爲這個問題是在那裏）：

'use strict'; 

angular.module('questions').factory('Questions', ['$resource', function($resource) { 
    return $resource('api/quizes/:quizId/questions/:questionId', { 
    quizId: '@_id', 
    questionId: '@quizId' 
    }, { 
    update: { 
     method: 'PUT' 
    } 
    }); 
}]); 

的問題客戶端控制器（我只是把相關的代碼在這裏）：

'use strict'; 
angular.module('questions').controller('QuestionsController', ['$scope', '$routeParams', '$location', 'Authentication', 'Questions', 'Quizes', 
    function($scope, $routeParams, $location, Authentication, Questions, Quizes) { 
    $scope.authentication = Authentication; 
    $scope.create = function() { 
     var question = new Questions({ 
     value: this.value, 
     type: this.type, 
     answer: this.answer 
     }); 

     question.$save(function(response) { 
     $location.path('quizes/:quizId/questions/' + response._id); 
     }, function(errorResponse) { 
     $scope.error = errorResponse.data.message; 
     }); 
    }; 

個

問題客戶端路由：

'use strict'; 
angular.module('questions').config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
    when('/quizes/:quizId/questions', { 
     templateUrl: 'questions/views/list-questions.client.view.html' 
    }). 
    when('/quizes/:quizId/questions/create', { 
     templateUrl: 'questions/views/create-question.client.view.html' 
    }). 
    when('/quizes/:quizId/questions/:questionId', { 
     templateUrl: 'questions/views/view-question.client.view.html' 
    }). 
    when('/quizes/:quizId/questions/:questionId/edit', { 
     templateUrl: 'questions/views/edit-question.client.view.html' 
    }); 
    } 
]); 

最後，創建問題的看法：

<section data-ng-controller="QuestionsController"> 
<h1>New Question</h1> 
    <form data-ng-submit="create()" novalidate> 
    <div> 
     <label for="value">Value</label> 
     <div> 
     <input type="text" data-ng-model="value" id="value" placeholder="Value" required> 
     </div> 
    </div> 
    <div> 
     <label for="type">Type</label> 
     <div> 
     <input type="text" data-ng-model="type" id="type" placeholder="Type" required> 
     </div> 
    </div> 
    <div> 
     <label for="answer">Answer</label> 
     <div> 
     <textarea data-ng-model="answer" id="answer" cols="30" rows="10" placeholder="Answer"></textarea> 
     </div> 
    </div> 
    <div> 
     <input type="submit"> 
    </div> 
    <div data-ng-show="error"> 
     <strong data-ng-bind="error"></strong> 
    </div> 
    </form> 
</section> 

我不認爲在服務器端的問題奠定了，但這裏的問題，服務器控制器（我在這裏去掉無關的代碼）：

var mongoose = require('mongoose'), 
    Question = mongoose.model('Question'); 

var getErrorMessage = function(err) { 
    if (err.errors) { 
    for (var errName in err.errors) { 
     if (err.errors[errName].message) return err.errors[errName].message; 
    } 
    } else { 
    return 'Unknown server error'; 
    } 
}; 

exports.create = function(req, res) { 
    var question = new Question(req.body); 
    question.creator = req.user; 
    question.quiz = req.quiz; 

    question.save(function(err) { 
    if (err) { 
     return res.status(400).send({ 
     message: getErrorMessage(err) 
     }); 
    } else { 
     res.json(question); 
    } 
    }); 
}; 

在服務器端的模式：

var mongoose = require('mongoose'), 
    Schema = mongoose.Schema; 

var QuestionSchema = new Schema({ 
    created: { 
    type: Date, 
    default: Date.now 
    }, 
    value: { 
    type: String, 
    default: '', 
    trim: true, 
    required: 'Value cannot be blank' 
    }, 
    type: { 
    type: String, 
    default: '', 
    trim: true, 
    required: 'Type cannot be blank' 
    }, 
    answer: { 
    type: String, 
    default: '', 
    trim: true, 
    required: 'Answer cannot be blank' 
    }, 
    quiz: { 
    type: Schema.ObjectId, 
    ref: 'Quiz' 
    }, 
    creator: { 
    type: Schema.ObjectId, 
    ref: 'User' 
    } 
}); 

mongoose.model('Question', QuestionSchema); 

最後我的問題在服務器端路線：

var users = require('../../app/controllers/users.server.controller'), 
    questions = require('../../app/controllers/questions.server.controller'), 
    quizes = require('../../app/controllers/quizes.server.controller'); 

module.exports = function(app) { 
    app.route('/api/quiz/:quizId/questions') 
    .get(questions.list) 
    .post(users.requiresLogin, questions.create); 

    app.route('/api/quizes/:quizId/questions/:questionId') 
    .get(questions.read) 
    .put(users.requiresLogin, questions.hasAuthorization, questions.update) 
    .delete(users.requiresLogin, questions.hasAuthorization, questions.delete); 

    app.param('quizId', quizes.quizByID); 
    app.param('questionId', questions.questionByID); 

}; 

Answer 1

在我認爲，提出的意見，討論後有三個問題：

1. 問題資源被拖欠quizId爲空，這會使您的請求看起來像：api/quizes/questions可以通過以下方式解決此問題：

   return $resource('api/quizes/:quizId/questions/:questionId', { 
       questionId: '@_id', 
       quizId: '@quiz' 
       }, { 
       update: { 
        method: 'PUT' 
       } 
   

然後，當保存新的問題從$ routeParams通過quizId：

newQuestion.$save({quizId: $routeParams.quizId} , function() { 
    $scope.questions.push(newQuestion) 
}) 

服務器路由期待POST請求/api/quiz' and that's why you get 404 , because the server doesn't have a route for post requests to/API/quizes/..`

修復這個在您的服務器修改這一行：

app.route('/api/quizes/:quizId/questions') // 

$ location.path不接受路徑變量，而不是做$location.path('quizes/'+$routePrams.quizId+'/questions/' + response._id)

希望對此有所幫助