javascript - Angular JS 与快速联系表单返回 404

Question

我正在尝试创建联系表单来发送包含消息的电子邮件。

我对 Angular Express Node 还很陌生

这是 Controller 代码:

'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(未找到)

要使联系表单在 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 错误了。

Answer 1

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