AngularJSがng-inludeコマンドを使用してページのロードに失敗した原因と解決方法
2285 ワード
この例では、AngularJSがng-inlude命令を使用してページのロードに失敗した原因と解決方法について説明します.皆さんの参考にしてください.具体的には以下の通りです.
AngularJSで提供されているng-include命令は、JSPで使用されている複数のサブページを同じ親ページにマージすることに似ており、親ページが大きすぎたり、可読性が悪く、メンテナンスが悪いことを回避します.
親ページparent.htmlコードは次のとおりです.
含まれるサブページchild.htmlコードは次のとおりです.
IE 11とChrome 39で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リクエストXMLfttpRequestが使用されることがわかります.しかし、ブラウザで直接開いているparent.htmlであり、webコンテナからアクセスしていないため、ドメイン間アクセスの問題があり、child.htmlのロードに失敗しました.解決策は簡単です.tomcatなどのwebコンテナにコードを配置し、httpでアクセスすればいいです.
普段JavaScriptやJSフレームワークを練習しているときは、一版は比較的軽量級のツールを使っていて、EclipseのようなIDEは使いません.私は一般的にNotepad++を使ってjsコードを書きます.Notepad++は、ネイティブにインストールされているブラウザを簡単に呼び出すことができます.ng-includeのような命令は,webコンテナのサポートが必要である.フロントエンド開発神器webstormを使用できます.htmlを実行すると、内蔵のwebコンテナが自動的に起動し、ng-include命令が間違って報告されません.
AngularJSに関する詳細については、「AngularJS入門と進級チュートリアル」および「AngularJS MVCアーキテクチャ概要」のトピックを参照してください.
本稿では、AngularJSプログラムの設計に役立つことを期待しています.
AngularJSで提供されているng-include命令は、JSPで使用されている複数のサブページを同じ親ページにマージすることに似ており、親ページが大きすぎたり、可読性が悪く、メンテナンスが悪いことを回避します.
親ページparent.htmlコードは次のとおりです.
function rootController($scope,$rootScope,$injector)
{
$rootScope.name = "aty";
$rootScope.age = 25;
}
Hello, {{name}}!
Hello, {{age}}!
含まれるサブページchild.htmlコードは次のとおりです.
included, {{name}}!
included, {{age}}!
IE 11とChrome 39で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リクエストXMLfttpRequestが使用されることがわかります.しかし、ブラウザで直接開いているparent.htmlであり、webコンテナからアクセスしていないため、ドメイン間アクセスの問題があり、child.htmlのロードに失敗しました.解決策は簡単です.tomcatなどのwebコンテナにコードを配置し、httpでアクセスすればいいです.
普段JavaScriptやJSフレームワークを練習しているときは、一版は比較的軽量級のツールを使っていて、EclipseのようなIDEは使いません.私は一般的にNotepad++を使ってjsコードを書きます.Notepad++は、ネイティブにインストールされているブラウザを簡単に呼び出すことができます.ng-includeのような命令は,webコンテナのサポートが必要である.フロントエンド開発神器webstormを使用できます.htmlを実行すると、内蔵のwebコンテナが自動的に起動し、ng-include命令が間違って報告されません.
AngularJSに関する詳細については、「AngularJS入門と進級チュートリアル」および「AngularJS MVCアーキテクチャ概要」のトピックを参照してください.
本稿では、AngularJSプログラムの設計に役立つことを期待しています.