Angular為什么找不到我的模板？

Question

我正在嘗試為angular JS做phoneCat教程 ，除了在MVC應用程序中。 （我聽說混合MVC路由和Angular路由不是一個好主意，但是我還沒走那么遠。）我在第4步，在這里我們將組件拆分成自己的模塊。 我在應用程序中創建了一個名為“ AngularModules”的文件夾，並在該文件夾中創建了一個名為“ phone-list”的文件夾。 然后，我將在教程中制作的phone-list.component.js和phone-list.module.js文件放入該文件夾中。 下一步需要用對包含html的外部文件的引用替換HTML字符串。 但是由於某種原因，Angular似乎找不到該文件。 如果查看模板文件並按f5鍵，則會啟動並轉到該文件的視圖（顯然沒有完成綁定，因此它顯示了雙花括號和所有花括號）。 我相當肯定的文件夾是沒有問題的，因為如果我更換templateURL與部分template用字符串的一部分，它會工作。 所以這是我的phone-list.component.js：

angular.module("phoneList").component("phoneList", {
    //templateURL: "http://localhost:52413/AngularModules/phone-list/phone-list.template.html",
    templateURL: "AngularModules/phone-list/phone-list.template.html",
    //template:"<ul>" + 
    //      '<li ng-repeat="phone in $ctrl.phones">' +
    //        "<span>{{phone.name}}</span>" + 
    //        "<p>{{phone.snippet}}</p>" +
    //      "</li>" + 
    //    "</ul>",
    controller: function PhoneListController() {
        this.phones = [
            {
                name: 'Nexus S',
                snipped: 'Fast just got faster with Nexus S.'
            }, {
                name: 'Motorola XOOM™ with Wi-Fi',
                snippet: 'The Next, Next Generation tablet.'
            }, {
                name: 'MOTOROLA XOOM™',
                snippet: 'The Next, Next Generation tablet.'
            }
        ];
    }
});

我不擔心我沒有正確包含phone-list.component.js。 如果我使用template部分（當前已注釋掉），則它可以工作。 指向localhost的其他URL也無效。 但是，如果我單擊鏈接，則會看到該頁面。 我嘗試了templateURL: "~/AngularModules/phone-list/phone-list.template.html" ，它也沒有用。

我如何才能使用templateURL？

Answer 1

根據文檔，屬性名稱是templateUrl而不是templateURL ，因此，您的代碼應如下所示：

angular.module("phoneList").component("phoneList", {
    templateUrl: "AngularModules/phone-list/phone-list.template.html",

現在您可能需要處理模板路徑問題，但是您將處於正確的路徑。

在此處查看有關組件的信息