Question

嗨，我正处于新项目的最初阶段。

我将使用yeomans现代工作流工具进行前端，角度js工作。

使用express在node.js中编写的后端。我不想在服务器上创建任何html，它只是静态地提供给客户端，然后通过快速编写的RESTful服务访问，其中angular js应用程序的魔力将创建动态内容。该应用程序将是一页。作为一个页面，需要有一个针对视图的捕获规则。

目前我的典型结构是：

app.js
public < dir containing the static html, js, css etc.
 index.html
 scripts
 styles
 views

我发现大多数人渲染html服务器端，然后有角度或任何框架来提供更多内容。人们通常在服务器上使用jade模板来提供内容，我认为不需要这样，因为所有内容都会非常动态。

Yeoman的工作流程非常简单和强大，我不想打扰这个。由于许多原因，当你添加一个新的路由时，yeoman将js引用添加到index.html的底部，由于模板是一个不同的语法，我不能使用yeoman。

我也喜欢这个架构中关注点的分离。快速安装主要关注RESTful服务，无法控制演示文稿，然后/ public文件夹提供使用express.static（PATH）提供的演示文稿。

我可以愉快地使用hashbangs进行路由，但对于html5 pushstate来说并不是那么简单。

我的问题是关于catch all的路由。我发现的麻烦是有效地重定向不在/ api资源网址下的所有流量。虽然没有打断用index.html替换的资产。

app.get(url('/person/lesson/:id'), api.getLesson);

app.all('*', routes.index);

我试过了：

routes.index = function(req,res){
res.sendfile('./public/dist/index.html');
};

routes.index = function(req,res){
res.redirect('/');
};

Answer 1

通过在下面的catchall代码之前放置静态路由和其他预定义路由，这将有效。

{{1}}

但请注意，如果您使用静态路由，例如映射到/的/ public /文件夹，则需要使用绝对引用在您的HTML中引用这些路由（即＆＃34; / css / styles.css＆＃34; not＆＃34; css / styles.css＆＃34;）。如果你使用相对URL（没有/），那么引用将基于URI并且由于没有定义相对URL而进入catchall。

Answer 2

将您的API路线（获取，发布，删除等）放在捕获之前。没有必要重定向。

app.get('*', function(req, res){
  res.sendfile('public/index.html');
});

没有别的了。

Express Routing HTML5 Style CatchAll Conundrum no HASHBangs - Angular JS，Yeoman

2 个答案: