处理AngularJS中的路由时删除哈希

时间:2016-04-27 20:40:36

标签: angularjs angularjs-routing

我使用角度制作了样本SPA。我使用Angular路由功能,拥有一个布局页面,然后根据最终用户请求的URL注入和交换不同的视图。 使用索引页面上的href路径中的哈希值完美地完成所有工作

<a href="#/page1">page1</a> 但通过这样做,我的网页网址将类似于http://localhost/angular/#/page1

所以我想删除网址中的哈希值并将其设为http://localhost/angular/page1

要删除哈希,您必须启用html5Mode路由并在索引页面上设置基本href

https://docs.angularjs.org/error/ $位置/ nobase将

我的确完全一样(请参阅下面的我的代码片段),但它不起作用。我在本地主机Apache服务器上运行它。

var app = angular.module("myModule", ["ngRoute"])
  .config(function($routeProvider, $locationProvider) {
    $routeProvider
      .when("/page1", {
        templateUrl: "partials/page1.html",
        controller: "page1Controller"
      })
      .when("/page2", {
        templateUrl: "partials/page2.html",
        controller: "page2Controller"
      })
    $locationProvider.html5Mode(true);
  })
  .controller("page1Controller", function($scope) {
    $scope.message = "Page1";
  })
  .controller("page2Controller", function($scope) {
    $scope.message = "Page2";
  })
<html ng-app="myModule">

<head>
  <title>Angular Routing</title>
  <script type="text/javascript" src="angular.js"></script>
  <script type="text/javascript" src="angular-route.js"></script>
  <script type="text/javascript" src="js.js"></script>
  <link rel="stylesheet" type="text/css" href="styles.css">

  <base href="angular"></base>
</head>

<body>
  <table>
    <h3>Sammple Routing in AngularJS</h3>
    <tr>
      <td class="leftMenu">
        <a href="page1">page1</a>
        <a href="page2">page2</a>
      </td>
      <td class="mainContent">
        <ng-view></ng-view>
        <!--partials will be filled here-->
      </td>
    </tr>
  </table>
</body>

2 个答案:

答案 0 :(得分:1)

我现在正在IIS上努力解决这个问题,偶然发现了Apache的优秀指南:How do I check if gcc is performing tail-recursion optimization?

我希望它有所帮助。

答案 1 :(得分:0)

我按照这篇文章从网址中删除了哈希:WriterOutputStream以下是他所做的快速代码:

app.js或每个角度页面:

gained.df.ex[names(example.data)] <- t(apply(example.data, 1, function(x) {
            i1 <- tail(which(cumsum(x)==0),1)
             x1 <- rep(0, length(x))
             if(length(i1) >0) replace(x1, i1+1, 1) else x1}))
gained.df.ex[names(example.data)]
#   Jan Feb Mar Apr
#1    0   1   0   0
#2    0   0   0   0
#3    0   0   0   0
#4    0   0   0   0
#5    0   0   1   0
#6    0   0   0   0
#7    0   0   0   0
#8    0   0   0   0
#9    0   0   0   0
#10   0   0   0   0

角度模板或每个角度页面必须包含在头部:

app.config(["$locationProvider",
    function($locationProvider) {
        $locationProvider.html5Mode(true);
    }
]);

我完全不确定内部运作方式,所以我无法解释这究竟是什么。我所知道的一切都来自那篇文章,所以请随时查看。

编辑:<base href="/"> 尝试使用像<a href="#"></a>这样的空字符串可能会出现问题它可以防止在点击死链接时将哈希值添加到网址中,但仍会提供锚悬停效果。