Express + Angular 路由导致无限循环 + 崩溃答案

【问题标题】：Express + Angular routing causing infinite loop + crashExpress + Angular 路由导致无限循环 + 崩溃
【发布时间】：2013-09-04 10:03:48
【问题描述】：

我正在使用 Express 和 Angular 开发 Node 应用程序。我正在使用 Angular 进行路由，并且我的路由设置如下：

app.config(['$routeProvider', function ($routeProvider) {
$routeProvider.when('/', {
    templateUrl: '/partials/main'
    //controller: 'IndexController'
}).when('/discover', {
    templateUrl: '/partials/discover'
}).when('/user/home', {  //HERES THE PROBLEM CHILD!!!!!
    templateUrl: '/partials/user/home'
}).otherwise({
    redirectTo: '/'
});
}]).config(['$locationProvider', function ($locationProvider) {
    $locationProvider.html5Mode(true);
}]);

现在，每当我尝试调用 /user/home 时——页面进入无限循环并不断重新加载控制器。我可以在节点控制台中看到该页面是从partials/user/home 调用的，其中肯定包含一个 Jade 文件。我检查了其他帖子，其中大部分都在部分路径的开头用/ 解决了，这在这里没有帮助。如果我将home.jade 转移到没有子目录的/partials 目录中，则页面加载正常。有什么想法吗？

更新：似乎每当我尝试在部分的任何子目录中加载部分时都会发生无限循环。

每个请求：

节点——App.js：

app.get('/', routes.index);

app.get('/partials/:name', routes.partials);
app.get('*', routes.index);

还有路由/index.js

exports.index = function(req, res) {
res.render('index', { title: 'Open Innovation Station' });
}

exports.partials = function(req, res) {
res.render('partials/' + req.params.name);
}

【问题讨论】：

你能添加你的节点配置吗？

标签： node.js angularjs express

【解决方案1】：

使用html5Mode(true)，您将不得不关注您用于部分的任何相对路径。我相信，你的情况下的递归可以通过添加来解决：

<base href="/"></base>

致您的<head>。

【讨论】：

确实做到了；谢谢你。我犯了一个愚蠢的错误，因为没有相对路径然后想知道为什么事情包括无限。
我无法相信 html5Mode 会更改前面带有斜杠的 templateUrl。本来希望这是一条绝对路径。特别是因为文档是这样说的。

【解决方案2】：

您为 partials 指定的路由规则将不匹配对 partials 文件夹中子目录的任何请求，例如/partials/文件夹/文件。路由路径匹配器将/ 视为变量之间的分隔符。因此，为了支持在您的 partials 目录中有子文件夹，您必须向您的应用程序添加另一个规则并定义一个函数来处理呈现此模板。如下所示：

app.js

app.get('/partials/:directory/:file', routes.subpartials);

路由/index.js

exports.subpartials = function (req, res) {
  var file = req.params.file,
      directory = req.params.directory;
  res.render('partials/' + directory + '/' + file);
};

【讨论】：

感谢您的回复。我晚上离开我的机器，但会在上午尝试。
最好在部分路由（'/partials/*'）中使用 catch all *，然后使用 req.params[0] 获取请求的文件。如果文件目录相同，则只需渲染参数即可。
很棒的解决方案。刚刚进入 Angular 路由，最近正在使用 Express 来处理所有事情。这个子目录让我有点不知所措。我之前尝试过这样的事情，app.get('/partials/user/:file'，但我一定错过了一些东西。再次感谢！
为了让所有部分都可以很好地与嵌套部分一起工作，而无需任何显式引用嵌套目录，我将这样做 app.get('/partials/*', routes.subpartials); 并在 subpartials 函数中以 res.render('partials/' + req.params); 的方式呈现。