What is a robust way of getting urls for use in AngularJS http from mvc.net?

Question

When using http in Angular the url must be specified in the JavaScript. I don't want to hard code the full url (e.g. http://www.example.com/Controller/GetDetails/) because this would mean code changes between live and test environments.

I've read examples that just use the relative path (e.g. /Contoller/GetDetails), however due to the way MVC routing works this often fails to work. As a simple example the home page can be accessed via:

and so adding the relative path isn't ideal because two out of three of these routes will get the wrong http url.

I thought initially that I could determine the base url from JavaScript and use:

window.location.protocol+"//"+window.location.host + "/Contoller/GetDetails"

But I have found that this fails if the MVC application is running in a folder and won't correctly resolve a url like:

http://www.example.com/MyApplication/Controller/GetDetails

I also considered using a more RESTful approach and handing all the urls needed for the JavaScript down as part of the json data - but of course, this leads to the chicken and egg situation of: If the http urls are provided in the json, how do I get the first json call to work?

What is a robust way of getting urls for use in AngularJS http calls to mvc.net?

fed.pavlo · Accepted Answer · 2014-07-29 08:40:59Z

1

If you're working with angular - you need to take a look at window service - $window and location service - $location. Using these you will easily resolve relative path issues. In addition - what you're calling MVC app folder - is app context.

answered Jul 29, 2014 at 8:40

fed.pavlo

2451 silver badge9 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Community · Accepted Answer · 2017-05-23 12:23:19Z

0

One way to do this seems to be to set up a JavaScript variable in the Layout page using .net code as seen in here:

How to get base URL of an MVC application using javascript

window.applicationBaseUrl = @Html.Raw(HttpUtility.JavaScriptStringEncode(
    new Uri(
               new Uri(this.Context.Request.Url.GetLeftPart(UriPartial.Authority)),
               Url.Content("~/")
           ).ToString(), true));

This allows you to call the http using the applicationBaseUrl

 $http({
                method: 'GET', url: window.applicationBaseUrl + '/Controller/GetDetails'
            })

edited May 23, 2017 at 12:23

CommunityBot

11 silver badge

answered Jul 29, 2014 at 8:40

Kaine

1,2972 gold badges16 silver badges30 bronze badges

1 Comment

mono68 Over a year ago

Good except you should replace window.applicationBaseUrl with an Angular constant for dependency injection and testability: yourApp.constant('applicationBaseUrl', @Html.Raw(HttpUtility.JavaScriptStringEncode(Url.Content("~/"), true)));

Collectives™ on Stack Overflow

What is a robust way of getting urls for use in AngularJS http from mvc.net?

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related