使用 Node.js 和 Angular 重定向答案

【问题标题】：Redirect with Node.js and angular使用 Node.js 和 Angular 重定向
【发布时间】：2016-01-01 19:11:33
【问题描述】：

我在尝试使用 Node.js、Express 和 Angular 重定向 POST 请求时遇到问题。我知道有一种使用表单的标准方法如下：

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 + '/');
});

此方法自动将页面重定向到“测试”路由，因为它使用表单来处理发布请求。

但是，当我使用角度方法时，页面不会自动重定向。我该怎么做？

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');
  }
}]);

【问题讨论】：

标签： javascript angularjs node.js redirect express

【解决方案1】：

尝试在 Angular 中保持重定向，因为 Angular 旨在将客户端保留在其自己的模块中。就像我在评论中所说，您可以从服务器发送一个状态代码，指示客户端进行重定向。

例如，将您的快速端点更改为类似

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

你的 Angular 控制器类似于

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; 
    });
  }
}]);

这样您就可以在服务器端代码中指定重定向地址。

编辑：此外，我认为您需要一个主题标签来进行角度重定向，除非您启用了 HTML5 模式。

【讨论】：

我一直在个人项目中使用 res.redirect，但由于我的浏览器只是在控制台中接收 HTML，我感到很沮丧——这非常有用并且完全有意义——感谢您提供清晰而出色的示例——我刚刚添加了一个 if 检查，即if (data.redirect) { /* window location href change here */ }，并且工作完美！谢谢！

【解决方案2】：

node.js 服务器创建的路由是实际路由，而 AngularJS 路由基于哈希 (#) 标签，例如 -

node.js 中的路由 -

app.get('/myroute') 就像 - http://localhost:8000/myroute

AngularJS 中的路由 -

'/myangroute' 就像 - http://localhost:8000/#/myangroute

所以回到你的问题，$http.post('/redirect'); 不是重定向你，而是将数据发布到'/redirect' 路由（在服务器端定义）。对于重定向，请使用 angularjs $location 服务。

【讨论】：

谢谢 Nesh，你能举个简单的例子来说明我如何将它用于上面的代码吗？
我通常更喜欢发送状态代码，然后在 AngularJS 中执行操作，而不是在 res.redirect('/test') 中进行实际重定向
我同意内什的观点。 Angular 旨在作为客户端在其自己的模块中单独工作，因此从 Angular 内部处理重定向。将 express 端点改为返回状态码并使用类似$window.location.href = value 的内容从 $http.post 函数的成功回调内部重定向。
对。我以前这样做过，但不喜欢为重定向编写太多客户端代码。我喜欢使用表单不需要客户端代码进行重定向，所以我想这就是我主要寻找的。您可以在服务器端编写简单的代码来重定向请求。但看起来标准做法是在客户端重定向。谢谢大家的帮助！
@slim1801 实际上 AngularJS 的主要目的是做 SPA，所以如果你重新加载内容并进行整个页面加载..它不会达到使用 AngularJS 的目的