【问题标题】:Cannot POST /api node无法发布 /api 节点
【发布时间】:2015-07-09 01:14:30
【问题描述】:

我无法将来自 AngularJs 表单的响应发布到我的 Mongo DB 数据库。这是

的代码sn-p

控制器

   angular.module('myapp')
      .controller('AddCtrl', function($scope, $alert, Event) {
        $scope.addEvent = function() {
          Event.save({ eventName: $scope.eventName }).$promise
            .then(function() {
              $scope.eventName = '';
              $scope.addForm.$setPristine();
              $alert({
                content: 'Event has been added.'
              });
            })
            .catch(function(response) {
              $scope.eventName = '';
              $scope.addForm.$setPristine();
              $alert({
                content: response.data.message
              });
            });
        };
      });

表单模板(html)

<div class="container">
  <div class="panel panel-default">
    <div class="panel-heading">Add Events</div>
    <div class="panel-body">
      <form class="form" method="post" ng-submit="addEvent()" name="addForm">
        <div class="form-group" ng-class="{ 'has-error' : addForm.eventName.$invalid && addForm.eventName.$dirty }">
          <label class="control-label">Name</label>
          <input class="form-control" type="text" name="eventName" ng-model="eventName" placeholder="Select Event Name Here" required autofocus>
          <div class="help-block text-danger" ng-if="addForm.eventName.$dirty" ng-messages="addForm.eventName.$error">
            <div ng-message="required">Event name is required.</div>
          </div>
        </div>
        <button class="btn btn-primary" type="submit" ng-disabled="addForm.$invalid">Add</button>
      </form>
    </div>
  </div>
</div>

app.post() 方法

app.post('/api/events', function (req, res, next) {
   var event = new Event();    // create a new instance of the Event model
    event.name = req.body.eventName;  // set the event name (comes from the request)

    event.save(function(err) {
      if (err)
        res.send(err);

      res.json({ message: 'Event Added!' });
    });

});

事件架构

var eventSchema   = new Schema({
  name: String
});
var Event = mongoose.model('Event', eventSchema);

我似乎无法弄清楚为什么会收到 POST /api/events 404 错误?

编辑:也添加了 GET /api/event 路由

app.get('/api/events', function(req, res, next) {
  Event.find(function(err, events) {
      if (err)
        res.send(err);

      res.json(events);
    });

});

app.get('/api/events/:id', function(req, res, next) {
  Event.findById(req.params.id, function(err, event) {
    if (err) return next(err);
    res.send(event);
  });
});

浏览器日志:

Error: [$injector:unpr] Unknown provider: EventProvider <- Event
http://errors.angularjs.org/1.3.0-beta.17/$injector/unpr?p0=EventProvider%20%3C-%20Event
    at http://localhost:8080/vendor/angular.js:78:12
    at http://localhost:8080/vendor/angular.js:3894:19
    at Object.getService [as get] (http://localhost:8080/vendor/angular.js:4027:39)
    at http://localhost:8080/vendor/angular.js:3899:45
    at getService (http://localhost:8080/vendor/angular.js:4027:39)
    at invoke (http://localhost:8080/vendor/angular.js:4059:13)
    at Object.instantiate (http://localhost:8080/vendor/angular.js:4079:23)
    at http://localhost:8080/vendor/angular.js:7460:28
    at link (http://localhost:8080/vendor/angular-route.js:913:26)
    at nodeLinkFn (http://localhost:8080/vendor/angular.js:6841:13) <div ng-view="" class="{{pageClass}} ng-scope">

【问题讨论】:

  • 发布您的活动服务
  • 您能否分享您拥有的有关该错误的任何浏览器日志? res.send(err); 这是发送错误的内容吗?
  • 除了Event 服务,很高兴看到任何其他相关的快速路由。在请求发送到您的 /api/events 处理程序之前抛出 404。
  • 只是发送 POST /api/events 404 389ms
  • 我已将它们添加到@MattG 问题中

标签: angularjs node.js mongodb express


【解决方案1】:

您似乎正在尝试与您的 Angular 前端控制器共享您的猫鼬模型。它们彼此独立。

我修改了您的angular controller 以使用$http provider/api/events 端点发送POST 请求。

angular.module('myapp')
    .controller('AddCtrl', function($scope, $alert, $http) {
        $scope.addEvent = function() {
            $http.post('/api/events', {
                eventName: $scope.eventName
            }).success(function(response) {
                $scope.eventName = '';
                $scope.addForm.$setPristine();
                $alert({
                    content: 'Event has been added.'
                });
            }).error(function(response) {
                $scope.eventName = '';
                $scope.addForm.$setPristine();
                $alert({
                    content: response.data.message
                });
            });
        };
    });

【讨论】:

    【解决方案2】:

    回答我自己的问题:

    我创建了工厂服务

    angular.module('myapp')
      .factory('Event', function($resource) {
        return $resource('/api/events/:_id');
      });
    

    现在一切正常。

    【讨论】:

      猜你喜欢
      • 2012-08-29
      • 1970-01-01
      • 1970-01-01
      • 2021-11-04
      • 1970-01-01
      • 2020-07-13
      • 1970-01-01
      • 1970-01-01
      • 2016-02-13
      相关资源
      最近更新 更多