Как использовать приложение Angular в качестве движка View с Node.js - PullRequest
Новая
       6

Как использовать приложение Angular в качестве движка View с Node.js

1 голос
/ 29 марта 2019

Я пытаюсь создать приложение Angular, которое отправляет электронную почту с помощью Nodemailer.

Я могу создать стандартное приложение Angular, содержащее форму.Затем я хочу передать данные из этой формы в файл .JS, который затем будет использовать Nodemailer для отправки этих данных на адрес электронной почты.

Все примеры, которые я нашел для Nodemailer, используют механизмы просмотра, такие как рулии т. д., но я хочу использовать HTML-код моего приложения Angular, а не механизм просмотра.

Как передать данные из формы приложения Angular в файл .JS для отправки электронного письма без использования View Engine?

Ниже приведено то, что у меня есть в приложении Angular: 

<form method="POST" action="send">
      <p>
          <label>Name</label>
          <input type="text" name="name">
      </p>
      <p>
          <label>Company</label>
          <input type="text" name="company">
      </p>
      <p>
          <label>Email Address</label>
          <input type="email" name="email">
      </p>
      <p>
          <label>Phone Number</label>
          <input type="text" name="phone">
      </p>
      <p class="full">
          <label>Message</label>
          <textarea name="message" rows="5"></textarea>
      </p>
      <p class="full">
          <button type="submit">Submit</button>
      </p>
  </form>

И это то, что у меня есть в учебном коде:

APP.JS 

const express = require("express");
const bodyParser = require("body-parser");
const exphbs = require("express-handlebars");
const path = require("path");
const nodemailer = require("nodemailer");

const app = express();

// View engine setup
app.engine("handlebars", exphbs());
app.set("view engine", "handlebars");

// Static folder
app.use("/public", express.static(path.join(__dirname, "public")));

// Body Parser Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json()); 

app.get("/", (req, res) => {
  res.render("contact");
});

app.post("/send", async (req, res) => {
  const output = `
    <p>You have a new contact request</p>
    <h3>Contact Details</h3>
    <ul>
        <li>Name: ${req.body.name}</li>
        <li>Company: ${req.body.company}</li>
        <li>Email: ${req.body.email}</li>
        <li>Phone: ${req.body.phone}</li>
    </ul>
    <h3>Message</h3>
    <p>${req.body.message}</p>    
    `;

    try{
        var transporter = nodemailer.createTransport({      
            service: "gmail",
            auth: {
              user: "myemail@mail.com",
              pass: "myPassword"
            },
            tls: {
              rejectUnauthorized: false
            }
          });
    }
    catch(err){
        console.log(err.message);
    }

  const mailOptions = {
    from: "myemail@mail.com", // sender address
    to: "myemail@mail.com", // list of receivers
    subject: "Test email", // Subject line
    html: output // plain text body
  };

  let info = await transporter.sendMail(mailOptions);

  console.log("Message sent: %s", info.messageId);
  console.log("Preview URL: %s", nodemailer.getTestMessageUrl(info));

  res.render("contact", { msg: "Email has been sent" });
});

app.listen(3000, () => console.log("Server started..."));

CONTACT.HANDLEBARS 

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Acme Web Design</title>
    <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"
    integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.css" />
    <link rel="stylesheet" href="public/css/style.css">
</head>

<body>
    <div class="container">
        <h1 class="brand"><span>Acme</span> Web Design</h1>
        <div class="wrapper animated bounceInLeft">
            <div class="company-info">
                <h3>Acme Web Design</h3>
                <ul>
                    <li><i class="fa fa-road"></i> 44 Something st</li>
                    <li><i class="fa fa-phone"></i> (555) 555-5555</li>
                    <li><i class="fa fa-envelope"></i> test@acme.test</li>
                </ul>
            </div>
            <div class="contact">
                <h3>Email Us</h3>
                {{ msg }}
                <form method="POST" action="send">
                    <p>
                        <label>Name</label>
                        <input type="text" name="name">
                    </p>
                    <p>
                        <label>Company</label>
                        <input type="text" name="company">
                    </p>
                    <p>
                        <label>Email Address</label>
                        <input type="email" name="email">
                    </p>
                    <p>
                        <label>Phone Number</label>
                        <input type="text" name="phone">
                    </p>
                    <p class="full">
                        <label>Message</label>
                        <textarea name="message" rows="5"></textarea>
                    </p>
                    <p class="full">
                        <button type="submit">Submit</button>
                    </p>
                </form>
            </div>
        </div>
    </div>
</body>

Я могу выложить дополнительный код при необходимости.

1 Ответ

0 голосов
/ 29 марта 2019

Итак, мне удалось передать данные из формы (root.component.html) на сервер (app.js) , захватить их и распечатать на консоли через POST метод.

Код ниже:

root.component.html: 

<form #emailForm="ngForm">
    <div class="col-md-6">            
          <div>
            <label for="username">
              Username
            </label>
            <input              
              type="text"
              id="username"
              [(ngModel)]="username"
              required
              name="username"
              #txtUsername="ngModel"
            />            
          </div>
          <div>
            <label for="message">Message</label>
            <textarea 
             id="message"
              placeholder="Please enter your message here"
              [(ngModel)]="message"
              required
              name="message"
              #txtMessage="ngModel"
            ></textarea>
          </div>               
          <button
            axis-button
            class="axis-btn"
            title="Submit"
            data-kind="primary"
            (click)="sendMessage()"
            [disabled]="emailForm.invalid"
          >
            Send Email
          </button>        
    </div>
</form>

root.component.ts: 

export class RootComponent implements OnInit {
  constructor(private rootService: RootService) {}

  username: string;
  message: string;

  ngOnInit() {
    this.getData();

  }

  getData() {
    this.rootService.getAPIData().subscribe(
      response => {
        console.log('response from GET API is ', response);
      },
      error => {
        console.log('error is ', error);
      }
    );
  }

  postData(name: string, message: string) {
    this.rootService.postAPIData(name, message).subscribe(
      response => {
        console.log('response from POST API is ', response);
      },
      error => {
        console.log('error during post is ', error);
      }
    );
  }

  sendMessage() {
    this.postData(this.username, this.message);
  }
}

root.service.ts: 

export class RootService {
  constructor(private http: HttpClient) {}

  getAPIData() {
    return this.http.get('https://jsonplaceholder.typicode.com/users');
  }

  postAPIData(name: string, message: string) {
    return this.http.post('/api/postData', {
      name: name,
      message: message
    });
  }
}

app.js: 

const express = require('express')
const app = express()
const bodyParser = require('body-parser')   

app.get('/', (req, res) => {
    res.send('Welcome to Node API')
})

app.get('/getData', (req, res) => {
    res.json({'message': 'Hello World'})
})

app.post('/postData', bodyParser.json(), (req, res) => {
    res.json(req.body) // Prints the request body to the browser console   
    const output = `Name: ${req.body.name}......Email: ${req.body.message}`;
    console.log(output);
})

app.listen(3000, () => console.log('Example app listening on port 3000!'))
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...