Question

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

我有这个表单设置

{{ dump(variable) }}

我将它发布到node.js后端“api”。

我该如何正确地做到这一点？我是否在1个核心文件中编写每个api请求？我是否为每个页面制作单独的文件？

然后我该如何写一个干净的请求？

{{ kint(variable) }}

我想处理'姓氏'，'名字'和'电子邮件'来添加新的联系人，但在线我找不到一个好的，干净的方式来写这个。

这是我的模型以防万一：

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

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

这是我最后使用的代码。

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

        })
        .error(function(data) {

        });
};

Answer 1

您如何构建项目取决于您自己。你可以在一个文件中完成所有操作（但是它不是很可扩展），你可以在每个文件中做一个（我不推荐它），或者你可以将它们分组到像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版本。

Answer 2

在表单标签中添加属性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>

在控制器中添加一个空的用户对象：

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

让$ 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
    });};

使用Angular发布表单数据的简洁方法？

2 个答案: