Email sending with AngularJS and PHP

Saturday 25 February 2017

Email sending with AngularJS and PHP

Posted By: abhishek verma Saturday, February 25, 2017 Leave a Reply
Sometimes techieupgrader.in may need to send email from blog or our website to the user and client with some attachment Like(resume,invoice.etc..).
It is most used to Validation html fields and sending the form data to the client side to the server is done PHP with AngularJS.
and latest More validation backend side and processing the email is (valid or no) done with PHPMailer on the server and quick response.
In file index.html setup the html form and add all the Angular js directives:

File Name : index.html

<!DOCTYPE html>
<html ng-app="emapp">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Email sending with AngularJS and PHP</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="yourprojectdir/style.css" />
    <script data-require="angular.js@1.2.x" src="yourprojectdir/1.2.28/angular.js" data-semver="1.2.28"></script>
    <script src="yourprojectdir/app.js"></script>
  </head>

  <body ng-controller="userMainCtrlemail">
    <input type="text" ng-model="userformData.username" placeholder="write your username">
    <input type="text" ng-model="userformData.useremail" placeholder="write your useremail">
    <input type="text" ng-model="userformData.usermessage" placeholder="write your usermessage">
    <input type="submit" value="Email Send" ng-click="userpostDatadtl()">
    
    <hr>
    <div ng-bind-html="data_response_display"></div>
  </body>

</html>
Main logic and Assign a variable appname to the Angular app in app.js file:

File Name : app.js

// Angularjs config
var uemailapp = angular.module('emapp', []).config(function($sceProvider) {
  $sceProvider.enabled(false);
});

uemailapp.controller('userMainCtrlemail', function($scope, $http) {
  $scope.userformData = {
    'username': '',
    'useremail': '',
    'usermessage': ''
  };
  $scope.userpostDatadtl = function () {
    $http.post('http://tom.in/admin/api/v1/form.php', $scope.userformData)
    .success(
      function(result_data){
        $scope.data_response_display = result_data.replace(/\ /g, '&nbsp;&nbsp;').replace(/\n/g, '<br/>') // display html web page format response here
      })
    .error(
      function(result_data){
        $scope.data_response_display = result_data
      })
  }
});

Second way : Email sending with AngularJS and PHP

public bool EmailNotification()
    {
            using (var mail = new MailMessage(emailFrom, "test.test.com"))
            {
                string body = "Your message : [Ipaddress]/Views/ForgotPassword.html";
                mail.Subject = "Forgot password"; //set subject
                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;
            }
    }
 

$.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);
        }
    });

0 comments: