消除＃！来自angularjs中的url答案

【问题标题】：Remove #! from url in angularjs消除＃！来自angularjs中的url
【发布时间】：2017-06-25 15:20:34
【问题描述】：

我正在尝试了解如何删除 #!从 angularjs 中的 url 使用 ng-route 。请有人帮我完成删除#! 所需的确切步骤。

这里是代码

index.html

<head>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular-route.js"></script>

  <script src="a02.js"></script>

</head>

<body ng-app="testApp">
  Hello there
  <hr>
  <a href="#test">Click Me </a>
  <div ng-view></div>
</body>
</html>

a02.js

var app = angular.module("testApp", ['ngRoute']);

  app.config(["$routeProvider",function($routeProvider){
    $routeProvider.when('/test',{
        template:"<strong>It's routing template</strong>"
    })
}]);

我的要求是当点击点击我链接时它应该显示

它是路由模板。

但是当浏览器加载 index.html 时，url 会变成

http://localhost:3000/index.html#!/

当我点击 Click Me 链接时，网址将变为

http://localhost:3000/index.html#!/#test

我希望这个 url 和链接在没有 #! 的情况下也能正常工作。

【问题讨论】：

标签： html angularjs

【解决方案1】：

在您的 js 路由器文件中，您需要添加：

$locationProvider.hashPrefix(''); 
$locationProvider.html5Mode(true);

在你的 index html 文件（head 标签）中你需要添加：

<base href="/">

【讨论】：

为什么我们需要添加 $locationProvider.hashPrefix(''); ?