学习用Angularjs和Node编写代码-创建一个基本的联系人表单-无效的快捷属性初始化器

这里的第一篇文章:)

我正在学习用Angularjs和Node编程。我已经上了一些javascript课程，没有遇到任何问题，我的一个朋友挑战我用Angularjs创建一个基本的联系表单，通过Node发送电子邮件，以推进我的学习。

我已经浏览了Angularjs文档，Node文档和不同的教程和网站，以便找到解决我的问题的方法，并能够继续前进，但却被这个错误卡住了。

下面是我的代码:

<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>

问题是，每当我测试表单时(通过完成它并单击Submit按钮，废话!)我在控制台上得到以下错误:

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)(…)

你们能帮我一下吗?

提前非常感谢!

我想你只是试图融合node.js和angularjs。我的第一个提示是，当你使用var nodemailer = require('nodemailer');时，你需要在nodejs中使用其他包，而angularjs没有这个功能。在谷歌上快速搜索了nodemailer之后，我的怀疑得到了证实。因为nodemailer是一个nodejs包，你不能在angular应用中访问它的函数，至少不能直接访问。

你要做的是在你的angularjs应用中有一个函数调用node.js函数。所以你只需要把angular控制器中的逻辑迁移到它自己的node.js文件中。

nodejs方面的事情有点复杂。为了能够与nodejs"对话"，你需要定义一个nodejs路由。当你到达页面中的链接时，你的nodejs代码就会被调用。

例如:www.base-website-url/create/email将运行您的server.js文件，其中包含您的nodejs代码(与您在控制器内的代码相同)。我建议你学习如何在nodejs中制作一个简单的crud应用程序。谷歌一下就知道了

同样，现在想想，Angular方面的事情也会有点复杂。因为你正在创建一些东西(在这个例子中是一个email对象)，你需要在angularjs中调用POST(google http verbs)来将email对象发送给我们的nodejs函数。Angular提供了$http来帮助解决这个问题。ngResource也是你可以使用的另一个补充模块，但我可能会坚持学习$http。

还有几件事。我知道这是你的第一个帖子，所以我可以理解为什么你的帖子可能会这样写，但只是为了将来，这里有一些东西可以让你的帖子更有行动:

保持你的描述简短并切中要害，包括标题。我不太可能回答你的问题，如果它不必要的冗长，我想尽快开始解决问题。
分享一个编写好的代码示例。有几个网站(jsfiddle, plunkr, codepen)允许你"代码涂鸦"，正如我所说的。他们有html面板，css面板和js面板。这使得编写足够的代码来获得一个工作示例并共享到它的链接变得非常容易。这样，任何其他想要帮助解决问题的开发人员都已经有了一些可以开始使用的代码。让你更容易回答你的问题，你甚至可以在你创造问题的时候自己发现问题所在。(我已经不止一次这样做了)
接受的答案。如果答案是正确的，那么在答案旁边的绿色小勾上标记为接受。这让其他人知道答案对你有效，这样他们就会更有信心去尝试，这也会奖励回答者。

除此之外，只要不断学习，努力付出至少和索取一样多。好运！

你的语法有几个问题。

1)定义对象的正确方法如下:http://www.w3schools.com/js/js_objects.asp

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

2)访问控制器用户$scope中的scope值。值不是{{Value}}

var mailOptions = {
   from: 'email@email.com',
   to: $scope.inputTo,
   subject: $scope.inputSubject,
   text: $scope.inputMessage
}

还有其他语法问题，你在html中使用name=而不是ng-model=。

我建议您查看文档和示例，您正在尝试做什么，并首先获得语法正确。

将代码分成小部分并在使用chrome的调试工具时测试每个部分，以便您可以看到每个部分的工作并移动到下一个部分。

试试w3schools的一两个教程来帮助你学习:http://www.w3schools.com/angular/angular_forms.asp

祝你好运!

相关内容

最新更新

热门标签：