Refreshing page gives “Page not found”

by

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

More Related Contents:

  1. What is the Angular equivalent to an AngularJS $watch?
  2. Custom sort function in ng-repeat
  3. AngularJS and its use of Dollar Variables
  4. Angular and SVG filters
  5. Confusing $locationChangeSuccess and $stateChangeStart
  6. Set Page title using UI-Router
  7. How to send and retrieve parameters using $state.go toParams and $stateParams?
  8. Angularjs simple file download causes router to redirect
  9. Angular UI Router Nested State resolve in child states
  10. angularJS: How to call child scope function in parent scope
  11. How to parseInt in Angular.js
  12. How to check if any Checkbox is checked in Angular
  13. AngularJS data bind in ng-bind-html?
  14. Angular orderBy number sorting as text in ng-repeat
  15. Angular UI-Router How to create a “layout” state?
  16. AngularJS – Multiple ng-view in single template
  17. How to use “ng-repeat” within template of a directive in Angular JS?
  18. AngularJS dropdown directive hide when clicking outside
  19. What is the difference between required and ng-required?
  20. Angularjs autocomplete from $http
  21. Using $index with the AngularJS ‘ng-options’ directive?
  22. Making an angular filter conditional
  23. Enable/Disable Anchor Tags using AngularJS
  24. Telling Angular Js to ignore a specific route
  25. AngularJS $q. Deferred queue
  26. angularjs ui-router strange behaviour with additional segment in route
  27. How to master AngularJS? [closed]
  28. Understanding the transclude option of directive definition?
  29. How to integrate AngularUI to AngularJS?
  30. Two views in one AngularUI Router state sharing scope

Leave a Comment