How to change angularJS directive for IIS Default Web Site

Question

I am creating a web application with ASP.NET MVC and AngularJS. When I debug the web application the URL is like this:

http://localhost/Home/Index#/Login

When I publish it to the IIS development server I use then I use the Default Web Site, so the url will be like this:

http://ipaddress/MyApp/Home/Index#/Login

Because of this my directives do not work. They are set up like this:

        '/Login':
            {
                templateUrl: '/Account/Login',
                controller: 'AccountController'
            },

On the IIS development server this directive calls the route of the Web application:

 http://ipaddress/Account/Login

which should be

http://ipaddress/MyApp/Account/Login

Is there a way to change the directives to work in both cases?

I have tried to play with the "/" character in front of the templateUrl, but it does not seem to work (it gets localhost/Home/Account/Login instead of localhost/Account/Login)

Answer 1

Just ran across this looking for an answer to a similar problem related to hosting an Angular app in an IIS application below a site. I was able to fix the TemplateUrl problem by just adding a . before the /

   '/Login':
        {
            templateUrl: './Account/Login',
            controller: 'AccountController'
        },