Angular - UI 路由路由 - HTML5 模式答案

【问题标题】：Angular - UI Router Routes - HTML5 ModeAngular - UI 路由路由 - HTML5 模式
【发布时间】：2014-11-03 12:39:41
【问题描述】：

我正在尝试将 HTML5 推送状态链接与我的 Angular 应用程序一起使用。我所拥有的是类似于以下的一系列路线

$stateProvider.state('product', {
    url: '/product/:productCode',
    templateUrl: 'product/product.html',
    controller: 'ProductCtrl'
    }
});

这在我导航到 [host]/#/product/ABC123 时有效 - 它在浏览器中将 url 显示为 /product/ABC123，然后当我开始点击其他路线时（使用 ui-sref）一切正常正如预期的那样。

但是 - 我希望能够刷新浏览器并保持相同的状态，以及能够复制和粘贴该链接并路由到正确的状态。

例如。如果我到达 [host]/product/ABC123 - 我想显示来自 #/product/ABC123 路线的内容。目前，这会给我一个未找到。

我使用 nginx 作为我的应用服务器。我相信我必须在那个级别添加一些东西来处理它，但我不确定从哪里开始。

【问题讨论】：

【解决方案1】：

您的问题是您的服务器不知道如何响应/product/ABC123。

我目前正在将 node.js 用于我的 Angular 后端，为了解决这个问题，我为所有路由返回了 angular 应用程序，而不仅仅是通常的根路由。

所以你过去可能用过这样的东西：

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

这将只为根路由返回 Angular 应用程序。现在我使用类似的东西：

app.get('*', ...);

这将返回所有路线的角度应用程序。

我应该提到，这可以作为所有放置在其他路由（例如静态文件）之后的捕获。另一种选择是专门为 Angular 应用标记您想要的所有路线，例如：

app.get('/', ...); app.get('/product/:productId', ...); etc

【讨论】：