angularjs v1.3.15 深度链接/路由/路径不再使用主题标签（从 v1.2.3 迁移）

Question

我是 angular 的新手，正在编写一些我想将 angular 版本从 1.2.3 升级到 1.3.15 的代码（我以前也从未做过）。当我这样做时，我的索引页面上的导航 links 停止工作；相反，router.js 似乎落入了我的 $routeProvider.otherwise 案例并重定向到 /home（您可以在我的超大屏幕中看到刷新）。但是，我还注意到，当我单击 link 时，我的 url 从 localhost:8888/home 变为 localhost:8888/home# 或 localhost:8888/home#home 或 localhost:8888/home#info，但是页面路由不起作用（主页被刷新） - 就像路由只是附加到 /home 并且它不知道该做什么。

当我从 index.html 中的 link 中删除深度 linking（散列/磅/#）时，代码似乎再次工作，但我没有真的明白为什么。我很可能误解了从 1.2 到 1.3 的重大更改，但文档使它看起来像在 1.3 中仍然支持使用 #。

通过 "upgrading"，我用更新的版本替换了项目中的 angular.js、angular-resource.js 和 angular-route.js。我正在使用 Apache karaf，并在 Chrome 和 Firefox 中进行了测试，结果相同。

以下缩短代码：

这是在 1.2.3 中有效但在 1.3.15 中失效的 index.html 代码（我同时使用了 # 和 #home 来测试是否存在差异）：

  <div class="navbar navbar-inverse navbar-fixed-top">
  ...
      <a href="#" class="navbar-brand">My Project<small></small></a>
      ...
      <div class="collapse navbar-collapse navHeaderCollapse" data-ng-controller="NavController">
        <ul class="nav navbar-nav navbar-right">
          <li class="{{navData['Home'].css}}"><a href="#home">Home</a></li>
          <li class="{{navData['Info'].css}}"><a href="#info">Info</a></li>
        </ul>
      </div>
    </div>
  </div>

我的 router.js 看起来像：

angular.module("app").config(function ($routeProvider, $locationProvider) {

    $locationProvider.html5Mode(true);

    $routeProvider.when('/home', {
        templateUrl: "home.html",
        controller: "HomeController",
        isPublic: false
    });

    $routeProvider.when('/info', {
        templateUrl: "info.html",
        controller: "InfoController",
        isPublic: false
    });

    $routeProvider.otherwise({ redirectTo: '/home' });

});

在 1.3.15 中，当我将 index.html 中的井号/井号/# 符号替换为主页的“/”和 "info" 而不是“#info”时，一切似乎再次工作。

我还尝试将潜在的依赖项升级到以下内容：

ui-bootstrap-tpls-0.13.0.js（原为 0.6.0）
jquery-2.1.4.js（原为 2.0.3）

我正在使用：

bootstrap.js（使用 3.0.0）

我还有一些额外的库，但不知道它们是否与此相关。让我知道是否应该将它们添加到列表中。

我试图在这里模拟我在 plunker 中看到的内容：Angularjs v1.3.15 test # redirect

但是 link 似乎正常工作，但当您单击仅将“#”作为 href 的 link 时，页面模板根本不会加载。所以我不知道这个问题是相关的还是完全不同的。

我研究过的一些建议（但可能漏掉了什么）：

我确实看到人们正在升级 ui-router，但我目前没有使用它；我可以做？（尽管 plunker 似乎正在使用 angular-route.js）
html5 并非在所有领域都发挥出色，但它似乎已在我的代码中进行了配置？
修复服务器以允许 #，我认为这已经完成，因为代码过去可以正常工作

在此先感谢您的帮助！如果您能指出正确的方向，我将不胜感激！

Answer 1

散列在 HTML 规范中具有特定含义。它以页面上的一个元素为目标。如果您在页面 localhost:8888/home 上单击 link localhost:8888/home#info，浏览器将跳转到 ID 为 info 的元素（如果有的话）。因此，如果该元素不存在，则不会发生任何事情。

Angular 拦截点击和 url 更改并允许您改为更改路线。为了避免任何混淆（或无意的行为），Angular 有两个约定。第一种是使用前缀。它是可选的，建议的是 !。这就是为什么这种模式也被称为 Hashbang 模式，links 到路由将以 #!.

开头

第二个也是更重要的一个是路由以 / 开头。所以它是 href="#/" 和 href="#/info"。无论您使用什么版本的 Angular，这都有效。当然，这会修复你的 plunker。

如果您想使用哈希，请不要激活 HTML5 模式。

关于你最后一点的评论：服务器不关心 #，因为它只与客户端有关。

angularjs v1.3.15 深度链接/路由/路径不再使用主题标签（从 v1.2.3 迁移）

angularjs v1.3.15 deep linking / routing / path no longer working with hashtag (Migrated from v1.2.3)

angularjs

url-routing

deep-linking

hashtag