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)

score 3 · Accepted Answer · edited Aug 23 '14 at 12:29

3

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

edited Aug 23 '14 at 12:29

Wilfredo P

4,070
28
46

answered Feb 24 '14 at 14:08

Jeremy Hutchinson

1,975
16
26

score 0 · Answer 2 · edited May 23 '17 at 11:48

There are 2 options I can provide you with:

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
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

score 0 · Answer 3 · edited May 23 '17 at 12:33

0

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

edited May 23 '17 at 12:33

Community

1
1

answered Feb 10 '14 at 15:43

Chandermani

42,589
12
85
88

Does this conditional compilation work on javascript as well? – dare2k Feb 10 '14 at 16:00

How to change angularJS directive for IIS Default Web Site

3 Answers3