web-dev-qa-db-ja.com

Angularjs templateUrlファイルの場所が見つかりません

ローカルで単一ページのアプリを開発しています。

Angularjsのシンプルなカスタムディレクティブを使用して、HTMLファイルをテンプレートとしてロードできないようです。 template:属性を使用して未加工のhtmlを使用しようとすると、うまく機能しますが、使用する必要があるコードは400行以上ありますこのテンプレートでは、templateUrl:を使用しようとするとすぐに何も読み込まれません。 HTMLファイルをC：/my-customer.htmlなどのさまざまな場所に必死にコピーするなど、30通りの可能なパスを試してみました。これが私のプロジェクト構造です。

    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 の例を使用しています。ディレクティブのコードは次のとおりです（コントローラーの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の新機能。私はプロジェクトの壁にぶつかって、完全に行き詰まりました。

angularjsangularjs-directiveangular-template
12
DylanH

これはすでにルートを基準にしているはずです。だから、これはうまくいくはずです：

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

それが機能しない場合は、まずテンプレートディレクトリを参照できることを確認します。

http://localhost/templates/my-customer.html

テンプレートを直接取得できるはずです。テンプレートが見つかったら、ホストとポートを削除します。

13
Davin Tryon