未找到 Angularjs templateUrl 文件位置

Question

我正在本地开发一个单页应用程序。

我似乎无法使用 Angularjs 中的简单自定义指令将 HTML 文件加载为模板。如果我尝试使用 使用原始 html template: 属性，它工作得很好，但我有超过 400 行代码需要在这个模板中使用，一旦我尝试使用 templateUrl: 没有任何负载。我尝试了 30 种可能的路径，包括在绝望的尝试中将 HTML 文件复制到许多不同的位置，例如 C:/my-customer.html，这是我的项目结构:

    App--
        |
        css
        |
        img
        |
        js--
           |
           main.js
           |
           foundation.js
           |
           my-customer.html
        |
        templates--
                  |
                  my-customer.html
        |
        bcf.html
        |
        fluidType.html
        |
        start.html
        |
        my-customer.html

保持简单，我使用了 angular docs 中的示例这是我的指令代码(在带有我的 Controller 的 main.js 中):

app.directive('myCustomer', function() {
  return {
    templateUrl: 'my-customer.html'
  };
});

我再次尝试过类似的路径: ../my-customer.html ../templates/my-customer.html等等，但没有任何作用 templateUrl: ，如果这有帮助，我在没有本地 Web 服务器运行的 Windows 上。

这里有一些控制台错误，但作为一个新手并不确定它们的意思，我觉得我需要运行一个 Web 服务器并通过 http 进行解析。

 XMLHttpRequest cannot load file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html. Cross origin requests are only supported for protocol schemes: http, data, chrome-extension, https, chrome-extension-resource.
angular.js:11594 Error: Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///C:/Users/Dylan/Google%20Drive/PA/Dev/Grossing%20App/templates/my-customer.html'.
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:87:261
    at m (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:83:133)
    at f (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:80:366)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
    at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
    at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)angular.js:11594 (anonymous function)
angular.js:11594 Error: [$compile:tpload] http://errors.angularjs.org/1.3.8/$compile/tpload?p0=templates%2Fmy-customer.html
    at Error (native)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:6:416
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:137:65
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:112:276
    at l.$eval (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:84)
    at l.$digest (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:123:195)
    at l.$apply (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:126:362)
    at https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:448
    at Object.e [as invoke] (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:37:96)
    at d (https://ajax.googleapis.com/ajax/libs/angularjs/1.3.8/angular.min.js:17:369)

Angularjs 的新手。我在项目中遇到了障碍，现在我完全被困住了。

Answer 1

它应该已经相对于根。所以，这应该有效:

app.directive('myCustomer', function() {
  return {
    templateUrl: '/templates/my-customer.html'
  };
});

如果这不起作用，首先确保您可以浏览模板目录:
http://localhost/templates/my-customer.html
您应该能够直接获取模板。找到模板后，只需删除主机和端口即可。