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

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

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

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.

我目前启用了哈希爆炸模式,并且一直在尝试找到一种解决方案,允许您在地址栏中手动输入没有哈希爆炸的URL。

So for example instead of typing:

例如,而不是键入:

www.mysite.com/#!/page1

I want to able to type

我想能够输入

www.mysite.com/page1

I have tried by enable html5Mode:

我试过启用html5Mode:

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

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.

但它仍然无效。通过上述更改,单击任何URL将重写并将位置从“#!/ page1”更改为“/ 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.

但是,手动输入带有“/ page1”的URL不起作用,并且会出现无效的路径错误。如果我输入包含哈希爆炸,即'#!/ page1',那么它可以工作,并在页面加载后重写URL作为'/ page1'。

So what am I doing wrong here?

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

My states look like this:

我的州看起来像这样:

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

3 个解决方案

#1

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.

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

using AngularJS html5mode with nodeJS and Express

使用带有nodeJS和Express的AngularJS html5mode

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

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

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.

你不能直接去路线的原因 - mywebsite.com/page1是因为角度应用程序本身(位于index.html页面上)需要拦截/引导你到mypage。这就是为什么你看到页面本身永远不会重新加载,视图只是在你的应用程序中发生变化。您也可以通过刷新页面来测试它。

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.

你需要实现一些服务器端,它接收你的请求(IE:/ page1)并将所有请求路由到index.html,Angular将负责其余的工作。

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

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

Edit: Additional Information

编辑:附加信息

#2

This because /hello is a 404 on the server. I have a catchall at the bottom of my routes:

这是因为/ hello是服务器上的404。我的路线底部有一个笼子:

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

#3

Use a slash at the end of url:/path/

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

Example:

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

#1