2014-10-12 41 views
3

我想了解在哪裏定位邏輯,通過我的Angular App中的聯繫表單發送電子郵件(使用angular-fullstack MEAN堆棧約曼)。發送電子郵件與節點郵寄者和Sendgrid在Angular MEAN堆棧中使用來自Yeoman的angular-fullstack

我可以使用nodemailer和sendgrid在服務器端的app.js文件中添加發送電子郵件的邏輯,並且一切正常,每次刷新服務器時都會發送一封電子郵件,但是我對哪裏有點模糊放置邏輯,以便只在表單提交後纔會發送,並且它會觸發服務器端。

這就是創建動作看起來像快遞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 = { 
 
\t auth: { 
 
\t \t api_user: 'username', // 'SENDGRID_USERNAME' - Recommended to store as evn variables 
 
\t \t api_key: 'password', // 'SENDGRID_PASSWORD' 
 
\t } 
 
}; 
 

 
var mailer = nodemailer.createTransport(sgTransport(options)); 
 

 
var email = { 
 
\t to: '[email protected]', 
 
\t from: '[email protected]', 
 
\t subject: 'Test Email', 
 
\t text: 'Awesome Email', 
 
\t html: '<b>Bold and Awesome Email</b>' 
 
}; 
 

 
mailer.sendMail(email, function(err, res) { 
 
\t if (err) { 
 
\t \t console.log(err) 
 
\t } 
 
\t console.log(res); 
 
});

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

感謝您的幫助......

回答

6

您需要創建一個可以從角使用$ http.post發佈表單數據到服務器上的路線。 以下內容可讓您以角度形式輸入詳細信息。然後將表單發佈到提取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"); 
     }) 
    }; 
}); 
相關問題