Javascript 使用角形工具发布表单数据的干净方式？

我想知道，用angular发布表单数据的干净方法是什么

我有这个表单设置

<div id="contact-form" class="row">
    <div class="col-sm-4 col-sm-offset-4 text-center">
        <form>
            <div class="form-group">
                <input type="text" class="form-control input-lg text-center" placeholder="Firstname" name="firstname" ng-model="firstname">
            </div>

            <div class="form-group">
                <input type="text" class="form-control input-lg text-center" placeholder="Lastname" name="lastname" ng-model="lastname">
            </div>

            <div class="form-group">
                <input type="email" class="form-control input-lg text-center" placeholder="Email" name="email"ng-model="email">
            </div>
            <!-- Submit Contact -->
            <button type="submit" class="btn btn-primary btn-lg" ng-click="createContact()">Add</button>
        </form>
    </div>
</div>

我想处理“lastname”、“firstname”和“email”来添加新联系人，但在网上我找不到一个好的、干净的方法来写这个

以下是我的模型，以防有所帮助：

var mongoose = require('mongoose');

var ContactSchema = new mongoose.Schema({
  firstname: { type: String, require: true },
  lastname: { type: String, require: true },
  email: { type: String, require: true }
});

module.exports=mongoose.model（'Contact'，ContactSchema）

---

这是我最后使用的代码

$scope.createContact = function(contact) {

    $scope.contact = { firstname: $scope.firstname, lastname: $scope.lastname, email: $scope.email };

    $http.post('/contacts', $scope.contact)
        .success(function(data) {
            $scope.contact = {firstname:'',lastname: '', email:''}; // clear the form so our user is ready to enter another
            $scope.contacts = data;
            console.log(data);
        })
        .error(function(data) {
            console.log('Error: ' + data);
        });
};

---

你如何组织你的项目取决于你。您可以在一个文件中完成所有操作（但这不是很容易扩展），也可以在每个文件中完成一个操作（我不推荐这样做），或者您可以将它们分组到语义文件中，如user_routes.js、social_media_routes.js等

您使用

$http.post（）

的方法是正确的，您需要使用绑定变量创建JSON。你还没有包括你的整个控制器，所以很难告诉你该怎么做。但更好的方法可能是创建一个JSON，其中包含如下空值：

$scope.contact = {
    firstname: '',
    lastname: '',
    email: '',
}

然后使用类似于

ng model=“contact.firstname”

的方法进行数据绑定。这将使您只需将$scope.contact发送到后端路由

Express中的后端路线类似于：

var express = require('express');
var app = express();
app.post('/contacts', function (req, res) {
    res.status(200).send(req)
}

---

这将发送回它收到的内容—这应该足以让您开始—在Express中处理POST请求将取决于您使用的Express版本。

如何构建项目取决于您自己。您可以在一个文件中完成所有操作（但这不是很容易扩展），也可以在每个文件中完成一个操作（我不推荐这样做），或者您可以将它们分组到语义文件中，如user_routes.js、social_media_routes.js等

您使用

$http.post（）

的方法是正确的，您需要使用绑定变量创建JSON。你还没有包括你的整个控制器，所以很难告诉你该怎么做。但更好的方法可能是创建一个JSON，其中包含如下空值：

$scope.contact = {
    firstname: '',
    lastname: '',
    email: '',
}

然后使用类似于

ng model=“contact.firstname”

的方法进行数据绑定。这将使您只需将$scope.contact发送到后端路由

Express中的后端路线类似于：

var express = require('express');
var app = express();
app.post('/contacts', function (req, res) {
    res.status(200).send(req)
}

---

这将发送回它接收到的内容—这应该足以让您开始—在Express中处理POST请求将取决于您使用的Express版本。

在表单标记中添加属性ng submit以直接在POST函数中触发

<div id="contact-form" class="row">
<div class="col-sm-4 col-sm-offset-4 text-center">
    <form ng-submit="createContact(user)">
        <div class="form-group">
            <input type="text" class="form-control input-lg text-center" placeholder="Firstname" name="firstname" ng-model="user.firstname">
        </div>

        <div class="form-group">
            <input type="text" class="form-control input-lg text-center" placeholder="Lastname" name="lastname" ng-model="user.lastname">
        </div>

        <div class="form-group">
            <input type="email" class="form-control input-lg text-center" placeholder="Email" name="email"ng-model="user.email">
        </div>
        <!-- Submit Contact -->
        <button type="submit" class="btn btn-primary btn-lg">Add</button>
    </form>
</div>

让$http服务处理该调用：

$scope.createContact = function(user) {
$http.post('/contacts', user)
    .then(function(data) {
        //in data.data is the result of the call
    },function(error) {
        //here is the error if your call dont succeed
    });};

---

在表单标记中，添加属性ng submit，以便在post函数中直接触发

<div id="contact-form" class="row">
<div class="col-sm-4 col-sm-offset-4 text-center">
    <form ng-submit="createContact(user)">
        <div class="form-group">
            <input type="text" class="form-control input-lg text-center" placeholder="Firstname" name="firstname" ng-model="user.firstname">
        </div>

        <div class="form-group">
            <input type="text" class="form-control input-lg text-center" placeholder="Lastname" name="lastname" ng-model="user.lastname">
        </div>

        <div class="form-group">
            <input type="email" class="form-control input-lg text-center" placeholder="Email" name="email"ng-model="user.email">
        </div>
        <!-- Submit Contact -->
        <button type="submit" class="btn btn-primary btn-lg">Add</button>
    </form>
</div>

让$http服务处理该调用：

$scope.createContact = function(user) {
$http.post('/contacts', user)
    .then(function(data) {
        //in data.data is the result of the call
    },function(error) {
        //here is the error if your call dont succeed
    });};

---

您的标题有

angular2

，但标签是

angularjs

，您使用的

$scope

和

$http

都是angular1X。我更新了你的标题并删除了

2

。你的标题有

angular2

，但是标签是

angularjs

，你使用的

$scope

和

$http

都是angular1X。我更新了你的标题并删除了

2

.hmm，在这种情况下，我必须使用angular作为前端，并在node.js中创建一个restfull api作为后端-end@Nicolas我已经更新了我的答案，我相信你正在尝试achieve@Nicolas在快速方面，您可能必须使用

bodyParser（）

。从角度来看，在发送ithmm之前，您可能必须

JSON.stringify（）

您的数据，在这种情况下，我必须使用angular作为前端，并在node.js中创建一个restfull api作为后端-end@Nicolas我已经更新了我的答案，我相信你正在尝试achieve@Nicolas在快速方面，您可能必须使用

bodyParser（）

。从角度来看，在发送数据之前，您可能必须

JSON.stringify（）

您的数据感谢您的帮助，我用这个来解决这个问题！谢谢你的帮助，我用这个解决了这个问题！