web-dev-qa-db-ja.com

AngularJS ng-viewがローカルで機能しないのはなぜですか？

私は、AngularJSアプリを使用して、リンクをクリックしてさまざまなビューに移動できるようにするために数時間働いています。

ただし、私はPlunkerで機能するようにオンラインでのみ機能するように見えます。

ローカルで自分のマシンのクリックスルー機能をテストしようとしていますが、ng-viewがロードされないようです。 Plunkerで動作しているため正しいことがわかっているPlunkerコードをダウンロードすると、ng-viewがローカルでホストされると動作しなくなるようです。

Ng-includeや、独自のHTMLタグとして定義したディレクティブについても同様の問題がありました。

これらが私のコンピューターでローカルに機能しない理由はありますか？ （そして、テスト目的でそれを修正できる方法は？）

必要に応じて、Plunkerで話しているコードの一部 here を表示できます。

htmlangularjsangularjs-directiveangularjs-ng-include
21
user2494584

ng-viewとng-includeはどちらもAJAX=テンプレートをロードするために使用します。問題は、ブラウザがデフォルトでAJAXファイルへのリクエストを許可しないことです。 （セキュリティ上の理由から）ローカルファイルシステム上にあるため、次の2つのオプションがあります。

  1. ファイルを提供するローカルWebサーバーを実行する
  2. ローカルファイルへのアクセスを許可するようにブラウザに指示する

Macを使用している場合、いくつかの組み込みWebサーバー（Apache httpdおよびPython SimpleHTTPServerと呼ばれるモジュール））があるため、拳オプションはかなり簡単です。 Python SimpleHTTPServerモジュールを実行するには、ファイルが置かれているフォルダーでコンソールを開き、実行します

python -m SimpleHTTPServer 3000

次に、ブラウザーを開いてhttp://localhost:3000と入力します。それでおしまい。

Windowsを使用している場合は、それも可能です。たとえば Wamp をインストールして、そこからファイルを提供できます。

2番目のオプションはChromeで可能です。コマンドラインから--allow-file-access-from-filesオプションを指定して実行するか、Chrome実行可能ファイルへのパスの後にショートカットにこのフラグを追加します。

This リソースは、さまざまなブラウザーでローカルに実行し、さまざまなWebサーバーを使用する方法を理解するのにも役立ちます。

28
Vadim

ng-viewとng-includeは、テンプレートファイルを提供するajaxリクエストを作成します。ローカルで実行しているため、その要求を行うことはできません。これを簡単に修正するには、ローカルサーバー経由でコンテンツを提供するために http-server を使用します。

17
Tyler McGinnis

ng-viewは、スクリプトタグを使用して個別のファイルを配置するのではなく、index.html内にテンプレートを配置するとローカルで機能するため、angularでAJAXそれらを取得するリクエスト。

<script type="text/ng-template" id="home.html">
  This is the Home template
</script>
4
Saidh