1

I'm relatively new to client side development. I'm creating an angularJS directive which references a static html, in [root]/Static/template.html.

I guess the problem is not unique to angularJS.

Now I need this address to be root relative, so that it can be loaded regardless of where I use the directive. The problem is that I don't know where my site will be uploaded, so it might be put in www.mysite.com/ or might be www.mysite.com/system/

I also can't use relative path, as it will be sensitive to where I use the directive, so for instance if I use Static/template.html, it will be found by documents in the website root, but not in the inner folders.

What is the correct way to reference documents to be robust?

Alireza
  • 5,421
  • 5
  • 34
  • 67

2 Answers2

1

If your static folder is relative the place where your application is deployed, e.g.:

www.example.com/index.html
www.example.com/Static

www.example.com/root/index.html
www.example.com/root/Static

www.example.com/root/foobar-app/index.html
www.example.com/root/foobar-app/Static

Then you need to extract the base url and store it somewhere. window.location API could be used to do that.

E.g.:

<!-- index.html -->
<!-- should probably be placed into external script file -->
<script>
    function extractPath(url) {
        return url.match(/.*\//) // find all chars until the slash
    }

    var baseurl = window.location.origin + extractPath(window.location.pathname);
    window.baseurl = baseurl; // store in global scope
</script>

This snippet shows the general idea. Now elsewhere in your code you can read the base url path to access static resources. E.g.:

var image_url = window.baseurl + "Static" + image_path;

In AngularJS you would normally store that variable in the main app controller. If you only have one factory to access static resources, you could consider storing the baseurl there.

Jay
  • 3,445
  • 2
  • 24
  • 29
  • Thanks. So you suggest that the best way to do this is to store the website root which can be determined in asp.net by using `~` into a javascript variable and then prepend this address to any path we need to be both relative to web application root and independent from the reference location. – Alireza Jan 25 '15 at 07:52
  • 1
    @Alireza it is not a nice solution but yes. The variable containing path to static files doesn't need to be stored in a global scope. You could incorporate it in ng-controller or service/factory. Better approach would be to ensure that static files are always served from the same URL no matter where your web application is deployed (e.g.: `example.com/static`) – Jay Jan 25 '15 at 09:12
  • Ok, cool. BTW, reading from/writing to a variable inside service/factory is easy when we do it from a controller. but when I want to do that inside an inline script tag in the server-generated html file, it gets less trivial. Any hints in that direction? Essentially I want to: ` – Alireza Jan 25 '15 at 09:40
  • 1
    In this case, it might be ok to stick with global vars. Alternatively you could serve the JS file containing angular controller as a JSP (java) / ASPX (.net) / ERB (rails). This way you can use tags to inject back end variables into a front end code. Another idea is to use your front end build process (grunt/gulp) to inject variables into the front end code. – Jay Jan 25 '15 at 09:56
0

URL that starts with / is the URL from the root.

So if you set /Static/template.html, you can access template.html from both paths(www.mysite.com/ and www.mysite.com/system/).

harry0000
  • 253
  • 2
  • 13