Sign up ×
Stack Overflow is a community of 4.7 million programmers, just like you, helping each other. Join them, it only takes a minute:

I am trying to request some data from node.js server from my angular.js. The problem is that upon data response i see a blank browser window with my json object printed on it. I want angular.js to recognize the response and stay on page.

HTML form - template that gets loaded with loginController

<section class="small-container">
    <div class="login-form">
        <form action="/login" method="post" ng-submit="processForm()">
            <input ng-model="formData.username" type="text" name="username">
            <input ng-model="formData.password" type="password" name="password">
            <button>login</button>
        </form>
    </div>
</section>

Angular.JS

var app = angular.module("blavor", ['ngRoute']);

app.config(['$routeProvider', '$locationProvider', function($routeProvider, $locationProvider) {
    $routeProvider
        .when("/", {
            templateUrl: "/index",
            controller: "loginController"
        })
        .when("/register", {
            templateUrl: "/register",
            controller: "registerController"
        })
        .otherwise("/");

        $locationProvider.html5Mode(true);
}]);

app.controller('loginController', function($scope, $http) {
    $scope.formData = {};
    $scope.processForm = function() {
        $http({
            method: 'POST',
            url: '/login',
            data: $.param($scope.formData),
            processData: false, 
            responseType: "json",
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).success(function(data) {
                console.log(data);
                if (!data.success) {
                    alert("Noo!");
                } else {
                    alert("YEEEY!");
                }
            });
    };
});

Node.js Server - index.js

var app = require('express')();
var http = require('http').Server(app);
var io = require('socket.io')(http);
var express = require('express');

var bodyParser = require('body-parser');
app.use( bodyParser.json() );
app.use( bodyParser.urlencoded({ extended: false }) );
var routes = require('./routes')(app);
http.listen(3000, function() {
    console.log('listening on *:3000');
});

module.exports.start = start;

Node.js Server - routes

module.exports = function(app) {
app.post('/login', function(request, response) {
console.log(request.body);
    response.setHeader('Content-Type', 'application/json');
    response.end(JSON.stringify({value:"somevalue"}));
});
}

I am using AngularJS v1.2.24 and Node.js v0.10.25

console.log(data) in angular never gets called..

share|improve this question
    
Is a form being submitted? did you call preventDefault on the event? – Gabs00 Sep 11 '14 at 10:38
    
is this express – anish Sep 11 '14 at 10:44
    
Form is being submitted. Server returns request.body or anything else I put in JSON.stringify but Angular.js never gets a chance to see it, because page refreshes and displays only json from response. LIke some kind of redirect happens from node.js part.. – Dusan J. Sep 11 '14 at 10:44
    
@anish Yes it is express – Dusan J. Sep 11 '14 at 10:44
    
@DusanJ. can you post up the form code? Probably would be good to include the relevant route handling code from express for requests to /login – Gabs00 Sep 11 '14 at 10:48

1 Answer 1

up vote 0 down vote accepted

Hi try removing the action and method from your form.

From the ng-submit docs

Enables binding angular expressions to onsubmit events.

Additionally it prevents the default action (which for form means sending the request to the server and reloading the current page), but only if the form does not contain action, data-action, or x-action attributes.

So by adding those, you are causing the page to refresh when the form is submitted.

Without them, angular will call $event.preventDefault() for you, which stops the page from being reloaded.

EDIT: Just to add, you were seeing the correct data from the server because you're responding with preset data, which will always be provided when someone posts to /login.

So your form is currently circumventing angular entirely, and directly getting the data from the server.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.