How do I implement `$locationProvider.html5Mode(true);

Question

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('!');
});

And this is my html:

This is in the head:

 <base href="/"/>

This is the naviagation...

 <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

I changed this in my app.js file.

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

to

$locationProvider.html5Mode(true);

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>

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

Hyra · Accepted Answer · 2014-10-09 06:07:48Z

2

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

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
});

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>

answered Oct 9, 2014 at 6:07

Hyra

8281 gold badge6 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Antonio Pavicevac-Ortiz Over a year ago

Hey thanks for answering my question! Right now I am using gulp to run a generic server locally, but am I correct to assume, I should use the above (the one for Apache servers, because I am note using Express webserver) but change the index.php part to index.html save that all in a .htaccess file and save it in the same directory as my development folder? You don't know how helpful this has been!!!! cheers!

Jeremy Tymes · Accepted Answer · 2014-10-08 14:22:54Z

2

From the docs on $location, it says that you need to have server-side rewriting for HTML5 mode to work with page refreshes. This page details the different server configurations.

answered Oct 8, 2014 at 14:22

Jeremy Tymes

213 bronze badges

2 Comments

Antonio Pavicevac-Ortiz Over a year ago

Hmmm, from the looks of it the server configs look like something which would be put into an httpd.conf Have you ever configured a SPA to work with $location

Jeremy Tymes Over a year ago

For the apps I've created, I've not used $location's html5mode. Partially because of the environment I was in, and partially because it really wasn't necessary aside from aesthetics.

Collectives™ on Stack Overflow

How do I implement `$locationProvider.html5Mode(true);

2 Answers 2

1 Comment

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related