AngularJS：如何使用深度链接启用$locationProvider.html5模式

当通过

$locationProvider.html5Mode（true）

在AngularJS中启用HTML5模式时，当您在站点中更深的页面上着陆时，导航似乎会倾斜

例如：

• http://www.site.com

  
  当我导航到根目录时，我可以单击站点中的所有链接，Angular的

  $routeProvider

  将接管整个站点的导航并加载正确的视图

• http://www.site.com/news/archive

  
  但是当我导航到这个url（或者当我在上面这样的深度链接上时点击刷新…）时，这个导航并没有像我期望的那样工作。 首先，按照指定，我们捕获服务器上的所有URL，类似于angular中的

  路由，并返回与根域相同的html。但是如果我随后从angular的
  run
  函数中检查
  $location
  对象，它会告诉我
  http://www.site.com
  是我的
  主机
  ，而
  /archive
  是我的
  路径
  。
  $routeProvider
  到达
  .otherwise（）
  子句，因为我只有
  /news/archive
  作为有效路由。这个应用程序做了一些奇怪的事情
  

也许服务器上的重写需要以不同的方式进行，或者我需要用angular指定内容，但目前我不知道angular为什么会看到没有包含

/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 framework的路由组织的，它处理自己的路由（用于在特定的

/api

URL上向前端提供数据，并且在最后，有一个包罗万象的路由。如果没有绑定特定的其他路由，它将提供与根路由相同的html。 因此，它基本上是在深度链接的路径上提供主页html

更新2 在研究该问题后，我们注意到该布线在Angular 1.0.7 stable上运行良好，但在Angular 1.1.5 stable上显示了上述行为

---

我已经检查了变更日志，但到目前为止还没有发现任何有用的东西，我想我们可以将其作为bug提交，或者将其作为与他们所做的某个变更相关的不必要的行为提交，或者只是等待，看看它是否在稍后发布的稳定版本中得到修复。

这个问题是由于使用了AngularJS 1.1.5（这是不稳定的，显然有一些bug或路由实现与1.0.7不同）

将其返回到1.0.7立即解决了问题

我已经尝试过1.2.0rc1版本，但还没有完成测试，因为我不得不重写一些路由器功能，因为他们从核心中取出了它

---

无论如何，当使用AngularJS vs 1.0.7时，这个问题已经修复。

发现那里没有bug。 只需添加：

<base href="/" />

到您的

配置AngularJS

配置您的服务器：

---

这是我花了比我愿意承认的更多的时间后发现的最好的解决方案。基本上，将target=“\u self”添加到每个链接，以确保页面重新加载

---

我的问题通过以下方法解决：

1-将此添加到您的头部：

<base href="/" />

---

你在服务器上是怎么做的？@johnled如果你需要比我在服务器端代码中添加的信息更多的信息，我可以让我的同事明天给我提供更具体的细节。我自己主要在这个项目的前端工作。感谢更新，我不久前玩过1.1.5不稳定的版本，它确实有很多bug。可能值得尝试新版本。我必须尝试：）我明天会给你回复，因为我肯定会尝试这个…但是目前我们已经运行1.2.0 rc2没有问题。虽然还没有测试1.2.0最终版本。但是我怀疑它会出问题，因为我们已经有了rc2。所以我们已经将它改成了单独的模块用于路由…小心，因为这会破坏所有的相对性我认为HTML5规范说base需要指向一个绝对的URIAlternative，使用

requireBase

属性。Set

$locationProvider.html5mode（{enabled:true，requireBase:false}）；

并且您不需要在HTML中使用

。我在使用SVG标记引用（例如，从单独的SVG文件a.k.a.paint server加载线性渐变）时遇到了这种情况，

（事实上，这就是为什么首先添加此选项的原因-请参阅：。在尝试了这么多解决方案后，这对我来说非常有用。谢谢！

$locationProvider.html5Mode(true);