Refreshing page gives "Page not found"
angularjs
Solution
When the browser calls `http://example.com/#!/item/1/`, it is calling the index page of `http://example.com/`, your JS then determines what content to display by analysing the hashtag.
When the browser calls `http://example.com/item/1/`, your server is attempting to serve the index page of `http://example.com/item/1/`, which it cannot find and therefore throws a 404 error.
To achieve what you want, you'll either need to:
- Create a rewrite rule to rewrite the links to your root index page
- adjust your JS so that it generates the hashtag instead of the URL. If you are using AngularJS then turn off html5 mode with `$locationProvider.html5Mode(false);`, or
- put an index page in `http://example.com/item/1/` that redirects to `http://example.com/#!/item/1/` - however note that this would need to be repeated for every /prettyPath/ you crete.
Assuming you are using Apache and your index file is index.html, try adding the following to your .htaccess file to create a rewrite rule before trying either of the other two solutions.
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteBase /
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*) /index.html/#/$1
</IfModule>
If you are using a pure AngularJS/Ajax solution without a server side logic, change index.php to index.html (or index.htm depending on your root index filename).
Problem
I have an app where it uses a single ng-view and multiple controllers and views. If I navigate through the root, eg: `www.example.com`, everything works. Except that if I hit Ctrl+R (Refresh) then it gives me the 404 eror Page not Found. eg: refreshing on this page gives me error. `http://example.com/item/1/`. But if I access the page using the hashbang then it works.eg: `http://example.com/#!/item/1/` How shall I fix this problem? My `.htaccess` is empty. And I'm using chrome which support HTML5 hashbang.