AngularJS:如何使用深度链接启用$ locationProvider.html5Mode


71

当通过启用AngularJS中的html5Mode时$locationProvider.html5Mode(true),当您进入站点更深的页面时,导航似乎偏斜。

例如:

  • http://www.site.com
    当我导航到根目录时,我可以单击站点中的所有链接,Angular$routeProvider会接管整个站点的导航并加载正确的视图。

  • http://www.site.com/news/archive
    但是,当我导航到该URL时(或者当我进入上述类似的深层链接时点击刷新...),该导航无法正常工作。首先,按照$ locationProvider.html5Mode文档规定,我们捕获服务器上的所有url(类似于otherwiseangular中的路由),并返回与根域相同的html。但是,如果我随后$locationrun角度函数中检查对象,它会告诉我那http://www.site.com是我的host/archive就是我的path。在$routeProvider到达的.otherwise()条款,因为我只有/news/archive一个有效的途径。该应用程序确实很奇怪。

也许服务器上的重写需要以不同的方式进行,或者我需要以角度指定内容,但是目前我不知道为什么角度看到的是不/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。

在检查了问题之后,更新2我们注意到该路由在Angular 1.0.7稳定版本上可以正常工作,但在Angular 1.1.5不稳定版本中显示了上述行为。

我已经检查了更改日志,但是到目前为止,还没有发现任何有用的东西,我想我们可以将其提交为错误,也可以将与他们所做的特定更改相关的不想要的行为提交,或者只是等待以查看是否已将其修复稍后将发布稳定版本。


您如何在服务器上执行此操作?
John Ledbetter

@JohnLedbetter如果您需要的信息比我在服务器端代码中添加的信息更多,我可以请我的同事给我提供更详细的信息。我自己主要在这个项目的前端工作。
桑德

感谢您的更新,我前一阵子使用了1.1.5不稳定版本,确实确实有很多错误。尝试新的1.2.0-rc1版本可能值得。
John Ledbetter

Answers:


84

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

<base href="/" />

给你<head />


我必须尝试:)我明天会再给您,因为我一定会尝试的。尚未测试最终版本1.2.0。但我怀疑它会带来问题,因为我们已经有了RC2。因此我们已经将其更改为用于路由的单独模块...
Sander 2013年

7
请注意,因为这会破坏页面上的所有相对链接和锚定链接,除非您使用解决方法。
jjt

1
我认为HTML5规范指出,基本内容必须指向绝对URI
Nikos 2014年

12
或者,使用此处描述requireBase属性。设置,您无需在HTML中使用。我在使用SVG标记引用(例如,从单独的SVG文件(又称为画图服务器)加载线性渐变)时遇到了这种情况,但这些引用被抛弃了(实际上,这就是为什么首先添加此选项的原因-请参阅:github.com/angular/angular.js/issues/8934#issuecomment-56568466$locationProvider.html5mode({ enabled: true, requireBase: false });<base><base>
邦哥


9

这个问题是由于使用了AngularJS 1.1.5(它是不稳定的,并且显然有一些bug或与1.0.7相比的路由实现不同)

将其恢复为1.0.7可立即解决该问题。

已经尝试了1.2.0rc1版本,但是还没有完成测试,因为我不得不重写某些路由器功能,因为他们将其从核心中删除了。

无论如何,当使用AngularJS vs 1.0.7时,此问题已解决。



7

我的问题解决了这些:

1-添加到你的头上:

<base href="/" />

2-在此使用 app.config

$locationProvider.html5Mode(true);
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.