javascript - 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?

Answer 1

好像是支持的。取自AngularJS Google Group 上的一个线程：

带有“/”前缀的 url 是相对于域的，没有“/”前缀的它将是相对于主（“index.html”）页面或基本 url（如果您在 html5 模式下使用位置）。

这工作正常：

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

Answer 2

看起来您正在尝试执行 ASP.NET 样式的应用程序相对路径，但在客户端。修复实际上是在 HTML 中：在头部添加一个基本标记，如下所示：

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

然后保持您的模板路径相对于此，如

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

Answer 3

使用'././Scripts/app/templates/personalDetails.html'

它对我有用。

Answer 4

angular 4 使用 webpack 作为捆绑器。

./ means relative path to current folder



../ means parent folder

域 = src

根 = src/索引

例如下面的 app.component.ts 文件，url 表示 xxx.html xxx.css 与 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']
})

角度中的分量相对路径