ui-router removes directory path from url

Question

I've set up ui-router states like so:

    $stateProvider
        .state("login", {
            url: "/Login",
            templateUrl: "login.html",
            controller: "LoginController"
        })
        .state("createBooking",
        {
            url: "/CreateBooking",
            templateUrl: "createBooking.html",
            controller: "CreateBookingController"
        })
        .state("calendarView", {
            url: "/ViewBookings",
            templateUrl: "calendarView.html",
            controller: "CalendarController"
        });

which works fine when running on the localhost (e.g. //localhost:[port]/Login)

However, when I push to the dev server under a virtual directory 'SiteName' (e.g. //dev.server.com/SiteName/Login) then the virtual directory part of the path is stripped out (e.g. //dev.server.com/Login)

It also affects all of my services, as it's looking at //server/serviceName instead of //server/directory/serviceName

When I push the site to staging/production, I'll be using different paths again.

How can I set up ui-router to properly handle my various paths?

Answer 1

So it turned out that I needed to remove the html5mode.

$locationProvider.html5Mode(true);

it now works with the urls showing as //dev.server.com/SiteName/index#/Login