9

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

  • why do you say refreshing the page redirects the user to `myapp.com/city/london` which does not exists? How can it not exist? How can it be in the browsers address bar in the first place if it doesn't exist? – Mohammad Sepahvand Apr 26 '14 at 14:03
  • "How can it be in the browsers address bar in the first place if it doesn't exist". Because I am using angular ui-router. ui-router uses templates and you can always see the address in the URL bar of the screen even though the actual pages may not exist. –  Apr 26 '14 at 14:33
  • That has nothing to do with UI router. I thought you meant that the url being displayed in the browser address bar didn't exists, it does exists otherwise you would never have arrived there :) Your problem is with angulars HTML5's routing mismatch with your server. – Mohammad Sepahvand Apr 26 '14 at 14:35

2 Answers2

7

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.

Community
  • 1
  • 1
Mohammad Sepahvand
  • 17,364
  • 22
  • 81
  • 122
  • 1
    Thanks for your advice but I think this doesn't address the question. My problem is when the browser refreshes the first thing it looks for is a html file called myapp.com/city/london. But my application has only one single html file and that is the index.html file. –  Apr 26 '14 at 14:11
1

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');
}]);
ShwetaK4
  • 19
  • 3