CODEWITHSUNDEEP
javascripthtmlangularjs
DazDylz
DazDylz

Reputation: 1096

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?

Upvotes: 2

Views: 402

Answers (3)

rvazquez
rvazquez

Reputation: 1

Add this in .htacces or .conf on module directory AllowOverride All usuallity be None

Upvotes: 0

Raphael Müller
Raphael Müller

Reputation: 2200

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:

Upvotes: 0

nanobar
nanobar

Reputation: 66475

There is no way to fix this without running your project from a server and doing a little special work to route requests. It involves these steps:

  1. Catch static file requests (e.g. image files)
  2. Send other requests to your index.html to be handled by your router

For example using a nodeJS express server it would look something like this:

// Capture real static file requests
app.use(express.static(__dirname + '/public'));

// All get requests not captured above go to the client.
server.get('*', function (req, res) {
    res.sendfile(__dirname + '/public/index.html');
});

Note this is not an Angular specific problem. The same steps have to be made for any client side app using html5 pushState.

Upvotes: 1

Related Questions