Pascutronico Pascutronico - 1 month ago 27
Node.js Question

Learning to code with Angularjs and Node - Creating a basic contact form - Invalid shorthand property initializer

First post here :)

I'm learning to code and doing so with Angularjs and Node. I've already did a few javascript courses and didn't had any problems and a friend of mine challenged me to create a basic contact form with Angularjs to send an email through Node in order to advance on my learning.

I've went through Angularjs documentation, Node documentation and different tutorials and sites in order to find a solution for my problems and been able to move forward but got stuck on this error.

Here's my code:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp">
<form name="mailForm" action="#" ng-controller="MainController">
To: <input type="email" ng-model="inputTo"><br>
Subject: <input type="text" name="inputSubject"><br>
Mail body: <br><textarea name="inputMessage">Type in your message</textarea><br>
<input type="submit" ngClick="Submit">
</form>
</div>

<script>

var app = angular.module('myApp', []);
app.controller('MainController', function($scope){

var nodemailer = require('nodemailer');
var transporter = nodemailer.createTransport('smtps://email%40gmail.com:password@smtp.gmail.com');


$scope.data = {
inputTo = "default",
inputSubject = "default",
inputMessage = "default"
};

$scope.submitForm = function(){

var mailOptions = {
from: '"Dev ?" <email@email.com>',
to: {{inputTo}},
subject: {{inputSubject}},
text: {{inputMessage}}
}

transporter.sendMail(mailOptions, function(error, info){
if(error){
return console.log(error);
}

console.log('Message sent: ' + info.response);
});
}

})

</script>
</body>
</html>


The thing is that whenever I test the form (by completing it and clicking on the Submit button, duh!) I get the following errors on the console:

index.html?inputSubject=test&inputMessage=TEST+Type+in+your+message:26 Uncaught SyntaxError: Invalid shorthand property initializer

angular.js:38 Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.4.8/$injector/modulerr?p0=myApp&p1=Error%3A%2…ogleapis.com%2Fajax%2Flibs%2Fangularjs%2F1.4.8%2Fangular.min.js%3A20%3A274)(…)


Can you guys give me a hand?

Thank you very much in advance!

Answer

I think you've just tried to meld node.js and angularjs. My first tip was when you used var nodemailer = require('nodemailer'); which is how you require other packages in nodejs, angularjs does not have that functionality. After a quick google search for nodemailer, my suspicions were confirmed. Since nodemailer is a package for nodejs you won't be able to access its functions within an angular application, at least not directly.

What you will want to do is have a function in your angularjs app that calls the the node.js function. So you just need to migrate the logic thats currently in the controller of angular into its own node.js file.

The nodejs side of things is a little more complicated. You'll need to define a nodejs route in order to be able to 'talk' with nodejs. So basically whenever you get to some link in your your page, your nodejs code is called.

For example maybe going to: www.base-website-url/create/email will run your server.js file which holds your nodejs code (same as what you had inside your controller). I recommend that you learn how to make a simple crud app in nodejs. Just google that.

Also, thiking about it now, the Angular side of things will be just a little complicated as well. Since you are creating something (in this case an email object) you will need to make a POST(google http verbs) call in angularjs to send the email object to our nodejs function. Angular offers $http to help with this. ngResource is also another supplementary module you can use instead, but I'd probably just stick with learning $http.

A couple other things. I know it's your first post and all so I can understand why you might have written your post the way you did but just for the future, here's some stuff that can get your post more action:

  1. Keep your descriptions short and to the point, title included. I'm less likely to want to answer your question if its unnecessarily verbose, I want to get started figuring out the problem as quickly as possible.

  2. Share a worked out code example. There are several sites out there(jsfiddle, plunkr, codepen) that allow you to 'code-doodle' as I refer to it.They have an html panel, css panel and js panel. This makes it very easy to write enough code to get a working example and share the link to it. That way any other developer that wants to help problem-solve, already has some code they can begin playing with. Makes it sooo much easier to answer your question, and you may even find out what's wrong on your own as you're creating it. (I've done that on more than one occasion)

  3. Accept answers. If an answer's right, then mark it as accepted, the little green check next to the answer. This lets other people know that answer worked for you so they can feel more confident in trying and it also rewards the responder.

Besides that just keep learning and try to give at least as much as you take. Good luck!