One of the issues I had with Angular.js (but also with other JavaScript frameworks) is that URL’s you create on the client are relative to the server root address. This is fine as long as your application is hosted on the server root(e.g. www.myservername.com), but the moment you start using virtual directories(e.g. www.myservername.com/virtualdirectoryname ), you’re into trouble.
Let’s have a look for example to the following Angular service:
The problem is that when you host this service in a virtual directory, the HTTP call will be send to http://www.myservername.com/api/applications and not to www.myservername.com/virtualdirectoryname/api/applications as you would expect.
There a multiple ways to solve this issue. I did it by rendering the rootUrl inside my ASP.NET Razor view. This url is generated by the server and embedded in the page:
Inside my Angular app, I added some code that read this value from the html and register it as a constant value:
This allows me to inject this value anywhere I need it, let’s have a look at the refactored service: