Express Routing HTML5 Style CatchAll Conundrum no HASHBangs - Angular JS, Yeoman答案

【问题标题】：Express Routing HTML5 Style CatchAll Conundrum no HASHBangs - Angular JS, YeomanExpress Routing HTML5 Style CatchAll Conundrum no HASHBangs - Angular JS, Yeoman
【发布时间】：2013-07-04 12:08:19
【问题描述】：

您好，我正处于一个新项目的初始阶段。

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

使用 express 用 node.js 编写的后端。我不想在服务器上创建任何 html，所有这些都静态地提供给客户端，然后通过以 express 编写的 RESTful 服务访问，其中 angular js 应用程序的魔力将创建动态内容。该应用程序将是一页的。作为它的一页，需要有一个包罗万象的视图规则。

目前我的典型结构是：

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

我发现大多数人渲染 html 服务器端，然后使用 angular 或任何框架来提供更多内容。人们通常在服务器上使用玉模板来提供内容，我认为没有必要这样做，因为所有内容都将是非常动态的。

Yeoman 的工作流程如此简单而强大，我不想打扰这一点。由于许多原因，当您添加新路由时，yeoman 会将 js 引用添加到 index.html 的底部，由于模板是一种不同的语法，因此我不能为此使用 yeoman。

我也喜欢这种架构中的关注点分离。 express 安装主要以 RESTful 服务为主，无法控制显示，然后 /public 文件夹服务于使用 express.static(PATH) 提供的显示。

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

我的问题是全部路由。我发现的问题是有效地重定向不在 /api 资源 url 下的所有流量。虽然不会中断被 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('/');
};

【问题讨论】：

标签： node.js angularjs express gruntjs yeoman

【解决方案1】：

将您的 API 路由（获取、发布、删除等）放在捕获之前。无需重定向。

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

没有别的了。

【讨论】：

您好我试过了，它原则上适用于 index.html 但不适用于公用文件夹中的其他文件。
您需要检查他们要求的文件是否存在于公用文件夹中。 app.use(express.static(__dirname + '/client/public'));

【解决方案2】：

通过将静态路由和其他预定义路由放在下面的总括代码之前，这将起作用。

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

但是请注意，如果您使用静态路由，例如映射到 / 的 /public/ 文件夹，则需要在 HTML 中使用 absolute 引用（即“/css/styles .css”而不是“css/styles.css”）。如果您使用相对 URL（不带 /），那么引用将基于 URI，并且由于未定义该相对 URL 而落入笼统的范围内。

【讨论】：