Question

我是一个非常新的角度和一些代码，我想将角度版本从1.2.3升级到1.3.15（我以前从未做过）。当我这样做时，索引页面上的导航链接停止工作;相反，似乎router.js落到我的$ routeProvider.otherwise案例并重定向到/ home（你可以看到我的jumbotron中的刷新）。但是，我还注意到，当我点击链接时，我的网址从localhost:8888/home转到localhost:8888/home#或localhost:8888/home#home或localhost:8888/home#info，但网页路由不是工作（主页改为刷新） - 就像路由只是附加到/ home并且它不知道该怎么做。

当我从index.html中的链接中删除深层链接（hash / pound /＃）时，代码似乎再次起作用，但我并不理解为什么。很可能我在1.2到1.3的突破性变化中误解了一些东西，但文档似乎使用＃似乎仍然支持1.3。

通过＆＃34;升级＆＃34;我用我们较新的版本替换了项目中的angular.js，angular-resource.js和angular-route.js。我正在使用Apache karaf，并在Chrome和Firefox中进行了相同的测试结果。

以下缩短的代码：

以下是index.html代码在1.2.3中工作并在1.3.15中断（我使用＃和#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，当我用＆＃34; /＆＃34;替换index.html中的hash / pound /＃符号时对于家庭和＆＃34;信息＆＃34;而不是＆＃34; #info＆＃34;，一切似乎再次起作用。

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

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

但链接似乎正在工作，只有当您点击链接时才会出现＃＆＃34;＃＆＃34;作为href，页面模板根本没有加载。所以我不知道问题是相关的还是完全不同的。

我已经调查了一些建议（但可能遗漏了一些东西）：

我确实看到人们正在升级ui-router，但我目前没有使用它;我可以做？（虽然plunker似乎与angular-route.js）
html5在所有竞技场中表现不佳，但它似乎在我的代码中配置了？
修复服务器以允许＃，我认为已经完成，因为代码以前正常工作

提前感谢您的帮助！如果你能指出我正确的方向，也会受到赞赏！

Answer 1

哈希在HTML规范中具有特定含义。它针对页面上的元素。如果您在页面localhost:8888/home上并点击链接localhost:8888/home#info，则浏览器会跳转到ID为info的元素（如果有的话）。因此，如果元素不存在，则不会发生任何事情。

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

第二个也是更重要的一个是路线以/开头。所以它是href="#/"和href="#/info"。无论您使用什么版本的Angular，这都有效。当然，这可以解决你的问题。

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

关于你的最后一点的一句话：服务器不关心#，因为它只涉及客户。

angularjs v1.3.15深层链接/路由/路径不再使用hashtag（从v1.2.3迁移）

1 个答案: