Sometimes we may need an email form or contact form for our website
Scenario-1: We wish our users to be able to communicate to the admin, author, managers of our website.
Scenario-2: We wish to send emails to our users regarding
- Signup success
- Forgot password
- Reset password success
- Invalid activity
Run
- Download and extract the zip file
- Open command prompt and browse to the extracted folder
- write the command node .
- Open Chrome browser and point to http://localhost:8080/
Tutorial
We will be creating a simple AngularJS web application which will send an email to the website administrator when any users wish to contact regarding any issue.
We are going to implement the above functionality in just 3 steps
- Craft the user interface (front end client side)
- Configure the email client (Sendgrid)
- Create the server and make the server talk to Sendgrid and AngularJS frontend (Using NodeJS)
Step-1
Let’s build the user interface using google’s material design and our friend AngularJS
Step-2
To send email we will use some node libraries
- nodemailer
- nodemailer-sendgrid-transport
For this we need to create a sendgrid account and generate a api key and use in index.js
Project Structure
client
– style css
– app.js
– index.html
index.js
package.json
index.js (NodeJS)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
var express = require('express');
var bodyParser = require('body-parser');
var nodemailer = require('nodemailer');
var sgTransport = require('nodemailer-sendgrid-transport');
var app = express();
app.use(express.static(__dirname + '/client'));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));
// Sendmail route
app.post('/sendmail', function(req, res){
var options = {
auth: {
api_key: 'YOUR_SENDGRID_API_KEY'
}
}
var mailer = nodemailer.createTransport(sgTransport(options));
mailer.sendMail(req.body, function(error, info){
if(error){
res.status('401').json({err: info});
}else{
res.status('200').json({success: true});
}
});
});
// Start server
var port = 8080, ip = "127.0.0.1";
app.listen(port, ip, function() {
console.log('Express server listening on %d', port);
});
|
package.json
|
|
{
"name": "sendmail",
"version": "1.0.0",
"main": "index.js",
"dependencies": {
"body-parser": "^1.14.2",
"express": "^4.13.4",
"nodemailer": "^2.1.0",
"nodemailer-sendgrid-transport": "^0.2.0"
}
}
|
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
|
Send email using NodeJS
<!-- CSS -->
<header><nav class="light-blue lighten-1">
<div class="nav-wrapper container">
<a id="logo-container" class="brand-logo" href="http://www.angularcode.com/">AngularCode | Demo</a>
<ul class="right">
<li><a class="dropdown-button" href="http://www.angularcode.com/send-email-from-website-using-angularjs-and-nodejs" data-activates="dropdown1">Tutorial<i class="material-icons left">airplay</i></a></li>
</ul>
</div>
</nav></header>
<div class="section no-pad-bot valign-wrapper">
<div class="container">
<div class="center">
<i class="material-icons center large">email</i>
<h1 class="header orange-text">Email Us</h1>
</div>
<div class="center success">
<div class="preloader-wrapper small active"></div>
<div><i class="material-icons center">done</i>{{serverMessage}}</div>
</div>
<div class="row center"></div>
<div class="row center"><button class="btn-large waves-effect waves-light orange"></button><button class="btn-large waves-effect waves-light orange"><i class="material-icons left">send</i></button>
<div class="circle"></div>
Send Mail
</div>
</div>
</div>
<footer class="page-footer orange">
<div class="footer-copyright">
<div class="container center">Crafted by <a class="orange-text text-lighten-3" href="http://angularcode.com">AngularCode</a></div>
</div>
</footer><!-- Scripts-->
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.2/angular.min.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
|
app.js (AngularJS)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
'use strict';
angular.module('sendmailApp', [])
.controller('MailController', function ($scope,$http) {
$scope.loading = false;
$scope.send = function (mail){
$scope.loading = true;
$http.post('/sendmail', {
from: 'CodeNx <admin@angularcode.com>',
to: 'support@codenx.com',
subject: 'Message from AngularCode',
text: mail.message
}).then(res=>{
$scope.loading = false;
$scope.serverMessage = 'Email sent successfully';
});
}
})
|
No comments:
Post a Comment