Angular POST request not working

Question

I've setup a signup and login system using passport.js. And Im using Angular.js in the front-end. But when I use angular it does not signup my users. Without angular it works well. See code below:

Without Angular Code (It works):

<form action="/signup" method="post">
    <div class="form-group">
        <label>Email</label>
        <input type="text" class="form-control" name="email">
    </div>
    <div class="form-group">
        <label>Password</label>
        <input type="password" class="form-control" name="password">
    </div>

    <button type="submit" class="btn btn-warning btn-lg">Signup</button>
</form>

With Angular Code (Does Not Work):

<!doctype html>
<html ng-app="login">

<head>
<title>Node Authentication</title>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.5/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular-aria.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-material/1.0.4/angular-material.js"></script>

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<!-- load bootstrap css -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.min.css">
<!-- load fontawesome -->
<script src="./javascripts/controllers/signup.js"></script>
<style>
    body {
        padding-top: 80px;
    }
</style>
</head>

<body ng-controller="loginCtrl">
<div class="container">

    <div class="col-sm-6 col-sm-offset-3">

        <h1><span class="fa fa-sign-in"></span> Signup</h1>

        <!-- show any messages that come back with authentication -->
        <% if (message.length> 0) { %>
            <div class="alert alert-danger">
                <%=m essage %>
            </div>
            <% } %>

                <!-- LOGIN FORM -->
                <form>
                    <div class="form-group">
                        <label>Email</label>
                        <input type="text" class="form-control" ng-model="user.email">
                    </div>
                    <div class="form-group">
                        <label>Password</label>
                        <input type="password" class="form-control" ng-model="user.password">
                    </div>

                    <button ng-click="signup()" class="btn btn-warning btn-lg">Signup</button>
                </form>

                <hr>

                <p>Already have an account? <a href="/login">Login</a>
                </p>
                <p>Or go <a href="/">home</a>.</p>

    </div>

</div>

Angular Controller Code:

var login = angular.module('login', [])

login.controller('loginCtrl', function($scope,$http){

$scope.user = {};

$scope.signup = function(){

   return $http.post('/signup',$scope.user)
   .then(function(data) {
   console.log("da" + data);
 });
 };

})

The Signup Route:

    // process the signup form
app.post('/signup', passport.authenticate('local-signup', {
    successRedirect : '/profile', // redirect to the secure profile section
    failureRedirect : '/signup', // redirect back to the signup page if there is an error
    failureFlash : true // allow flash messages
}));

Note:

In the backend I've setup a Node/Express.js API. On successful signup it uses passport.js to add the user into MongoDB and also redirects user to the profile page.

BUT currently the data is going into the database (I can see the new user in the db) its not redirecting the user to the profile page nor is it showing any error messages that I send back (i.e if a user already exists)

Soviut · Answer 1 · 2016-12-10T09:43:25.863

0

An AJAX request will not redirect the browser. If you want to redirect to a new page, you need to tell the angular router to do so after a successful response from your API. If you're not using Angular router, just use window.location to redirect.

return $http.post('/signup',$scope.user)
    .then(function(data) {
        console.log("da" + data);
        window.location.href = '/profile';
    });

Your /signup is an endpoint on what is essentially an API. Calling to it will redirect, in a fashion, but it will only do so in terms of the response. So your Angular app will receive a response from the redirection, but it won't redirect the browser itself. If you were to post directly to that URL from the browser, it would redirect, but any HTTP routing done via an AJAX call does not affect the browser directly.

edited Dec 10 '16 at 09:43

answered Dec 10 '16 at 09:27

Soviut

88,194
49
192
260

thank you for the answer. Can you please provide an example? also why does it redirect it successfully when I don't use angular? – Skywalker Dec 10 '16 at 09:29
I've updated my answer to explain the difference between ajax calls and direct browser calls. – Soviut Dec 10 '16 at 09:30
thank you so much for the explanation. Any chance you can provide a code example of how to redirect in angular? – Skywalker Dec 10 '16 at 09:33
@Skywalker you've provided not context, I don't know if you're using angular router or some other mechanism to do routing. – Soviut Dec 10 '16 at 09:35
apologies I'm new to this. Im not using angular router, all my angular code is in the question. – Skywalker Dec 10 '16 at 09:39
Then just use window.location changes to redirect, like regular vanilla javascript. – Soviut Dec 10 '16 at 09:42

score 0 · Answer 2 · edited May 23 '17 at 11:45

0

Use $routeProvider or $stateProvider which is the part of the UI-router.

Define .config. Inside config define routing configuration by using $routeProvider or $stateProvider.

Following links might help.

Route configuration using $routeProvider

Route configuration using $stateProvider

edited May 23 '17 at 11:45

Community

1
1

answered Dec 10 '16 at 10:55

Ramesh Papaganti

7,311
3
31
36

score 0 · Answer 3 · answered May 15 '18 at 07:14

0

of course, the agnularJs application is responsible for redirecting, you should use $location.path("/profile") to redirect the user after login process

answered May 15 '18 at 07:14

Mhd Wael Jazmati

636
9
18

Angular POST request not working

3 Answers3