AngularJS:如何启用$ locationProvider.html5Mode与深层链接

当通过$locationProvider.html5Mode(true)启用AngularJS中的html5Mode时,导航似乎在您登陆网站更深的页面时出现偏斜。

例如:

  • http://www.site.com
    当我导航到根,我可以点击网站中的所有链接,Angular的$routeProvider将接pipe浏览网站,并加载正确的意见。

  • http://www.site.com/news/archive
    但是当我导航到这个URL(或点击刷新时,像上面的一个深度链接…)此导航不工作,因为我期望它。 首先,我们作为$ locationProvider.html5Mode的文档指定,我们捕获服务器上的所有URL,类似于angular otherwise路由,并返回与根域相同的html。 但是,如果我然后检查angular度的runfunction内的$location对象,它告诉我, http://www.site.com是我的host/archive是我的path$routeProvider到达.otherwise()子句,因为我只有/news/archive作为一个有效的路由。 和应用程序确实奇怪的东西。

也许在服务器上的重写需要做不同的处理,或者我需要angular度指定的东西,但目前我很无知,为什么angular度看到没有包括/news部分的path。

例如main.js:

 // Create an application module var App = angular.module('App', []); App.config(['$routeProvider', '$locationProvider', function AppConfig($routeProvider, $locationProvider) { $routeProvider .when( '/', { redirectTo: '/home' }) .when('/home', { templateUrl: 'templates/home.html' }) .when('/login', { templateUrl: 'templates/login.html' }) .when('/news', { templateUrl: 'templates/news.html' }) .when('/news/archive', { templateUrl: 'templates/newsarchive.html' }) // removed other routes ... *snip .otherwise({ redirectTo: '/home' } ); // enable html5Mode for pushstate ('#'-less URLs) $locationProvider.html5Mode(true); $locationProvider.hashPrefix('!'); }]); // Initialize the application App.run(['$location', function AppRun($location) { debugger; // -->> here i debug the $location object to see what angular see's as URL }]); 

根据请求编辑 ,在服务器端的更多细节:服务器端由zend框架的路由组织,它处理它自己的路由(为特定的/api url上的前端提供数据,最后,如果没有特定的其他路由被绑定,则它是一条全通的路由,它提供与根路由相同的html,所以它基本上服务于该深度链路上的主页html。

更新2后,我们注意到这个问题,我们注意到这个路由工作正常,在Angular 1.0.7稳定,但在Angular 1.1.5 unstable中显示上述行为。

我已经检查了更改日志,但是到目前为止还没有发现任何有用的东西,我想我们可以将其作为错误提交,或者将不需要的行为提交给他们所做的某个更改,或者等待并确定是否修复后来要发布的稳定版本。

发现那里没有错误。 只需添加:

 <base href="/" /> 

到你的<head />

这是我经过更多时间才发现的最好的解决办法, 基本上,将target =“_ self”添加到您需要确保页面重新加载的每个链接。

http://blog.panjiesw.com/posts/2013/09/angularjs-normal-links-with-html5mode/

这个问题是由于使用AngularJS 1.1.5(这是不稳定的,显然有一些错误或不同的路由实现比在1.0.7)

把它回到1.0.7立即解决了这个问题。

已经尝试了1.2.0rc1版本,但还没有完成testing,因为我不得不重写一些路由器的function,因为他们把它从核心。

无论如何,这个问题在使用AngularJS vs 1.0.7时是固定的。

  1. configurationAngularJS

$ location / html5和hashbang模式/链接重写之间的切换

  1. configuration您的服务器:

https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#wiki-how-to-configure-your-server-to-work-with-html5mode

我的问题解决了这些:

添加到你的头:

 <base href="/" /> 

并在app.config中使用

 $locationProvider.html5Mode(true);