How can I handle a browser refresh in an AngularJS SPA application? - angularjs

Question

My AngularJS application uses
ui-router
an index.html file
all calls for login and data go to an ASP.NET Web Controller with a URL that starts with /api/xxx.
When a user enters myapp.com then the server index.html which is what I want. When the user now selects links on that page then ui-router shows the appropriate templates inside the index.html and the browser URL bar correctly displays addresses like these:
myapp.com/home
myapp.com/home/overview
myapp.com/city
myapp.com/city/london
Note that my configuration is set up like this:
.config([
'$httpProvider', '$locationProvider', '$sceProvider', '$stateProvider',
function (
$httpProvider, $locationProvider, $sceProvider, $stateProvider) {
$sceProvider.enabled(false);
$locationProvider.html5Mode(true);
If a user now clicks on refresh then the browser forgets that it was on index.html and tries to find the web page: myapp.com/city/london etc which of course does not exist. It then shows an error page saying the page does not exist.
How can I handle this situation? I would like a user clicking on myapp.com/city to refresh and ideally go back to myapp.com/city

Answer 1

EDIT
When you use HTML5 modle ruting with angular you must tell your server how to handle the request If you arrive at one of those routes, for example if you try to go to myapp.com/city you will get an error because the server is going to look for a city.html page at the root of the server which won't be there. If you navigate to that route from within your app it will work fine, but if you copy and paste that into your browser address bar you'll get a 404 because the server does not understand how to get to city.html. An easy fix would be to avoid using HTML5 routing mode. According to the angular docs you need to do some URL rewriting to make your server understand how to route to those pages:
From the docs:
Using HTML5 mode requires URL rewriting on server side, basically you
have to rewrite all your links to entry point of your application
(e.g. index.html)
You can also have a look here, this answer discusses how to get HTML5 routing working with your server.

Answer 2

when the user refreshes the application, you can lead them to login page or default page. which can be done by the following code.
app.run(['$location', function ($location) {
$location.path('/login');
}]);