如何實現`$ locationProvider.html5Mode（true）;

Question

據我了解不是$locationProvider.html5Mode(true); 從您的網址中刪除哈希？ 雖然這樣做對我來說，刷新頁面時只有主頁似乎可以。 這不是redirectTo:應該處理的嗎？

var rustyApp = angular.module('rustyApp', ['ngRoute','viewController',
'mm.foundation','angular-flexslider','ui.router'],
function($routeProvider, $locationProvider) {
  $routeProvider.when('/', {
    templateUrl: '/partials/home.html',
    controller: 'HomeController'
});
// When you put /home, it also automatically handles /home/ as well

 $routeProvider.when('/work', {
    templateUrl: '/partials/work.html',
    controller: 'WorkController'
});
  $routeProvider.when('/contact', {
    templateUrl: '/partials/contact.html',
    controller: 'ContactController'
});
  $routeProvider.otherwise({
    redirectTo: '/'
});

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

這是我的html：

這是在頭上：

 <base href="/"/>

這是導航。

 <section class="top-bar-section uk-navbar-flip">
     <ul class="uk-navbar-nav ">
         <li  my-active-link="/"><a  href="/"><i class="uk-icon-home uk-icon-medium "> </i>home</a></li>
         <li  my-active-link="/#work"><a  href="/#work"><i class="uk-icon-photo uk-icon-medium "></i> work</a></li>
         <li  my-active-link="/#contact"><a  href="/#contact"><i class="uk-icon-envelope-o uk-icon-medium "></i> contact</a>
     </ul>
 </section>

UPDATE

我在app.js文件中更改了此設置。

$locationProvider.html5Mode(true).hashPrefix('!'); //changed this

至

$locationProvider.html5Mode(true);

並將其添加到.htaccess文件。

<IfModule mod_rewrite.c>
    RewriteEngine on
    RewriteCond %{REQUEST_FILENAME} -s [OR]
    RewriteCond %{REQUEST_FILENAME} -l [OR]
    RewriteCond %{REQUEST_FILENAME} -d
    RewriteRule ^.*$ - [NC,L]
    RewriteRule ^(.*) /index.html [NC,L]
</IfModule>

但是，當我通過apache運行服務器時，這似乎可行。 我想我的問題是未配置gulp生成的靜態服務器來處理該請求。 我確定gulp-open等有一些附加功能...

Answer 1

從$location的文檔中可以看出，您需要對HTML5模式進行服務器端重寫，才能使用頁面刷新功能。 此頁面詳細介紹了不同的服務器配置。

Answer 2

這是因為Web服務器將首先處理該請求，因此，如果您沒有設置任何形式的URL重寫，它將在Web服務器中查找帶有您在“路由”中輸入的名稱的文件夾。

如果您使用的是Node Express Web服務器，則可以這樣設置重寫：

app.all('/*', function(req, res) {
    res.sendfile(__dirname + '/index.html'); // Or whatever your public folder is
});

對於Apache服務器，您可以使用.htaccess，如下所示：

<IfModule mod_rewrite.c>
    RewriteEngine On
    RewriteBase /
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteRule ^(.*)       /index.php/#/$1 // Might have to fiddle with the hash and/or other prefix you want to use
</IfModule>