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

Question

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

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

例如:

http://www.site.com
当我导航到根目录时,我可以点击网站中的所有链接,Angular $routeProvider将接管浏览网站并加载正确的视图.
http://www.site.com/news/archive
但是当我导航到这个网址时(或者当我在像上面那样的深层链接时点击刷新...)这个导航无法正常工作.首先,我们作为$ locationProvider.html5Mode的文档指定,我们捕获服务器上的所有URL,类似于otherwiseangular中的路由,并返回与根域相同的html.但是,如果我$location从run角度函数中检查对象,它告诉我那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
}]);

Run Code Online (Sandbox Code Playgroud)

根据请求编辑,服务器端的更多细节:服务器端由zend框架的路由组织,并且它处理它自己的路由(用于向特定/apiURL 的前端提供数据,最后,有一个catch -all路由如果没有绑定特定的其他路由,它提供与根路由相同的html.所以它基本上服务于该深层链接路由上的主页html.

在查看问题之后更新2我们注意到这个路由工作正常,在Angular 1.0.7 stable上,但是在Angular 1.1.5 unstable中显示了上述行为.

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

Answer 1

sam*_*ura 82

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

<base href="/" />

Run Code Online (Sandbox Code Playgroud)

到你的<head />.

或者,使用`requireBase`属性[此处描述](https://docs.angularjs.org/error/$location/nobase).设置`$ locationProvider.html5mode({enabled:true,requireBase:false});`并且您不需要在HTML中使用`<base>`.我在使用SVG标记引用(例如,从单独的SVG文件加载线性渐变,也就是绘制服务器)时遇到了这个问题,这些文件被`<base>`抛出(事实上,这就是为什么这个选项被添加到了第一名 - 见:https://github.com/angular/angular.js/issues/8934#issuecomment-56568466. (12认同)
请注意,除非您使用变通方法,否则会破坏您网页上的所有相对链接和锚点链接. (7认同)