Stating directive templateUrl relative to root

Question

I am currently stating templateUrl relative to the current window location.

cvApp.directive('personalDetails', function () {

    return {
        restrict: 'A',
        templateUrl: '../../Scripts/app/templates/personalDetails.html'
    };

});

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

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

Can AngularJS accomplish this?

Are you trying this on a webserver or local file system? On a webserver you would just use '/path/to/template'. There is no '~' (user home) in web path resolution. — Paul Ryan, Jun 02 '13 at 21:59
I undestand OP did not clarify explicitly the context, but from what I can see that is within an ASP.NET web application. So the '~' relates to the idea of *web application root directory* — superjos, Aug 27 '13 at 21:22

score 84 · Accepted Answer · answered Jun 02 '13 at 22:21

84

Looks like it's supported. Taken from a thread on AngularJS Google Group:

the url with "/" prefix is relative to the domain, without the "/" prefix it will be relative to the main ("index.html") page or base url (if you use location in the html5 mode).

This works fine:

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

answered Jun 02 '13 at 22:21

Ufuk Hacıoğulları

37,978
12
114
156

6

This worked for me in ASP.NET MVC with the BASE tag once I removed the leading slash from the templateUrl value. – Jason Parker Dec 18 '14 at 17:17

score 15 · Answer 2 · answered Jun 02 '13 at 22:19

15

Looks like you're trying to do ASP.NET style app-relative paths but client-side. The fix is actually in HTML: add a base tag in the head, like this:

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

Then keep your template paths relative to this, as in

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

answered Jun 02 '13 at 22:19

Barnabas Kendall

4,317
1
32
24

The problem with this approach is that every other relative URL in the document now has this prefix. – Nathan Osman Feb 22 '16 at 19:40

score 3 · Answer 3 · answered Jul 07 '16 at 07:28

3

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

it worked for me.

answered Jul 07 '16 at 07:28

Rajat Faujdar

31
3

score 2 · Answer 4 · answered Jan 10 '18 at 17:22

angular 4 use webpack as bundler.

./ means relative path to current folder



../ means parent folder

domain = src

root = src/index

for example below app.component.ts file, url means xxx.html xxx.css are in the same folder as xxx.ts

./ is relative path as current folder

../ is relative path as parent folder

@Component({
 selector: 'app-root',
 templateUrl: './app.component.html',
 styleUrls: ['./app.component.css']
})

COMPONENT-RELATIVE PATHS IN ANGULAR

AngularJS and Angular 4 are different libraries, and not necessarily compatible. — godskook, Sep 12 '18 at 21:10

Stating directive templateUrl relative to root

4 Answers4

Linked