AngularJS + UI-Router - 在没有 HashBang 的 HTML5 模式下手动键入 URL答案

【问题标题】：AngularJS + UI-Router - Manually Type URLs in HTML5 Mode without HashBangAngularJS + UI-Router - 在没有 HashBang 的 HTML5 模式下手动键入 URL
【发布时间】：2017-02-28 05:48:22
【问题描述】：

我目前正在使用带有 UI-Router 的 AngularJS 进行状态管理并在后端表达。

我目前启用了 hash bang 模式，并且一直在尝试找到一种解决方案，允许您在地址栏中手动键入 URL 而无需 hash bang。

例如，而不是键入：

www.mysite.com/#!/page1

我希望能够打字

www.mysite.com/page1

我尝试过启用 html5Mode：

$locationProvider.html5Mode(true)
                 .hashPrefix('!');

但它仍然不起作用。通过上述更改，单击任何 URL 将重写并将位置从 '#!/page1' 更改为 '/page1'。太棒了。

但是，使用“/page1”手动输入 URL 不起作用，并且会出现无效路径错误。如果我键入它时包含哈希爆炸，即“#!/page1”，那么它会起作用，并且还会在页面加载后将 URL 重写为“/page1”。

那么我在这里做错了什么？

我的状态如下所示：

state('login', {
            url: '/login',
            templateUrl: 'login.html'
        }).
   state('parent', {
            url: '/hello',
            abstract: true,
            template: '<ui-view/>'
        }).
    state('parent.home', {
            url: '',
            controller: 'SomeCtrl',
            templateUrl: 'page.html'
        }).
        state('parent.file', {
            url: '/bob',
            controller: 'SomeCtrl2',
            templateUrl: 'file.html'
        })

【问题讨论】：

您是否尝试过仅删除前缀？或者，你正在做一些需要它的事情吗？我只有$locationProvider.html5Mode(true);。
是的，我做到了，没有运气，所以它看起来像 livepo 建议的那样，它可能是服务器端的，我要尝试一下。

标签： javascript html angularjs angular-ui-router

【解决方案1】：

更新： 您的代码对我来说看起来不错，我失去了经验，并认为这是服务器问题。

有几种方法可以处理这个问题，但据我所知，它们只是服务器端。

using AngularJS html5mode with nodeJS and Express

How do I configure IIS for URL Rewriting an AngularJS application in HTML5 mode?

您不能直接进入路线的原因 - mywebsite.com/page1 是因为 Angular 应用程序本身（位于 index.html 页面上）需要拦截/引导您到我的页面。这就是为什么您会看到页面本身从未重新加载，视图只是在您的应用程序中发生变化。您也可以通过刷新页面来测试这一点。

您将需要在服务器端实现一些东西，接收您的请求（IE：/page1）并将所有请求路由到 index.html，Angular 将负责其余的工作。

另外：当您使用 #/page1 时，您仍在请求您的索引页面，angular 会识别 # 并相应地路由

编辑：附加信息

【讨论】：

好地方，只是服务器端需要配置。既然你提到了原因，它点击了，我猜忽略了 AngularJS 的整个单页性质，以及执行魔法的代码在哪里。
其实我说得太早了，子状态不起作用，即在我上面的例子中'/parent/child1'不起作用。我变得空白。
控制台有什么东西，还是没有信息？我之前遇到过嵌套路由变为空白的问题，但那是因为我没有指定实际的父路由。（IE 有一个路由 parent.child 但没有指定父路由）。这可能是另一个 SO 问题：/

【解决方案2】：

这是因为/hello 是服务器上的 404。我的路线底部有一个总括：

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

【讨论】：

【解决方案3】：

在url:/path/ 末尾使用斜杠

例子：

state('parent', {
    url: '/hello/',
    abstract: true,
    template: '<ui-view/>'
})

【讨论】：