AngularJS ng-include: HTML ファイルのインクルード例
ジェームズ・ハートマン
⚡ スマートサマリー
AngularJS の ng-include は、外部の HTML フラグメントを取得、コンパイルし、メインページに挿入します。これにより、テーブル、ヘッダー、フッターなどの共有マークアップが、再利用可能な 1 つの部分ファイルにまとめられます。
デフォルトでは、HTML には他のファイルからクライアント側のコードを組み込む機能がありません。 通常、プログラミング言語においては、アプリケーションのさまざまなファイルに機能を分散することが推奨されます。
たとえば、数値演算のロジックがある場合、通常はその機能を 1 つの別のファイルに定義する必要があります。その別のファイルは、そのファイルをインクルードするだけで、複数のアプリケーションで再利用できます。
通常、これは次のような概念です インクルードステートメント 入手可能な プログラミング言語 .Net など Java.
このチュートリアルでは、外部ファイル（外部ファイルを含むファイル）のその他の方法について見ていきます。 HTML コード）はメインのHTMLファイルに含めることができます。
クライアント側インクルード
HTMLコードを含める最も一般的な方法の1つは、 Java脚本。 Javaスクリプト は、HTMLページのコンテンツをその場で操作できるプログラミング言語です。したがって、 Javaスクリプトは、他のファイルからコードを取り込むためにも使用できます。
以下の手順は、これを実現する方法を示しています。
ステップ1） Sub.html というファイルを定義し、そのファイルに次のコードを追加します。
<div> This is an included file </div>
ステップ2） メイン アプリケーション ファイルである Sample.html というファイルを作成し、以下のコード スニペットを追加します。
以下のコードに関して注意すべき主な点は次のとおりです。
- bodyタグ内に、ContentというIDを持つdivタグがあります。 これは、外部ファイル「Sub.html」のコードが挿入される場所です。
- jQueryスクリプトへの参照があります。jQueryは、 JavaDOM操作をさらに容易にするスクリプト。
- Javaスクリプト関数には、'$(“#Content”).load(“Sub.html”);' というステートメントがあり、これにより Sub.html ファイル内のコードが、ID が Content の div タグに挿入されます。
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
サーバー側インクルード
サーバーサイドインクルードは、サイト全体に共通のコード部分を含めるためにも使用できます。 これは通常、HTML ドキュメントの以下の部分にコンテンツを含めるために行われます。
- ページヘッダー
- ページフッター
- ナビゲーションメニュー。
ウェブサーバーがサーバーサイドインクルードを認識するためには、ファイル名に特別な拡張子が必要です。通常、ウェブサーバーは.shtml、.stm、.shtm、.cgiなどの拡張子を受け入れます。
コンテンツを含めるために使用される指示は「includeディレクティブ」です。includeディレクティブの例を以下に示します。
<!--#include virtual="navigation.cgi" -->
- 上記のディレクティブにより、あるドキュメントのコンテンツを別のドキュメントに含めることができます。
- コード上の「virtual」コマンドは、アプリケーションのドメイン ルートを基準にしてターゲットを指定するために使用されます。
- また、仮想パラメータには、使用できるファイルパラメータもあります。 「file」パラメータは、現在のファイルのディレクトリに対する相対パスを指定する必要がある場合に使用されます。
注意：
virtual パラメータは、含める必要があるファイル (HTML ページ、テキスト ファイル、スクリプトなど) を指定するために使用されます。 Web サーバー プロセスにファイルの読み取りまたはスクリプトの実行へのアクセス権がない場合、include コマンドは失敗します。 「仮想」という単語は、include ディレクティブに含める必要があるキーワードです。
AngularJSにHTMLファイルを組み込む方法
AngularJS ng-include を使用して他の AngularJS ファイルから機能を取り込む機能を提供します。 指令.
「ng-include ディレクティブ」の主な目的は、外部の HTML フラグメントを取得、コンパイルし、メインの AngularJS アプリケーションに含めることです。
バージョンノート： AngularJS 1.x は 2021 年 12 月 31 日に長期サポートを終了し、フレームワークチームは次のように述べています。 AngularJSのサポートが正式に終了しました 2022年1月にリリースされたため、それ以降のリリースやセキュリティパッチはありません。以下のすべての手順とコードブロックは、履歴参照として公開されたとおりのままです。最新のAngularには直接の代替品はありません。マークアップはコンポーネントで構成され、実行時に選択されたフラグメントはレンダリングされます。 ng-container と ngComponentOutlet.
下記のコードベースを見て、AngularJSを使ってこれを実現する方法を説明します。
ステップ1） Table.html というファイルに以下のコードを記述してみましょう。 これは、ng-include ディレクティブを使用してメイン アプリケーション ファイルに挿入されるファイルです。
以下のコードスニペットは、「tutorial」というスコープ変数があることを前提としています。 NGリピート 「tutorial」変数内の各トピックを順に処理し、「Name」と「」の値を表示するディレクティブDescriptイオンのキーと値のペア。
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
ステップ2） Main.htmlというファイルに以下のコードを記述しましょう。これは、以下の要素を備えたシンプルなAngularJSアプリケーションです。
- 「ng-include ディレクティブ」を使用して、外部ファイル「Table.html」にコードを挿入します。 以下のコードでは、このステートメントが太字で強調表示されています。 したがって、 div タグ ' ' 「Table.html」ファイル内のコード全体に置き換えられます。
- コントローラ$scope オブジェクトの一部として「tutorial」という変数が作成されます。この変数には、キーと値のペアのリストが含まれています。
この例では、キーと値のペアは次のとおりです。
- 名前 – これは、コントローラー、モデル、ディレクティブなどのトピックの名前を示します。
- Description – 各トピックの説明を示します
チュートリアル変数には、「Table.html」ファイルからもアクセスできます。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Registration</title>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
</head>
<body ng-app="sampleApp">
<div ng-controller="AngularController">
<h3> Guru99 Global Event</h3>
<div ng-include="'Table.html'"></div>
</div>
<script>
var sampleApp = angular.module('sampleApp',[]);
sampleApp.controller('AngularController', function($scope) {
$scope.tutorial =[
{Name: "Controllers" , Description : "Controllers in action"},
{Name: "Models" , Description : "Models and binding data"},
{Name: "Directives" , Description : "Flexibility of Directives"}
];
});
</script>
</body>
</html>
上記のコードを実行すると、次の出力が得られます。
出力:
以下のキャプチャはレンダリング結果を示しています。ブラウザタブには「イベント登録」というタイトルが表示され、見出しは挿入されたテーブルの上にあり、3つの行はMain.htmlのチュートリアル配列から部分テンプレートを通して描画されています。注釈付きスクリーンショットでは見出しがGur99と表示されていますが、コードでは次のように表示されます。 Guru99.
ng-include 属性: src、onload、autoscroll
ファイル名以外に、このディレクティブは 2 つのオプション属性を受け入れ、次の 3 つの方法で記述できます。任意の要素の属性として、 <ng-include> 要素、またはCSSクラスとして使用できます。以下の参照は公式に準拠しています。 ngInclude のドキュメント.
| 属性 | 必須 | 何それがありません |
|---|---|---|
| src、またはng-include | はい | テンプレートに評価される式 URL |
| オンロード | いいえ | 式は、新しい部分読み込みが完了するたびに評価されます。 |
| 自動スクロール | いいえ | コンテンツの読み込み後に$anchorScrollを呼び出します。属性を省略するとスクロールが無効になります。 |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
最もよくある間違いは、最初の行から始まっている。 src 取る 表現単なる文字列ではありません。したがって、リテラルパスは属性内で独自の引用符で囲む必要があります。そのため、上記の例では次のようになります。 ng-include="'Table.html'"。 書き込み ng-include="Table.html" AngularJS が評価するようにする Table スコーププロパティとして、何も見つからず、要素を空のままにします。
ng-includeが新しい子スコープを作成する理由
このディレクティブは、周囲のスコープにマークアップを貼り付けません。すべてのインクルードは新しい子要素を作成します。 スコープ それは宣言されたスコープからプロトタイプ的に継承し、その事実がほとんどの拘束力のある予期せぬ事態を説明する。
読み取りは期待どおりに機能します。上記の部分的な読み取りは次のようになります。 tutorial 親から直接受け継いだので、 ng-repeat 配列を見つけます。書き込みで問題が発生します。部分的なものがプリミティブに代入される場合、 ng-model="topic"AngularJS は topic 子スコープでは変更されず、親コピーも変更されません。
二つの習慣でその落とし穴を回避しよう。
- オブジェクトを介してバインドする、例:
ng-model="data.topic"それによって、親と子は同じ基準に到達する。 - 状態はコントローラーまたはサービスに保持し、単純なプリミティブではなく関数を公開する。
インクルードは、 $includeContentRequested, $includeContentLoaded (NAIST) と $includeContentError親は、 $scope.$on 子スコープには一切アクセスせずに。
空白または失敗したng-includeを修正する方法
何もレンダリングされないインクルードは、通常、いくつかの理由のいずれかによって失敗します。以下の順序でそれらを検証してください。
- 見積もりを確認してください。 ファイル名をそのまま指定する場合は、属性値の中にシングルクォーテーションが必要です。シングルクォーテーションがないと、式は未定義となり、リクエストは送信されません。
- HTTP経由でページを配信する。 このディレクティブは部分ファイルに対してXHRリクエストを発行するため、ほとんどのブラウザではファイルアドレスを介してMain.htmlをディスクから直接開こうとすると失敗します。ローカルのWebサーバーを使用すればこの問題は解消されます。
- パスが正しく解決されることを確認してください。 ネットワークパネルでリクエストを確認してください。404エラーは、パスがインクルードされているページからの相対パスであり、インクルードされている部分ファイルからの相対パスではないことを意味します。
- 同一原産地規則を尊重してください。 デフォルトではテンプレート URL アプリケーションドキュメントのドメインとプロトコルに一致する必要があります。AngularJS はそれを渡すためです。 $sce.getTrustedResourceUrl他の場所からのテンプレートには、信頼できるリソースへのエントリが必要です。 URL リスト、または明示的な trustAsResourceUrl ラッパーを使用しても、リモート サーバーは CORS ヘッダーを送信する必要があります。
- 失敗の兆候に耳を傾けなさい。 $includeContentError は、レスポンス ステータスが 200 ～ 299 の範囲外になった場合に発生し、何も表示されずに空白のままだった領域をログに記録する価値のあるメッセージに変えます。
もう1つの原因は見落としやすい。AngularJSは取得したすべての部分テンプレートを$templateCacheに保持するため、編集されたファイルはキャッシュエントリが削除されるか、ページがソースから再読み込みされるまで古いマークアップを提供し続ける可能性がある。フラグメントがマークアップだけでなく独自の動作を必要とする場合、 カスタムディレクティブ 独自のテンプレートと分離されたスコープを備えたツールの方が優れている。
