javascript - 如何实现 `$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>

更新

我在 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

这是因为网络服务器将首先处理请求，因此如果您没有设置任何形式的 URL 重写，它只会在网络服务器中查找具有您在“路由”中输入的名称的文件夹。

如果您使用的是 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>