在指令中包含js库文件的正确方法，避免可能更改的相对路径

Question

我有一个项目，它没有使用任何方法来包含角度代码，而是直接将它们加载到我们的html页面中（并且我的经理暂时不会获得包含任何工具的许可）。

当前，如果我想使用提供的javascript / angular / bootstrap元素，只需将其包含在index.html中，例如：

<script type="text/javascript" src="../lib/angular/angular-file.js"/>

我正在写指令。 在html模板中，我想使用一个已经编写好的第三方angular指令来提供树状视图。 因此，我希望将此脚本包含在指令html模板中以确保已加载该脚本，而不是将其信任到index.html已加载该脚本。

但是，我不想使用相对路径，或者至少害怕这样做会导致我的指令稍后被破坏。 我指令的html模板被埋在树形结构中，类似于“门户/模块/模拟/模板/任何”，我不想放置“ ../../../../ ..”。 / lib”中的模板，因为它很丑陋，而且还因为我们可能会移动角度文件，并且我不想破坏我的指令。

有没有一种更干净的方式包含库而无需对文件结构的多个层进行假设，相对于我的文件结构的“顶层”等工作的某种方式？

我的指令拥有包含第三方angular指令的自己的 lib目录，而不是成为共享lib目录的一部分，是否被认为是干净的？ 对于这个问题，我认为我使用的第三方树视图指令依赖于其他角度和jquery代码，所以我不知道我是否偶然依赖于顶层index.html文件中的某些角度加载/ jquery我的指令使用的代码没有意识到。 我是否担心不应该使我的指令单独存在？

Answer 1

通常，我使用grunt和grunt-angular-templates打包模板 。 如果您使用类似的方法，则可以将模板引用为myModule/fileNameOfTemplate ，并且由于模板已经在内存中（使用$templateCache ），因此您无需进行任何额外的请求，并且代码根本不需要实际文件的路径。

无需添加额外的模块，构建步骤等...

foo.js

var fooModule = angular.module('foo', []);
fooModule.run(['$templateCache', function ($templateCache) {
  $templateCache.put("foo/mytemplate.hmtl", "Really" +
                     "really" +
                     "long" +
                     "string");
}])
fooModule.directive('bar', function () {
    return {
        templateUrl: 'foo/mytemplate.html'
    }
});

现在，将模块存储在哪里都无所谓-只是将文件从模板缓存中拉出。

另外，templateUrl可以接受一个函数-您可以编写一个函数来确定模块的路径或其他内容。但这将非常脆弱。