AngularJS + UI的路由器 - 手动键入HTML5模式的URL没有HashBang [英] AngularJS + UI-Router - Manually Type URLs in HTML5 Mode without HashBang

问题描述

我目前正在使用AngularJS与UI的路由器进行状态管理和前preSS的后端。

我目前已启用哈希爆炸模式，一直试图找到一个解决方案，允许您键入的URL，而无需手动散列砰在地址栏中。

因此​​，例如，而不是键入：

www.mysite.com /＃！/第1页

我希望能够键入

www.mysite.com/page1

我已经启用html5Mode尝试：

  $ locationProvider.html5Mode（真）
                 .hash preFIX（！）;
 

但它仍然无法正常工作。随着上述变化，从点击'＃！/第1页任何URL的将重新写入和改变位置'/第1页。这是伟大的。

不过手动输入以/页1/1'不起作用的URL并给出了一个无效的路径错误。如果我和散列砰键入它即包含'＃！/第1页，那么它的工作原理，并重新写入网址为页面加载后'/第1页。

所以我在做什么错在这里？

我的状态是这样的：

 状态（'登陆'，{
            网址：'/登录'，
            templateUrl：'的login.html
        }）。
   状态（'父'，{
            网址：'/你好'，
            摘要：真实，
            模板：'＆LT; UI画面/＆GT;'
        }）。
    状态（'parent.home'，{
            网址：''，
            控制器：'SomeCtrl'，
            templateUrl：'page.html即可
        }）。
        状态（'parent.file'，{
            网址：'/鲍勃，
            控制器：'SomeCtrl2'，
            templateUrl：file.html
        }）
 

解决方案

更新：
您code看起来好像没什么问题，我要去了经验，并认为这是一个服务器的问题。

有，你可以处理这个问题，但一些方面，据我所知，他们仅仅是服务器端。

<一个href=\"http://stackoverflow.com/questions/17777967/using-angularjs-html5mode-with-nodejs-and-ex$p$pss\">using AngularJS html5mode与和的NodeJS防爆preSS

<一个href=\"http://stackoverflow.com/questions/12614072/how-do-i-configure-iis-for-url-rewriting-an-angularjs-application-in-html5-mode\">How我配置IIS的URL重写在HTML5模式下AngularJS应用？

为什么不能直接去的路线的原因 - mywebsite.com/page1 是因为角度应用程序本身（驻留index.html页面上）需要拦截/你直接< b>我的空间的。这就是为什么你看到的页面本身永远不会重新加载，该意见在您的应用程序只是改变。您也可以通过太刷新页面测试了这一点。

您将需要实现一些服务器端，这需要你的要求（IE： /第1页）和路由的所有请求的index.html，其中角会照顾其余

此外：如果您使用＃/第1页，你仍然要求你的索引页，角识别＃和路线相应

编辑：其他信息

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

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.

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:

$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.

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?

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

解决方案

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

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

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.

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.

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

Edit: Additional Information

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