一尘不染

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

angularjs

通过启用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不稳定版本中显示了上述行为。

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


阅读 326

收藏
2020-07-04

共1个答案

一尘不染

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

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

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

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

2020-07-04