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

Question

我使用 angular 制作了一个示例 SPA。我使用 Angular 路由功能，拥有一个布局页面，然后根据最终用户请求的 URL 注入和换出不同的视图。一切都与索引页面上 href 路由中的哈希完美结合

<a href="#/page1">page1</a> 但是这样做，我的 URL 网页将像 http://localhost/angular/#/page1

所以我想删除 URL 中的哈希并使其像 http://localhost/angular/page1

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

https://docs.angularjs.org/error/$location/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>

Answer 1

我现在正在为 IIS 上的这个问题苦苦挣扎，在我的苦苦挣扎中，偶然发现了一个很棒的 Apache 指南：https://ngmilk.rocks/2015/03/09/angularjs-html5-mode-or-pretty-urls-on-apache-using-htaccess/

希望对您有所帮助。

Answer 2

我按照这篇文章从 URL 中删除哈希：https://scotch.io/tutorials/pretty-urls-in-angularjs-removing-the-hashtag这是他所做的快速代码：

app.js 或每 angular 页：

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

Angular 模板或每个 angular 页面必须在头部包含：

<base href="/">

我完全不确定内部工作原理，所以我无法解释它到底做了什么。我所知道的一切都来自那篇文章，所以请随意看一看。

编辑：<a href="#"></a> 可能有问题尝试使用像 <a href=""></a> 这样的空字符串它可以防止在单击死链接时将散列添加到 url 但仍然提供锚点悬停效果。

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

remove hashes when dealing with routes in AngularJS

angularjs

angularjs-routing