Angular.js request/response Node.js

Question

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

Is a form being submitted? did you call preventDefault on the event? — Gabs00
– Gabs00, Commented Sep 11, 2014 at 10:38
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.
– Dusan J., Commented Sep 11, 2014 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
– Gabs00, Commented Sep 11, 2014 at 10:48

Community · Accepted Answer · 2020-06-20 09:12:55Z

1

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.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Sep 11, 2014 at 11:12

Gabs00

1,8771 gold badge13 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Angular.js request/response Node.js

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related