带有快速联系表格的Angular JS返回404答案

【问题标题】：Angular JS with express contact form returning 404带有快速联系表格的Angular JS返回404
【发布时间】：2016-02-13 00:11:29
【问题描述】：

我正在尝试创建一个联系表单来发送带有消息的电子邮件。

我对 Angular Express 节点还很陌生

这是控制器代码：

'use strict';

/**
 * @ngdoc function
 * @name exampleApp.controller:ContactUsCtrl
 * @description
 * # ContactUsCtrl
 * Controller of the exampleApp
 */
angular.module('exampleApp')
.controller('ContactUsCtrl', ['$scope', '$http', '$animate', function($scope, $http, $animate) {

  var self = this;
  self.sendMail = sendMail;

  function sendMail () {

    var req = {
     method: 'POST',
     url: '/contact_us',
     headers: {
       'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
     },
     data: 
      { 
        contactName : this.contactName,
        contactEmail : this.contactEmail,
        contactMsg : this.contactMsg
      }
    }

    $http(req).
      success(function (data, status, headers, config){
        console.log('success');
      }).
      error(function (data, status, headers, config){
        console.log('error');
      });

      console.log(req);

  };

}]);

这是我的 App.js

var subdomain = require("express-subdomain");
var express = require("express");
var bodyParser = require("body-parser");
var methodOverride = require('method-override');
var morgan = require('morgan');
var nodemailer = require('nodemailer');
var app = express();
var router = express.Router();

//Example Admin page
router.get('/', function(req, res){
  res.render('admin.html');
});

app.use(subdomain('admin', router));

//Config
app.set('views', __dirname + '/app');
app.use(morgan("combined"));
app.use(bodyParser.urlencoded({extended: false}));
app.use(methodOverride());
app.engine('html', require('ejs').renderFile);

//Example client page
app.get('/', function(request, response) {
  response.render('index.html');
});

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

var port = process.env.PORT || 5000;

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

当我提交表单时，我收到以下消息的错误： POST http://localhost:5000/contact_us 404 (Not Found)

我还需要什么才能使联系表单在 AngularJS 上工作？

编辑

这些是我的路线：

'use strict';

var xhrDelay = 1200;

angular.module('exampleApp', ['angularSpinner', 'ui.router', 'angular-ui-view-spinner'])
  .config(['$stateProvider', '$urlRouterProvider', function ($stateProvider, $urlRouterProvider, $scope) {
    $urlRouterProvider.otherwise('/');

    $stateProvider
      .state('main', {
        url: '/',
        templateUrl: 'views/main.html',
        controller: 'MainCtrl as mc'
        // homepage: 'fixed'
      })
      .state('contact_us', {
        url: '/contact_us',
        templateUrl: 'views/contact_us.html',
        controller: 'ContactUsCtrl',
        controllerAs: 'cu'
      });
  }]);

解决方案

我在 app.js 中添加了这段代码（服务器代码）：

app.post('/contact_us',function(req,res){
  //Your NodeMailer logic comes here
  exports.sendMail = function(req, res) {

    var data = req.body;

    transporter.sendMail({
      from: data.contactEmail,
      to: 'jane@email.com',
      subject: 'Message from ' + data.contactName,
      text: data.contactMsg
    });

    res.json(data);
    };
});

来源：Sending AngularJS form to NodeMailer to send email

有了这个，我不再收到 404 错误。

【问题讨论】：

您的 Express 代码中没有 app.post('/contact_us') 路由。 expressjs.com/4x/api.html#app.post.method我建议你在继续之前阅读“入门”和“指南” - expressjs.com
我用我的路线编辑了这个问题，我在快递代码中添加了app.post，但仍然是同样的错误。
路由是 Angular 前端路由。您需要添加仍然缺少的 Express，至少现在在您的示例代码中。在 app.get('/'... 定义之后添加它。我不会发布代码示例，因为您需要阅读文档并了解它们是如何组合在一起的，否则您将无法完成您所能完成的工作。
好的，我想我已经成功了，将编辑问题
好的，很好！如果您愿意，您可以立即关闭问题或接受任何答案。所以它不在 SO 中的未答复列表中。祝你好运！

标签： javascript angularjs node.js forms express

【解决方案1】：

您的 App.js 中需要一个“/contact_us”路由。

【讨论】：

我已经用我的路线编辑了这个问题，我不知道把/contact_us放在哪里，因为我已经定义了那个。

【解决方案2】：

我在 app.js 中添加了这段代码（服务器代码）：

app.post('/contact_us',function(req,res){
  //Your NodeMailer logic comes here
  exports.sendMail = function(req, res) {

    var data = req.body;

    transporter.sendMail({
      from: data.contactEmail,
      to: 'jane@email.com',
      subject: 'Message from ' + data.contactName,
      text: data.contactMsg
    });

    res.json(data);
    };
});

来源：Sending AngularJS form to NodeMailer to send email

有了这个，我不再收到 404 错误。

【讨论】：