Question

我想从网址中删除＃所以我使用了$ locationProvider.html5Mode（true）;删除网址，但当我使用$ locationProvider.html5Mode（true）;页面未打开且无法正常工作..

当我删除 $ locationProvider.html5Mode（true）; 页面正常工作且＃在地址栏中显示时。

代码

<!DOCTYPE HTML>
<html>
<head>
<title>route in angular</title>
<style>
html, body {
    height:100%;
}
header {
    background-color: #cb003e;
    overflow: hidden;
    text-align: center;
}

.sidebar {
     background: rgba(20, 20, 20, .3);
    /* width: 100px; */
    height: 100%;
    /* left: 0; */
    float: left;
    display: inline-block;
    position: fixed;
}

.main {
    height: 500px;
    display: table;
}

footer {
    background-color: #cb003e;
    clear: both;
}

</style>
<link rel="stylesheet" href="bootstrap.min.css" />
<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">


<header>
    <h1>Header</h1>
</header>

<main>
    <div class="col-lg-3 col-md-3 col-sm-3">
        <div class="sidebar">
        <ul>
            <li><a href="/home">Home</a></li>
            <li><a href="/about">About</a></li>
            <li><a href="/project">Project</a></li>
            <li><a href="/contact">Contact</a></li>
        </ul>
        </div>
    </div>
    <div class="col-lg-9 col-md-9 col-sm-9 main">
            <div ng-view></div>
    </div>
</main>

<footer class="text-center;">
    <h1 class="text-center">Footer</h1>
</footer>
<script>
var app = angular.module("myApp", ["ngRoute"]);
app.config(function($routeProvider, $locationProvider) {
    $routeProvider
    .when("/home", {
        templateUrl : "home.html"
    })
    .when("/about", {
        templateUrl : "about.html"
    })
    .when("/project", {
        templateUrl : "project.html"
    })
    .when("/contact", {
        templateUrl : "contact.html"
    })

    .when("/inder", {
        templateUrl : "contact.html"
    })

    .otherwise({
        templateUrl : "home.html"
    });

     $locationProvider.html5Mode(true);
});


</script>

</body>
</html>

Answer 1

您使用的是.htaccess吗？如果不是路由可能无法正常工作。

Options +FollowSymLinks
RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]

    RewriteRule ^(.*) /index.html [NC,L]

当我使用$ locationProvider.html5Mode（true）;页面无法正常工作

1 个答案: