如何更改IIS默认网站的angularJS指令

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'
        },

Answer 2

There are 2 options I can provide you with:

1. Server config

   Don't use virtual directories to host your app in the dev environment. Rather host different sites with different host headers in IIS so that you can refer to stuff from the root, for example: /Account/Login

2. Configuration module

   Consider using a module which gets injected into your angular app which contains a configuration you can use to build URLs for a specific environment. Then have one version of this module file for the dev environment, one for local and possibly one for production. The beauty of Javascript is that you can include different javascript files in the different environments, so the module could be sourced from different files.

   Have a look at this answer for more info on this option: https://stackoverflow.com/a/16340438/431522

Answer 3

Try to set the base url in master page header section like

<base href="/MyApp">

To differential between dev and release use conditional compilation. See here C# and ASP.NET MVC: Using #if directive in a view