Specifying the templateUrl directive relative to the root

Question

I am currently specifying templateUrl relative to the current location of the window.

cvApp.directive('personalDetails', function () { return { restrict: 'A', templateUrl: '../../Scripts/app/templates/personalDetails.html' }; }); 

How can I make templateUrl relative to the root of the application? I am looking for something like this:

 templateUrl: '~/Scripts/app/templates/personalDetails.html' 

Can AngularJS accomplish this?

Answer 1

It seems to be supported. Taken from a thread in the Google AngularJS group :

The URL with the prefix "/" refers to the domain without the "/", the prefix will refer to the main ("index.html") page or the base URL (if you use the location in html5 mode).

This works great:

 templateUrl: '/Scripts/app/templates/personalDetails.html' 

Answer 2

It looks like you're trying to make paths related to an ASP.NET-style application, but on the client side. The fix is ​​actually in HTML: add a base tag to the head, for example:

 <base href="<%= Request.ApplicationPath %>" /> 

Then save your template paths regarding this, as in

 templateUrl: 'Scripts/app/templates/personalDetails.html' 

Answer 3

Use '././ Scripts / application / templates /personalDetails.html'

it worked for me.