Sending email from an AngularJS web application

Question

In one of my AngularJS web applications, I need to confirm a password by sending emails to a concerned person. How can I achieve this in AngularJS? I am a .NET guy and I am using Visual Studio 2013.

You cannot send emails with an AngularJS app, you should send an AJAX request to your .NET server and the server will handle the rest. — Pepijn
– Pepijn, Commented Sep 10, 2014 at 7:38
Use webapi2 and create a AngularJS service to send an email, simply tie in the http service from angular and you should be good to go. — TGarrett
– TGarrett, Commented Jul 12, 2016 at 19:13

cfprabhu · Accepted Answer · 2015-03-13 11:16:08Z

9

You might also look into using a third party SaaS, like Mandrill, SendGrid, or MailGun. I have worked w/ building in an email feature using Mandrill. Account is free to setup and threshold for billing on messaging is like 12k/month. Sending is just a matter of following their API to HTTP POST to their REST interface. Small example below:

.controller('sentMailCntrl',function($scope, $http){
  $scope.sendMail = function(a){
    console.log(a.toEmail);
    var mailJSON ={
        "key": "xxxxxxxxxxxxxxxxxxxxxxx",
        "message": {
          "html": ""+a.mailBody,
          "text": ""+a.mailBody,
          "subject": ""+a.subject,
          "from_email": "[email protected]",
          "from_name": "Support",
          "to": [
            {
              "email": ""+a.toEmail,
              "name": "John Doe",
              "type": "to"
            }
          ],
          "important": false,
          "track_opens": null,
          "track_clicks": null,
          "auto_text": null,
          "auto_html": null,
          "inline_css": null,
          "url_strip_qs": null,
          "preserve_recipients": null,
          "view_content_link": null,
          "tracking_domain": null,
          "signing_domain": null,
          "return_path_domain": null
        },
        "async": false,
        "ip_pool": "Main Pool"
    };
    var apiURL = "https://mandrillapp.com/api/1.0/messages/send.json";
    $http.post(apiURL, mailJSON).
      success(function(data, status, headers, config) {
        alert('successful email send.');
        $scope.form={};
        console.log('successful email send.');
        console.log('status: ' + status);
        console.log('data: ' + data);
        console.log('headers: ' + headers);
        console.log('config: ' + config);
      }).error(function(data, status, headers, config) {
        console.log('error sending email.');
        console.log('status: ' + status);
      });
  }
})

answered Mar 13, 2015 at 11:16

cfprabhu

5,3722 gold badges23 silver badges34 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

tkarls Over a year ago

Well, problem is the api key. If its available to angular its basically available to everyone. So I would not recommend this if you care about yourself :)

Dan Mantyla Over a year ago

what if you wrote a PHP script that did that from your own server?

Behnam · Accepted Answer · 2014-09-10 09:04:04Z

4

you cannot send email via javascript library (angularjs or jquery and so on) you need server side for send mail best way for this case use ajax

answered Sep 10, 2014 at 9:04

Behnam

6,5191 gold badge44 silver badges37 bronze badges

Comments

Ravi Shankar B · Accepted Answer · 2014-09-11 09:41:33Z

I have achieved through web services Please refer the code snippet below

public bool EmailNotification()
    {
            using (var mail = new MailMessage(emailFrom, "test.test.com"))
            {
                string body = "Your message : [Ipaddress]/Views/ForgotPassword.html";
                mail.Subject = "Forgot password";
                mail.Body = body;
                mail.IsBodyHtml = false;
                var smtp = new SmtpClient();
                smtp.Host = "smtp.gmail.com";
                smtp.EnableSsl = true;
                smtp.UseDefaultCredentials = false;
                smtp.Credentials = new NetworkCredential(emailFrom, emailPwd);
                smtp.Port = 587;
                smtp.Send(mail);
                return true;
            }
    }

and ajax call as

 $.ajax({
        type: "POST",
        url: "Service.asmx/EmailNotification",
        data: "{}",
        contentType: "application/json; charset=utf-8",
        dataType: "json",
        success: function (data)
        {

        },
        error: function (XHR, errStatus, errorThrown) {
            var err = JSON.parse(XHR.responseText);
            errorMessage = err.Message;
            alert(errorMessage);
        }
    });

Ravi · Accepted Answer · 2018-06-26 12:42:28Z

.controller('sentMailCntrl',function($scope, $http){
  $scope.sendMail = function(a){
    console.log(a.toEmail);
    var mailJSON ={
        "key": "xxxxxxxxxxxxxxxxxxxxxxx",
        "message": {
          "html": ""+a.mailBody,
          "text": ""+a.mailBody,
          "subject": ""+a.subject,
          "from_email": "[email protected]",
          "from_name": "Support",
          "to": [
            {
              "email": ""+a.toEmail,
              "name": "John Doe",
              "type": "to"
            }
          ],
          "important": false,
          "track_opens": null,
          "track_clicks": null,
          "auto_text": null,
          "auto_html": null,
          "inline_css": null,
          "url_strip_qs": null,
          "preserve_recipients": null,
          "view_content_link": null,
          "tracking_domain": null,
          "signing_domain": null,
          "return_path_domain": null
        },
        "async": false,
        "ip_pool": "Main Pool"
    };
    var apiURL = "https://mandrillapp.com/api/1.0/messages/send.json";
    $http.post(apiURL, mailJSON).
      success(function(data, status, headers, config) {
        alert('successful email send.');
        $scope.form={};
        console.log('successful email send.');
        console.log('status: ' + status);
        console.log('data: ' + data);
        console.log('headers: ' + headers);
        console.log('config: ' + config);
      }).error(function(data, status, headers, config) {
        console.log('error sending email.');
        console.log('status: ' + status);
      });
  }
})

Collectives™ on Stack Overflow

Sending email from an AngularJS web application

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related