javascript - 使用 Angular 发布表单数据的干净方法？

Question

我想知道，用 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>

我将其发布到 Node.js 后端“api”。

我该如何正确地执行此操作？我是否将每个 api 请求写入 1 个核心文件中？我是否为每个页面制作单独的文件？

那么我该如何编写一个干净的请求？

$scope.createContact = function() {
    $http.post('/contacts', ...)
        .success(function(data) {

        })
        .error(function(data) {

        });
};

我想处理“姓氏”、“名字”和“电子邮件”以添加新联系人，但在网上我找不到一种好的、干净的方式来编写此内容。

这是我的模型，以防有帮助:

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('联系人', 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);
        });
};

Answer 1

如何构建项目取决于您。您可以在一个文件中完成所有操作(但这不太可扩展)，您可以在每个文件中执行一个操作(我不推荐这样做)，或者您可以将它们分组到语义文件中，例如 user_routes.js、social_media_routes.js 等.

使用 $http.post() 您走在正确的轨道上，您将需要使用绑定(bind)变量创建 JSON。您还没有包含整个 Controller ，因此很难告诉您该怎么做。但更好的方法可能只是创建一个带有空值的 JSON，如下所示:

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

然后使用类似 ng-model="contact.firstname" 的内容进行数据绑定(bind)。这将让您只需将 $scope.contact 发送到后端路由。

Express 中的后端路由如下所示:

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

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