Sending Email with Node Mailer and Sendgrid in Angular MEAN stack using angular-fullstack from Yeoman
You need to create a route on the server that you can post form values to from Angular using $http.post.The following lets you enter details in an Angular form. The form is then posted to Node where the req.body values are extracted and added email object. The email is then send by 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.bodyapp.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>CLIENT SIDE 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"); }) };});