CODEWITHSUNDEEP
javascriptangularjs
Nicolas
Nicolas

Reputation: 4756

Clean way of posting form data with Angular?

I was wondering, what's the clean way of posting form data with angular?

I have this form setup

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

and I'm posting this to a node.js backend "api".

How do I do this correctly? Do I write every api request in 1 core file? Do I make separate files for each page?

And then how I do I write a clean request?

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

        })
        .error(function(data) {

        });
};

I want to process 'lastname', 'firstname' and 'email' to add a new contact, but online I can't find a good, clean way to write this.

Here's my model in case it helps:

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

Here's the code I used in the end.

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

Upvotes: 0

Views: 180

Answers (2)

Danilo Velasquez
Danilo Velasquez

Reputation: 501

In the form tag add the attribute ng-submit to trigger directly in angular the post function.

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

Add an empty user object in the controller:

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

Let the $http service handle the call:

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

Upvotes: 1

Tim Aagaard
Tim Aagaard

Reputation: 538

How you structure your project is up to you. You could do it all in one file (but that's not very scalable), You could do one in each file (I wouldn't recommend it), or you could group them into semantic files like user_routes.js, social_media_routes.js, etc.

You are on the right track using $http.post() You'll want to create a JSON using your bound variables. You haven't included your entire controller so it's hard to tell you what to do. But a better way of doing this would probably just to create a JSON with empty values like this:

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

and then use something like ng-model="contact.firstname" for your data-binding. This will let you simply send $scope.contact to the back-end route.

The back-end route in Express would look something like:

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

This will send back what it receives - That should be enough to get you started - Handling POST requests in Express will depend on what version of Express you are using.

Upvotes: 1

Related Questions