(10) ng-inlude ディレクティブで page_html/css_WEB-ITnose の読み込みに失敗する原因と解決策-htmlチュートリアル-php.cn

(10) ng-inlude ディレクティブで page_html/css_WEB-ITnose の読み込みに失敗する原因と解決策

WBOY

リリース： 2016-06-24 11:49:38

オリジナル

1450 人が閲覧しました

angularjs で提供される ng-include ディレクティブは、JSP のに非常に似ており、親ページが大きすぎて読みにくくなるのを避けるために、複数の子ページを同じ親ページにマージするために使用されます。メンテナンスが難しい。

親ページのparent.htmlコードは次のとおりです:

<html>  <head>    <script src="angular-1.2.2/angular.js"></script>	<script>	 function rootController($scope,$rootScope,$injector)	 {		$rootScope.name = "aty";		$rootScope.age = 25;	 }	</script>  </head>  <body  ng-app ng-controller="rootController">        <h1>Hello, {{name}}!</h1>        <h1>Hello, {{age}}!</h1>		<div id="included" ng-include="'child.html'">            <input type="button" value="2"/>        </div>  </body></html>

ログイン後にコピー

含まれている子ページのchild.htmlコードは次のとおりです:

 <div>        <h1>included, {{name}}!</h1>        <h1>included, {{age}}!</h1> </div>

ログイン後にコピー

IE11とChrome39を使用してparent.htmlを実行したところ、child.htmlページがをparent.htmlに含めることはできません。 IE で報告されるエラーメッセージは次のとおりです:

Error: 拒绝访问。   at Anonymous function (file:///D:/learn/angular-1.2.2/angular.js:7852:7)   at sendReq (file:///D:/learn/angular-1.2.2/angular.js:7720:9)   at serverRequest (file:///D:/learn/angular-1.2.2/angular.js:7454:9)

ログイン後にコピー

chrome で報告されるエラーメッセージは次のとおりです:

XMLHttpRequest cannot load file:///D:/learn/include.html. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.Failed to execute 'send' on 'XMLHttpRequest': Failed to load 'file:///D:/learn/include.html'.

ログイン後にコピー

IE でのプロンプトは少し分かりにくいですが、Chrome のプロンプトは明らかです: クロスドメインアクセスは許可されていません。上記のエラーメッセージから、ng-include ディレクティブを使用する場合、AJAX リクエスト XMLHttpRequest が使用されることがわかります。ただし、parent.html をブラウザで直接開き、Web コンテナを介してアクセスしなかったため、クロスドメインアクセスの問題が発生し、child.html の読み込みに失敗しました。解決策は簡単です。コードを Tomcat などの Web コンテナにデプロイし、http 経由でアクセスします。

私が普段 JavaScript や JS フレームワークを練習するときは、比較的軽量なツールを使用し、Eclipse などの IDE は使用せず、JS コードを書くのに通常 Notepad++ を使用します。 Notepad++ は、マシンにインストールされているブラウザを簡単に呼び出すことができます。 ng-include のような命令は、Web コンテナでサポートされている必要があります。フロントエンド開発アーティファクト Webstorm を使用すると、このツールが HTML を実行すると、組み込み Web コンテナが自動的に起動されるため、ng-include 命令はエラーを報告しません。