Set angular.js url root globally

Question

I have an angular app that is hosted at my university server.

Because the app is not in domain root (urls are constructed as follows: university.domain/~<student_id>) all links and image srcs are broken (angular assumes that it is located in domain root).

My question is: how can I override angular base url so I can still use goodies like ng-href, ng-src etc.?

Orthopedics

Answer 1

Quoting the AngularJS documentation:

Relative links

Be sure to check all relative links, images, scripts etc. You must either specify the url base in the head of your main html file (<base href="/my-base">) or you must use absolute urls (starting with /) everywhere because relative urls will be resolved to absolute urls using the initial absolute url of the document, which is often different from the root of the application.

More here on the official documentation.

Example

<base href="university.domain/~12345678" />

Rhoda

What if I have one level more in document structure? I.e. I want the url of the app to be university.domain/~12345678/app ? I tried setting base href to "/~1234/app" but all requests are for /~1234. – Orthopedics

Are you just using it for development, or do you actually want to host this to the world? Also, could you set up a fiddle with some code to see? – Rhoda

I already figured it out, it seems that I had to add slash to the end of the base href. Thanks a lot! – Orthopedics

There is one more thing that I had to do. I didn't know that relative urls should have a dot in front of them. So these two things (slash in base href and dot in front of relative links) finally made it work. – Orthopedics

The thing I love about SO is that I get to learn as much from answering questions than I do from asking them, thanks for the solution! – Rhoda

+1 I'm seeing this answer by accident, searching for something else, and ah, I see that there is this and I used app.constant for this and had to take care of it everywhere... Thanks! – Gobioid