当我使用 $locationProvider.html5Mode(true);页面不工作在角度答案

【问题标题】：When i use $locationProvider.html5Mode(true); page not working in angular当我使用 $locationProvider.html5Mode(true);页面不工作在角度
【发布时间】：2017-04-25 11:39:47
【问题描述】：

我想从 URL 中删除 # 所以我使用了 $locationProvider.html5Mode(true);用于删除 url 但当我使用 $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>

【问题讨论】：

我不确定。您可能需要为您的基本 url 提供您的解决方案文件夹名称，即。如果它不起作用，请告诉我您遇到了什么控制台错误。
@ImmanuelKirubaharanS 我的所有页面都在文件夹之外，所以根据我的说法，我不需要提供任何文件夹名称
你在哪个浏览器上运行这个应用程序？可能浏览器不支持html5Mode所依赖的history api，如果不支持，它会回退到hash前缀的url。
您是否已将服务器配置为使用 html5mode？如果“不工作”意味着您在所有路由上都收到 404 错误，那么服务器设置不正确（它需要将所有路径重定向到您的应用程序的位置）。 github.com/angular-ui/ui-router/wiki/…
没关系，我测试了您的示例，它与html5Mode 一起使用我相信您的浏览器不支持历史 API，因此 angularjs 会退回到哈希样式的网址。此外，正如@DanielBeck 指出的那样，直接访问 url 时，您会得到 404 Not Found，因为服务器将处理您的请求 url，因此您必须重写并将其指向您的索引文件。

标签： angularjs

【解决方案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]

【讨论】：