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",

现在您可能需要处理模板路径问题，但是您将处于正确的路径。

在此处查看有关组件的信息