在指令中包含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可以接受一個函數-您可以編寫一個函數來確定模塊的路徑或其他內容。但這將非常脆弱。