我如何实现`$ locationProvider.html5Mode(true);

时间:2014-10-08 14:00:32

标签: javascript html5 angularjs

据我所知,$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 spawns未配置为处理该请求的静态服务器。我确信gulp-open等有一些附加内容......

2 个答案:

答案 0 :(得分:2)

来自$location上的docs,它表示您需要对HTML5模式进行服务器端重写才能使用页面刷新。 This page详细说明了不同的服务器配置。

答案 1 :(得分:2)

这是因为网络服务器会首先处理请求,所以如果您没有以任何形式设置网址重写,它只会在网络服务器中找到一个文件夹,其中包含您放在&#中的名称39;路线&#39;

如果您使用的是Node Express网络服务器,则可以设置如下重写:

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>