使用來自Yeoman的angular-fullstack在Angular MEAN堆棧中使用Node Mailer和Sendgrid發送電子郵件

Question

我試圖了解在我的Angular App中通過聯系表單發送電子郵件的邏輯位置（使用Yeoman的angular-fullstack MEAN堆棧）。

我可以添加邏輯，使用nodemailer和sendgrid在服務器端的app.js文件中發送電子郵件，一切正常，每次刷新服務器時都會發送一封電子郵件，不過我在哪里放置邏輯有點模糊這樣只有在提交表單后它才會被發送，並且它會到達服務器端。

這就是Express JS方面的創建動作......

 exports.create = function(req, res) { Contact.create(req.body, function(err, contact) { if(err) { return handleError(res, err); } return res.json(201, contact); }); };

以下是app.js中正在運行的代碼，但顯然不在正確的位置......

 var nodemailer = require('nodemailer'); var sgTransport = require('nodemailer-sendgrid-transport'); var options = { auth: { api_user: 'username', // 'SENDGRID_USERNAME' - Recommended to store as evn variables api_key: 'password', // 'SENDGRID_PASSWORD' } }; var mailer = nodemailer.createTransport(sgTransport(options)); var email = { to: 'sendto@email.com', from: 'sendfrom@email.com', subject: 'Test Email', text: 'Awesome Email', html: '<b>Bold and Awesome Email</b>' }; mailer.sendMail(email, function(err, res) { if (err) { console.log(err) } console.log(res); });

來自rails背景我最初的想法是在創建操作中粘貼邏輯，這樣如果成功創建對象，則會發送電子郵件。 在這種情況下，這是一種正確的思考方式......我是MEAN堆棧的新手。

謝謝你的幫助...

Answer 1

您需要在服務器上創建一個路徑，您可以使用$ http.post從Angular發布表單值。 以下內容允許您以Angular形式輸入詳細信息。 然后將表單發布到Node，其中提取req.body值並添加電子郵件對象。 然后由SendGrid發送電子郵件。

SERVER.JS

var express = require('express');
var http = require('http');
var bodyParser = require('body-parser');
var dotenv = require('dotenv'); 

dotenv.load(); //load environment variables from .env into ENV (process.env).

var sendgrid_username   = process.env.SENDGRID_USERNAME;
var sendgrid_password   = process.env.SENDGRID_PASSWORD;

var sendgrid   = require('sendgrid')(sendgrid_username, sendgrid_password);
var email      = new sendgrid.Email();

var app = express();
app.use(bodyParser.json()); //needed for req.body
app.set('port', process.env.PORT || 3000);
app.use(express.static(__dirname + '/public')); 

app.post('/email', function(req, res) {
    email.addTo(req.body.to);
    email.setFrom(req.body.from);
    email.setSubject(req.body.subject);
    email.setText(req.body.text);
    email.addHeader('X-Sent-Using', 'SendGrid-API');
    email.addHeader('X-Transport', 'web');

    sendgrid.send(email, function(err, json) {
    if (err) { 
        return res.send("Problem Sending Email!!!!");
    }
        console.log(json);
        res.send("Email Sent OK!!!!");
    });
});
var server = http.createServer(app);
server.listen(app.get('port'), function() {
  console.log('Express server listening on port ' + app.get('port')  ) ;
});

INDEX.HTML

<!DOCTYPE html>
<html lang="en" ng-app="myApp">
<head>
    <meta charset="utf-8">
    <title></title>
    <!-- CSS -->
</head>
<body ng-controller="MainCtrl">
    <form name="emailForm">    
        <div class="group">      
          <input type="email" name="to" ng-model="email.to" ng-required="true">
          <label>To</label>
        </div>
        <div>      
          <input type="email" name="from" ng-model="email.from" ng-required="true">
          <label>From</label>
        </div>
        <div>      
          <input type="text" name="subject" ng-model="email.subject" ng-required="true">
          <label>Subject</label>
        </div>
        <div>      
            <textarea ng-model="email.text" name="text" placeholder="Enter Text Here.."></textarea>
        </div>

        <button id="emailSubmitBn" type="submit" ng-click="submitEmail()">
            Submit
        </button>
    </form>
    <!-- JS -->
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.11/angular.min.js"></script>   
    <script type="text/javascript" src="js/app.js"></script>
</body>
</html>

客戶端APP.JS

angular.module('myApp', [])

.controller('MainCtrl', function($scope, $http) {

        $scope.submitEmail = function() {

            console.log("TEST");
        //Request
        $http.post('/email', $scope.email) 
        .success(function(data, status) {
            console.log("Sent ok");
        })
        .error(function(data, status) {
            console.log("Error");
        })
    };
});

使用來自Yeoman的angular-fullstack在Angular MEAN堆棧中使用Node Mailer和Sendgrid發送電子郵件

問題描述

1 個解決方案

解決方案1
6 2015-02-02 14:02:22

使用來自Yeoman的angular-fullstack在Angular MEAN堆棧中使用Node Mailer和Sendgrid發送電子郵件

問題描述

1 個解決方案

解決方案1 6 2015-02-02 14:02:22

解決方案1
6 2015-02-02 14:02:22