Menu
I am having trouble trying to redirect POST requests using Node.js, Express and angular. I am aware there is a standard way of using forms as follows:
index.ejs
<!DOCTYPE html>
<html>
<head>
<title>Redirect Example</title>
</head>
<body>
<p>INDEX PAGE</p>
<form action="/redirect" method="post">
<button type="submit">CLICK</button>
</form>
</body>
</html>
test.ejs
<!DOCTYPE html>
<html>
<head>
<title>Redirect Example</title>
</head>
<body>
<p>YAY REDIRECTED</p>
</body>
</html>
app.js
var fs = require('fs');
var https = require('https');
var express = require('express');
var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var app = express();
app.set('view engine', 'ejs');
app.get('/', function(req, res) {
res.render('index');
});
app.post('/redirect', function(req, res){
res.redirect('/test');
});
app.get('/test', function(req, res) {
res.render('test');
});
var port = process.env.PORT || 1337;
app.listen(port, function(){
console.log('http://localhost:' + port + '/');
});
This method automatically redirects the page to the "test" route since it uses a form to handle the post request.
However using when I use an angular approach, the page does not automatically redirect. How would I do this?
index.ejs
<!DOCTYPE html>
<html ng-app="project">
<head>
<title>Redirect Example</title>
<script src="/javascripts/jquery/jquery.js"></script>
<script src="/javascripts/angular/angular.js"></script>
<script src="/javascripts/angular/angular-route.js"></script>
<script src="/javascripts/main.js"></script>
</head>
<body ng-controller="MainController">
<button type="submit" ng-click="submit()">CLICK</button>
</body>
</html>
main.js
var app = angular.module('project', []);
app.controller('MainController', ['$scope', '$http', function ($scope, $http) {
$scope.submit = function() {
$http.post('/redirect');
}
}]);
624
Try keeping the redirection from within Angular, as Angular is meant to stay client-side in its own module. Like I said in a comment, you can send a status code from the server indicating the client to do a redirect.
For example, change your express endpoint to something like
app.post('/redirect', function(req, res){
res.status(300).send({ redirect:"/test"});
});
And your Angular Controller to something like
var app = angular.module('project', []);
app.controller('MainController', ['$scope', '$http', '$window', function ($scope, $http, $window) {
$scope.submit = function() {
$http.post('/redirect').then(function(data, status){
$window.location.href = data.redirect;
});
}
}]);
This way you can specify the redirect address from within server-side code.
Edit: In addition, I think you would need a hashtag for your redirect in angular, unless you have HTML5 mode enabled.
198
Routes created by node.js server are actual routes while AngularJS routing is based on hash (#) tags like -
Routes in node.js -
app.get('/myroute') will be like - http://localhost:8000/myroute
Routes in AngularJS -
'/myangroute' will be like - http://localhost:8000/#/myangroute
So coming back to your question, $http.post('/redirect'); is not redirecting you but posting the data to '/redirect' route(defined at server end). For redirection use angularjs $location service.
26
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
