Angularjs Express.Js redirect Issue with angular Ajax call

Question

I have a $http pst ajax call from angular js to Express.js api. In Express.js part I ma using async module of node to have some serial execution of code. When no issues I want to redirect to a specific page. Since I am making a ajax call from angular if I use res.render('url') this is not redirecting the page instead its alerting me on angularjs. BTW I have a $routeProvider on angular also :). That is to load partial template after redirect

Code of angular AJAX POST CALL

app.controller('MainCtrl',function($scope,$http){
    $scope.loginForm=function(){
        alert($scope.username);
        $http.post('/login',{'name': $scope.username}).
        success(function(data) {
            alert(data);
        }).
        error(function(data) {
             alert(data);
        });
    }
});

Node.js(Express.js) api to validate and make a redirect

app.post('/login',function(req,res){

var name= req.body.name;
//var password= req.body.password;
async.series([
    function (callback){
        var query= client.query('select count(*) as lgResult from Login where Email='+'"'+req.body.name+'"',function(err,result,field){
            if(err) return callback(err);
            if(result[0]['lgResult'] === 0){
                res.send('passwordWrong');
            }
            if(result[0]['lgResult'] === 1){
                callback(null, 'one');
            }

        });

    },
    function (callback){
        var query= client.query('select count(*) as lgResult from Login where Email='+'"'+req.body.name+'"',function(err,result,field){
            if(err) return callback(err);
            if(result[0]['lgResult'] === 0){
                res.send('passwordWrongSecondtime');
            }
            if(result[0]['lgResult'] === 1){
                 callback(null, 'two');
            }
        });
    }],
    function (err,results){
        if(err) {
            console.log(err);
            res.send('Something Broke sorry');
        }
        else{
            res.render('employelogin/employlogin');
        }
    });

});

Angular Routing :)

app.config(function($routeProvider, $controllerProvider,$compileProvider){
 app.registerCtrl = $controllerProvider.register;
  app.compileProvider    = $compileProvider.directive;
        $routeProvider
        .when('/employeeTimeSheet',{
            controller:'MainCtrl',
            templateUrl:'employeeTimeSheet.html'
        })
        .when('/employeeLogin',{
            templateUrl:'employeeDashboard.html'
        })
        .otherwise({redirectTo:'/employeeLogin'});

});

What is my mistake here

I am not getting error, instead of redirecting I am getting a alert on my angular js side in success. — Madhu
– Madhu, Commented Mar 3, 2014 at 11:33
@EliranMalka Atlast found a way for this to work, not sure if its the best way res.contentType('application/html'); var data = 'emplogin/empr/:'+results; res.header('Content-Length', data.length); res.end(data); And on the Angularjs Side we can use $windows.location=data; — Madhu
– Madhu, Commented Mar 3, 2014 at 13:53

Eugene Kostrikov · Accepted Answer · 2014-03-03 11:33:34Z

1

Just do not try to handle everything within one HTTP request.

In Express app use res.send(200, 'ok'); (or something similar) instead of res.render(); This makes Angular run .success() callback.
res.send('Something broke') will trigger Angular's success callback as it sends 200 HTTP code by default, so add error status code to the response. e.g. res.send(500, 'Something broke'); In that case Angular will run .error callback.
In Angular success callback redirect to desired page and let Angular decide which view to request from the server. (hint: $location service is very helpful here http://docs.angularjs.org/guide/dev_guide.services.$location)

In your success callback use

$location.path('/employeeTimeSheet');

This will handle redirect. And don't forget to inject $location service to the controller.

answered Mar 3, 2014 at 11:33

Eugene Kostrikov

7,1296 gold badges26 silver badges25 bronze badges

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

6 Comments

Madhu Over a year ago

Your Idea works! But there is something else that I want...I want the whole page to be redirected to a different page, and express has some results coming in I will have to print them on the page. Say a new employee dashboard page is where I have to redirect to. There is a new template design which I have to show :)

Eugene Kostrikov Over a year ago

May be res.redirect('/path/to/new/page'); will do the job? This will redirect your entire app to a new location: app.com will be app.com/path/to/new/page after that.

Madhu Over a year ago

With res.redirect this is what I get on console 302 Moved Temporarily 31ms

Eugene Kostrikov Over a year ago

Yep, this is what express sends with response. Now your browser should follow redirect and change path.

Madhu Over a year ago

I am getting response on angularjs...a alert on success is coming on angularjs side and redirect is not happening :)

|

Collectives™ on Stack Overflow

Angularjs Express.Js redirect Issue with angular Ajax call

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related