2015-09-19 78 views
1

每個人。我正在製作我的第一個Node + Express + Angular應用程序。如何在不破壞NodeMailer的情況下在Express中啓用HTML5模式?

我有點用https://github.com/codeschool/StayingSharpWithAngularSTB作爲鍋爐板。

總體佈局是

[文件夾]應用
--------- [副文件夾]資產(Java腳本,CSS,圖像等)
------ --- [子文件夾]頁面(這包含ng-view的東西)
--------- [子文件夾]視圖
-------------- ------ index.html(這是容納所有東西的主要index.html)

[folder] node_modules
[文件夾]服務器
--------- [子文件夾]控制器
---------------------- core.server.controller。 JS
--------- expressConfig.js
--------- routes.js
app.js
的package.json

因此,這裏是我的服務器配置文件:
app.js

var app = require("./server/routes"); 

// Start the server 
var port = process.env.PORT || 8000; 
    app.listen(port, function(){ 
    console.log('Listening on port ' + port); 
}); 

個/server/expressConfig.js

var bodyParser = require('body-parser'); 

module.exports = function(app, express) { 
    // Serve static assets from the app folder. This enables things like javascript 
    // and stylesheets to be loaded as expected. You would normally use something like 
    // nginx for this, but this makes for a simpler demo app to just let express do it. 
    app.use("/", express.static("app/")); 

    // Set the view directory, this enables us to use the .render method inside routes 
    app.set('views', __dirname + '/../app/views'); 

    // parse application/x-www-form-urlencoded 
    app.use(bodyParser.urlencoded({ extended: false })); 

    // parse application/json 
    app.use(bodyParser.json()); 
}; 

/server/routes.js

var express = require('express'); 
var app = express(); 
var core = require('./controllers/core.server.controller') 
// Load Express Configuration 
require('./expressConfig')(app, express); 

// Root route 
app.get('/', function(req, res){ 
    res.sendfile('index.html', {root: app.settings.views}); 
}); 


// routes for sending forms 
app.route('/contact-form').post(core.sendMail); 
app.route('/table-form').post(core.sendTableRes); 
app.route('/artist-form').post(core.sendArtistRes); 
module.exports = app; 

/server/controllers/core.server.controller.js

var nodemailer = require('nodemailer'); 
var transporter = nodemailer.createTransport({ 
    service: 'gmail', 
    auth: { 
     user: //my gmail, 
     pass: //my gmail password 
    } 
}); 
// Send an email when the volunteer form is submitted 
exports.sendMail = function (req, res){ 
    var data = req.body; 
    transporter.sendMail({ 
     from: //my gmail, 
     to: //another gmail, 
     subject: data.volunteerName+ ' wants to volunteer for our event 2016', 
     text: 'Volunteer Info \n Name : '+data.volunteerName+'\n Phone Number : ' 
+data.volunteerNum+'\n E-mail : ' +data.volunteerEmail 
    }); 
    res.json(data); 
}; 
// Other similar mailing functions 

而這裏的一發送郵件的角度控制器
volunteerFormController.js

angular.module('MyApp').controller('FormController', function($http){ 
    this.volunteer = { 
    }; 
    this.addVolunteer = function(){ 
     var data = ({ 
      volunteerName : this.volunteer.name, 
      volunteerEmail : this.volunteer.email, 
      volunteerNum : this.volunteer.phone 
     }); 

    $http.post('/contact-form', data). 
    then(function(response) { 
//show thank you message with animate.css classes and hide form 
     $(".thanksFriend").addClass("animated tada showBlock"); 
     $("form").addClass("flipOutX animated hideBlock"); 
     }, function(response) { 
      $(".sorryFriend").addClass("animated tada showBlock"); 
     }); 

    }; 
}); 

這工作得很好!但是,如果我在Angular中啓用html5模式並在Express中使用

app.use(function(req, res){ 
    res.sendfile('index.html', {root: app.settings.views}); 
}); 

在routes.js文件中,Html 5模式很有用沒有404s當我刪除磅和刷新,但沒有我的接觸形式的工作,並沒有給我任何錯誤控制檯...我的服務器文件是非常小的,它不是非常複雜,所以它應該很容易弄清楚如何同時使用HTML5模式和工作聯繫表單。有任何想法嗎?我對Express並不瞭解,我使用教程http://www.bossable.com/1910/angularjs-nodemailer-contact-form/來了解如何使用nodemailer。有沒有另外一種方法來設置nodemailer,這樣可以工作?

我真的很感激一些幫助與此有關。這讓我非常瘋狂; __;

+1

我想你需要app.get改變'( '/',''到app.get( '/ *',' – YOU

+0

@YOU哦,我的上帝!感謝永遠的。這工作!我不知道它爲什麼工作,但它做到了! – StephanieQ

+0

因爲在SPA中,你服務的一切index.html – YOU

回答

1

所以,你必須服務於每一個請求返回指數。HTML,

通過改變app.get('/',app.get('/*',

相關問題