DazDylz DazDylz - 1 year ago 87
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) {
when('/', {
redirectTo: '/index'
when('/index', {
templateUrl: './includes/templates/index.php',
controller: 'indexCntrl'
when('/register', {
templateUrl: './includes/templates/register.php',
controller: 'indexCntrl'
redirectTo: '/index'


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 Source

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]


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:

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download