express route return JSON to Angular form issue

Question

My angular controller for signing up/signing in users is as follows:

angular.module('SignCtrl', []).controller('SignController', function($scope) {

    $scope.formData = {};

    $scope.processForm = function() {
        $scope.submitted = true;

        $http.post('/sign', {
            email: $scope.formData.email,
            password: $scope.formData.password
        }).success(function(res) {
            $scope.response = res;
        });
    };

});

This sends the POST data to the proper route and the controller handles everything properly from there. However, the controller returns res.json({ response: result }); and after the form is submitted it shows only the JSON when I want the JSON to be inserted into the form.

Express route/controller, HTML form:

app.post('/sign', function(req, res) {
    var email = req.body.email;
    var password = req.body.password;

    User.findOne({ email: email }, 'email', function(err, user) {
        if(err) {
            //Error in query
            return false;
        } else if(user) {
            //User found, sign them in if query finds email with matching password provided
            User.findOne({ email: email, password: password }, 'email', function(err, result) {
                if(err)
                    //Error in query
                    return false;
                else if(result)
                    //User found with password provided, sign user in.
                    res.json({ response: 'You have been signed in.' });
                else
                    //Invalid password entered
                    return false;
            });
        } else {
            //Email not found, sign up the user;
            var new_user = new User({
                email: email,
                password: password,
                created: new Date()
            });

            new_user.save(function(err) {
                if(err) 
                    return false;
                else
                    return res.json({ response: 'Your account has been created.' });
            });

            client.cmd('getnewaddress', email, function(err, address) {

            });
        }
    });
});

<form action="/sign" method="post" class="form-inline" role="form">
    <div class="form-group">
        <input type="email" name="email" class="form-control" id="email" placeholder="Your Email">
    </div>
    <div class="form-group">
        <input type="password" name="password" class="form-control" id="password" placeholder="Your Password">
    </div>
    <button type="submit" class="btn btn-primary">Sign Up / Sign in</button>

    {{ response }}
</form>

All of the files are in their respective directories and I'm using the MEAN stack configuration. Why does it reload /sign with only the JSON on the page and how can I fix this?

Answer 1

Angular is doing the POST for you so you do not need to set it on your HTML Form. So remove this action="/sign" method="post", it is making your page to POST the data and therefore to refresh:

<form  class="form-inline" role="form">

Your "submit button" needs to call the angular $http POST method declared in your controller, so it needs to do something like this:

<button type="button" class="btn btn-primary" ng-click="processForm()">Sign Up / Sign in</button>

Additionally you need to inject the $http service in your controller like this:

angular.module('SignCtrl', []).controller('SignController', function($scope, $http) {
...

Moreover $scope.formData = {} will always be empty as you never set it to anything.

If you want to associate this object with your form your need to use ng-model attribute like this:

    <input type="email" name="email" ng-model="formData.email" class="form-control" id="email" placeholder="Your Email">
    <input type="password" name="password" ng-model="formData.password" class="form-control" id="password" placeholder="Your Password">