Question

我正在尝试为其他网站的文件夹中的网站设置AngularJS路由。但是，每次单击链接时，URL都会在页面名称前显示字符＃！/。因此，例如，如果主页的链接是＃/，则单击URL时会重定向到＃！/＃％2F并对正斜杠进行编码。这是代码：

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" data-ng-app="app">
<head>
    <title>Appening - Photo Sharing App</title>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1"/>
    <link rel="icon" type="image/png" href="/Appening/Images/favicon.png"/>
    <link rel="apple-touch-icon" type="image/png" href="/Appening/Images/applefav.png"/>
    <link rel="stylesheet" type="text/css" href="/Appening/Styles/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="/Appening/Styles/styles.css"/>
    <base href="/Appening"/>
</head>
<body>
    <div data-ng-controller="collapseMenuCtrl">
        <div class="navbar navbar-default" role="navigation">
            <div class="container">
                <div class="navbar-header">
                    <button type="button" class="navbar-toggle" data-ng-click="isNavCollapsed = !isNavCollapsed">
                        <span class="sr-only">Toggle navigation</span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                        <span class="icon-bar"></span>
                    </button>
                </div>
                <div class="collapse navbar-collapse" uib-collapse="isNavCollapsed">


     <ul class="nav navbar-nav">
                    <li class="active"><a href="#/">Home</a></li>
                    <li><a href="#About">About</a></li>
                    <li><a href="#Contact">Contact</a></li>
                </ul>
            </div>
        </div>
    </div>
</div>
<div data-ng-view></div>
<script src="/Appening/Scripts/angular.min.js"></script>
<script src="/Appening/Scripts/angular-route.min.js"></script>
<script src="/Appening/Scripts/angular-animate.min.js"></script>
<script src="/Appening/Scripts/ui-bootstrap-tpls-2.3.1.min.js"></script>
<script src="/Appening/Scripts/script.js"></script>

这是script.js文件：

var app = angular.module("app", ["ngRoute", "ngAnimate", "ui.bootstrap"]);

app.config(function ($routeProvider) {
    $routeProvider
    .when("/", {
        templateUrl: "main.html"
    })
    .when("/About", {
        templateUrl: "about.html"
    })
    .when("/Contact", {
        templateUrl: "contact.html"
    });
});

我将头部的基线设置为包含子文件夹，但仍然没有好处。这是我第一次为子目录设置Angular路由，我错过了什么？如何在没有URL重定向的情况下删除字符并成功路由到这些页面？

非常感谢任何帮助。

Answer 1

配置$locationProvider并将html5Mode设置为true。

以下是代码段 -

app.config(function ($routeProvider, $locationProvider) {
$routeProvider
.when("/", {
    templateUrl: "main.html"
})
.when("/About", {
    templateUrl: "about.html"
})
.when("/Contact", {
    templateUrl: "contact.html"
});

$locationProvider.html5Mode(true);

}）;

子文件夹中网站的AngularJS路由 - 在网站页面

1 个答案: