DazDylz DazDylz - 3 months ago 20
Javascript Question

AngularJS html5Mode refresh fails

So this is my router:

var app = angular.module('tradePlace', ['ngRoute', 'tradeCntrls']);
app.config(['$routeProvider', '$locationProvider', function($route, $location) {
$route.
when('/', {
redirectTo: '/index'
}).
when('/index', {
templateUrl: './includes/templates/index.php',
controller: 'indexCntrl'
}).
when('/register', {
templateUrl: './includes/templates/register.php',
controller: 'indexCntrl'
}).
otherwise({
redirectTo: '/index'
});

$location.html5Mode(true);
}])


I have html5 mode true, so now the URL have not a # in it.

If I go to mysite.com/ it redirect`s me to /index but when I reload the page (f5) or go to mysite.com/index I get a 404 error.

Is there a way to fix this? Or just don`t use html5 mode?

Answer

For Apache use in your .htaccess:

RewriteEngine On

RewriteBase /

RewriteRule ^index.php - [L]

#your static data in the folder app
RewriteRule ^app - [L]

#everything else
RewriteRule ^(.*)$ index.php?para=$1 [QSA,L]

EDIT:

The whole requested url is passed as para to the php file. You can further process this in the php skript with $_GET['para'] if needed.

Apache rewrites your request and delivers the file which match the rules.

i.e. request: