Angular $ locationProvider无法从URL中删除#

时间:2017-03-14 18:25:16

标签: angularjs angular-ui-router

我是角色新手,我正在尝试使用$locationProvider从URL角度路线中删除# 但我的代码不起作用 我试试这个

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular-route.js"></script>
 <base href="/">
</head>
<body ng-app="myApp">
<p><a href="/">Main</a></p>
<a href="/red">Red</a>
<a href="/green">Green</a>
<a href="/blue">Blue</a>
<ng-view></ng-view>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when("/", {
        templateUrl : "main.html"
    })
    .when("/red", {
        templateUrl : "red.html"
    })
    .when("/green", {
        templateUrl : "green.html"
    })
    .when("/blue", {
        templateUrl : "blue.html"
    });
    $locationProvider.html5Mode(true);
});
</script>
<p>Click on the links.</p>
<p>This example uses the ng-view directive as an element.</p>
</body>
</html>

我也尝试使用URL重写但不能正常工作

<system.webServer>
    <rewrite>
      <rules>
        <rule name="AngularJS" stopProcessing="true">
          <match url=".*" />
          <conditions logicalGrouping="MatchAll">
            <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
            <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
            <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
          </conditions>
          <action type="Rewrite" url="/" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>

任何人都可以帮我这个吗?

1 个答案:

答案 0 :(得分:0)

您的代码似乎工作得很好。隐藏#所需的只是添加:

$locationProvider.html5Mode(true);

确保清理浏览器缓存。

您是否在控制台中收到任何错误?