我如何实现`$ locationProvider.html5Mode（true）; [英] How do I implement `$locationProvider.html5Mode(true);

问题描述

据我所知， $ locationProvider.html5Mode（true）; 从您的网址中删除哈希值？
虽然它对我来说只有主页在刷新页面时似乎没问题。
是不是 redirectTo：应该处理什么？

From what I understand doesn't $locationProvider.html5Mode(true); remove the hash from your URL? While it does that for me only the home page seems to be ok when you refresh the page. Isn't that what redirectTo: supposed to handle?

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文件中更改了这个。

I changed this in my app.js file.

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

到

$locationProvider.html5Mode(true);

并将其添加到 .htaccess 文件中。

And added this to a .htaccess file.

<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 等......

However, this seemed to work when I was running a server via apache. I suppose my problem was the static server which gulp spawns was not configured to handle that request. I am sure there is some add-on to gulp-open etc...

推荐答案

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

This is because the webserver will handle the request first, so if you don't have URL Rewriting in any form set up it will just look for a folder in the webserver with the name you have put in your 'route'.

如果你使用的是Node Express网络服务器，你可以像这样设置重写：

If you're using a Node Express webserver, you can set the rewrites like this:

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

对于Apache服务器，您可以使用.htaccess，类似这样：

For Apache servers you could use a .htaccess, with something like this:

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

这篇关于我如何实现`$ locationProvider.html5Mode（true）;的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！