Redirection with Node.js and angular

I'm having trouble trying to redirect POST requests using Node.js, Express and angular. I know that there is a standard way to use 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 the form to process the submit request.

However, using the angular method, the page is not redirected automatically. How can I do it?

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'); } }]); 
+5
source share
2 answers

Try saving the redirection from Angular, since Angular must remain client-side in its own module. As I said in a comment, you can send a status code from the server, indicating that the client is redirecting.

For example, change your express point to something like

 app.post('/redirect', function(req, res){ res.status(300).send({ redirect:"/test"}); }); 

And your Angular controller on 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 forwarding address inside the server code.

Edit: Also, I think you will need a hashtag for your redirection in Angular, unless you have enabled HTML5 mode.

+5
source

The routes created by the node.js server are actual routes, while AngularJS routing is based on hash tags (#), for example -

Routes in node.js -

app.get ('/ myroute') will look like http: // localhost: 8000 / myroute

Routes in AngularJS -

'/ myangroute' will look like http: // localhost: 8000 / # / myangroute

So, back to your question, $http.post('/redirect'); does not redirect you, but sends data to the '/redirect' route (defined on the server). To redirect, use the angularjs $location .

+2
source

Source: https://habr.com/ru/post/1232939/


All Articles