Angular - UI路由器路由 - HTML5模式 [英] Angular - UI Router Routes - HTML5 Mode

问题描述

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

I'm trying to use HTML5 push state links with my Angular app. What I have is a series of routes similar to the following

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

当我导航到[host] /＃/ product / ABC123时它会起作用 - 它会显示网址浏览器为/ product / ABC123，然后当我开始点击我的其他路线（使用ui-sref）时，一切都按预期工作。

This works when I navigate to [host]/#/product/ABC123 - It displays the url in the browser as /product/ABC123, then when I start clicking through to my other routes (using ui-sref) everything works as expected.

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

However - I'd like the ability to both refresh the browser, and remain in the same state, as well as be able to copy and paste that link and route to the right state.

例如。如果我到[主持人] /产品/ ABC123 - 我想显示＃/ product / ABC123路线的内容。目前，这将给我一个未找到。

eg. If I got to [host]/product/ABC123 - I want to display the content from the #/product/ABC123 route. Currently, this will give me a not found.

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

I'm using nginx as my app server. I believe I'll have to add something to handle it at that level, but I'm not sure where to start.

推荐答案

您遇到的问题是您的服务器不知道如何回复 / product / ABC123 。

The issue you have is that your server does not know how to respond to /product/ABC123.

我目前正在使用node.js作为我的后端和angular，为了解决这个问题，我返回所有的角度应用程序路由，例如，不仅仅是通常的根路由。

I am currently using node.js for my backend with angular, and to solve this I return the angular app for all routes, not just the usual root route for example.

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

So you might have used something like this in the past:

app.get（'/'，...）;

哪个会已经返回角度应用程序只是为根路径。现在我使用类似的东西：

Which would have returned the angular app just for the root route. Now I use something like:

app.get（'*'，...）;

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

Which will return the angular app for all routes.

我应该已经提到过，这可以作为一个捕获所有放在其他路径之后，例如静态文件。另一种方法是标记你想要专门用于角度应用的所有路线，例如：

I should have mentioned that this can act as a catch all placed after other routes such as for static files. Another alternative is to mark all the routes you want specifically for the angular app, eg:

app.get（'/'，... ）; app.get（'/ product /：productId'，...）;等等

这篇关于Angular - UI路由器路由 - HTML5模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！