AngularJS + UI-Router - 在没有 HashBang 的情况下以 HTML5 模式手动输入 URL [英] AngularJS + UI-Router - Manually Type URLs in HTML5 Mode without HashBang

问题描述

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

I am currently using AngularJS with UI-Router for state management and express on the back-end.

我目前启用了 hash bang 模式，并且一直在尝试寻找一种解决方案，让您无需在地址栏中手动输入 hash bang 即可键入 URL.

I currently have hash bang mode enabled and have been trying to find a solution that allows you type URL's without the hash bang manually in the address bar.

例如，不要输入:

www.mysite.com/#!/page1

www.mysite.com/#!/page1

我想打字

www.mysite.com/page1

www.mysite.com/page1

我试过启用 html5Mode:

I have tried by enable html5Mode:

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

但是还是不行.通过上述更改，单击任何 URL 将重写并将位置从#!/page1"更改为/page1".这很棒.

But it still doesn't work. With the above change, clicking any URL's will re-write and change location from '#!/page1' to '/page1'. Which is great.

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

However manually entering a URL with '/page1' does not work and gives an invalid path error. If I type it with hash bang included i.e. '#!/page1' then it works and also re-writes the URL as the '/page1' after page load.

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

So what am I doing wrong here?

我的状态如下所示:

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'
        })

推荐答案

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

UPDATE: Your code looks fine to me, i'm going off of experience and think this is a server issue.

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

There are a few ways you can handle this but as far as I know they are only server side.

将 AngularJS html5mode 与 nodeJS 和 Express 结合使用

如何为 HTML5 模式下的 AngularJS 应用程序的 URL 重写配置 IIS?

你不能直接进入路由 - mywebsite.com/page1 的原因是因为 angular 应用程序本身(驻留在 index.html 页面上)需要拦截/引导你到 我的页面.这就是为什么您看到页面本身永远不会重新加载，视图只是在您的应用程序中发生变化.您也可以通过刷新页面来测试这一点.

The reason why you cannot go directly to the route - mywebsite.com/page1 is because the angular app itself (which resides on the index.html page) needs to intercept/direct you to mypage. This is why you see that the page itself is never reloaded, the views are just changing in your app. You can also test this out by refreshing the page too.

您需要在服务器端实现一些东西，它接受您的请求(IE:/page1)并将所有请求路由到 index.html，Angular 将负责其余的工作.

You will need implement something server side, that takes your request (IE: /page1) and route all requests to index.html where Angular will take care of the rest.

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

Additionally: When you use #/page1, you are still requesting your index page, angular recognizes the # and routes accordingly

附加信息

这篇关于AngularJS + UI-Router - 在没有 HashBang 的情况下以 HTML5 模式手动输入 URL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！