通过启用AngularJS中的html5Mode时$locationProvider.html5Mode(true),当您进入站点更深的页面时,导航似乎偏斜。
$locationProvider.html5Mode(true)
例如:
http://www.site.com 当我导航到根目录时,我可以单击站点中的所有链接,Angular $routeProvider会接管整个站点的导航并加载正确的视图。
http://www.site.com
$routeProvider
http://www.site.com/news/archive 但是当我导航到该URL时(或者当我进入上述类似的深层链接时点击刷新…),该导航无法正常工作。首先,按照$ locationProvider.html5Mode的文档规定,我们捕获服务器上的所有url(类似于otherwiseangular中的路由),并返回与根域相同的html。但是,如果我再$location从run角度函数中检查对象,它会告诉我那http://www.site.com是我的host那/archive就是我的path。在$routeProvider到达的.otherwise()条款,因为我只有/news/archive一个有效的途径。该应用程序确实很奇怪。
http://www.site.com/news/archive
otherwise
$location
run
host
/archive
path
.otherwise()
/news/archive
也许服务器上的重写需要以不同的方式进行,或者我需要以角度指定内容,但是目前我不知道为什么角度看到的是不/news包含该段的路径。
/news
示例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框架的路由组织,并且由它处理自己的路由(用于将数据提供给特定/apiurl 的前端,最后有一个问题- all路由(如果未绑定其他特定路由),则与根路由使用相同的html。因此,它基本上在该深度链接的路由上提供首页html。
/api
*在检查了问题后, *更新2 我们注意到该路由在Angular 1.0.7稳定版本上可以正常工作,但在Angular 1.1.5不稳定版本中显示了上述行为。
我已经检查了更改日志,但到目前为止还没有发现任何有用的东西,我想我们可以将其提交为错误,也可以将与他们所做的某些更改相关的不想要的行为提交,或者仅等待并确认它是否已固定稍后将发布稳定版本。
这个问题是由于使用了AngularJS 1.1.5(它是不稳定的,并且显然有一些bug或与1.0.7版本不同的路由实现)
将其恢复为1.0.7可立即解决该问题。
已经尝试了1.2.0rc1版本,但是还没有完成测试,因为我不得不重写某些路由器功能,因为他们将其从核心中删除了。
无论如何,当使用AngularJS vs 1.0.7时,此问题已解决。