AngularJS の ng-include: HTML ファイルをインクルードする方法 [例]

デフォルトでは、HTML には他のファイルからクライアント側のコードを組み込む機能がありません。通常、プログラミング言語においては、アプリケーションのさまざまなファイルに機能を分散することが推奨されます。

たとえば、数値演算のロジックがある場合、通常はその機能を 1 つの別のファイルに定義する必要があります。その別のファイルは、そのファイルをインクルードするだけで、複数のアプリケーションで再利用できます。

通常、これは次のような概念です インクルードステートメント .Netなどのプログラミング言語で利用可能であり、 Java.

このチュートリアルでは、ファイル (外部 HTML コードを含むファイル) をメイン HTML ファイルに含める他の方法を説明します。

クライアント側には以下が含まれます

最も一般的な方法の1つは、HTMLコードを含めることです。 Javascript. Javaスクリプトは、HTMLページのコンテンツをその場で操作できるプログラミング言語です。したがって、 Javascript 他のファイルからのコードを組み込むためにも使用できます。

以下の手順は、これを実現する方法を示しています。

ステップ1） Sub.html というファイルを定義し、そのファイルに次のコードを追加します。

<div>
	This is an included file
</div>

ステップ2） メインアプリケーションファイルである Sample.html というファイルを作成し、以下のコードスニペットを追加します。

以下のコードに関して注意すべき主な点は次のとおりです。

bodyタグ内に、ContentというIDを持つdivタグがあります。これは、外部ファイル「Sub.html」のコードが挿入される場所です。
jQueryスクリプトへの参照があります。jQueryは、 Javascript これにより、DOM 操作がさらに簡単になります。
Javascript 関数には、'$(“#Content”).load(“Sub.html”);' というステートメントがあり、これにより、Sub.html ファイル内のコードが、Content の id を持つ div タグに挿入されます。
```
<html> 
	  <head> 
	    <script src="jquery.js"></script> 
	    <script> 
	    $(function(){
	      $("#Content").load("Sub.html"); 
	    });
    </script> 
  </head> 

<body> 
     <div id="Content"></div>
  </body> 
</html>
```

サーバー側インクルード

サーバーサイドインクルードは、サイト全体に共通のコード部分を含めるためにも使用できます。これは通常、HTML ドキュメントの以下の部分にコンテンツを含めるために行われます。

ページヘッダー
ページフッター
ナビゲーションメニュー。

Web サーバーがサーバーサイドインクルードを認識できるように、ファイル名には特別な拡張子が付けられます。これらは通常、 .shtml、.stm、.shtm 、 .cgi などの Web サーバーによって受け入れられます。

コンテンツをインクルードするために使用されるディレクティブが「include ディレクティブ」です。 include ディレクティブの例を以下に示します。

<!--#include virtual="navigation.cgi" -->

上記のディレクティブにより、あるドキュメントのコンテンツを別のドキュメントに含めることができます。
コード上の「virtual」コマンドは、アプリケーションのドメインルートを基準にしてターゲットを指定するために使用されます。
また、仮想パラメータには、使用できるファイルパラメータもあります。「file」パラメータは、現在のファイルのディレクトリに対する相対パスを指定する必要がある場合に使用されます。

注記：

virtual パラメータは、含める必要があるファイル (HTML ページ、テキストファイル、スクリプトなど) を指定するために使用されます。 Web サーバープロセスにファイルの読み取りまたはスクリプトの実行へのアクセス権がない場合、include コマンドは失敗します。「仮想」という単語は、include ディレクティブに含める必要があるキーワードです。

AngularJSにHTMLファイルを組み込む方法

Angular は、ng-include ディレクティブを使用して、他の AngularJS ファイルの機能をインクルードする機能を提供します。

「ng-include ディレクティブ」の主な目的は、外部 HTML フラグメントを取得、コンパイルし、メインの AngularJS アプリケーションに含めることに使用されます。

以下のコードベースを見て、Angular を使用してこれを実現する方法を説明しましょう。

ステップ1） Table.html というファイルに以下のコードを記述してみましょう。これは、ng-include ディレクティブを使用してメインアプリケーションファイルに挿入されるファイルです。

以下のコードスニペットは、「tutorial」というスコープ変数があることを前提としています。次に、ng-repeat ディレクティブを使用します。これは、「Tutorial」変数内の各トピックを調べて、「name」と「description」のキーと値のペアの値を表示します。

<table>
    <tr ng-repeat="Topic in tutorial">
        <td>{{ Topic.Name }}</td>
        <td>{{ Topic.Country }}</td>
    </tr>
</table>

ステップ2） Main.htmlというファイルに以下のコードを書いてみましょう。これは次のような特徴を持つシンプルなAngular.JSアプリケーションです。

「ng-include ディレクティブ」を使用して、外部ファイル「Table.html」にコードを挿入します。以下のコードでは、このステートメントが太字で強調表示されています。したがって、 div タグ ' ' 「Table.html」ファイル内のコード全体に置き換えられます。
コントローラーでは、「チュートリアル」変数が $scope オブジェクトの一部として作成されます。この変数には、キーと値のペアのリストが含まれています。

この例では、キーと値のペアは次のとおりです。

名前 – これは、コントローラー、モデル、ディレクティブなどのトピックの名前を示します。
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>

上記のコードを実行すると、次の出力が得られます。

出力:

まとめ

デフォルトでは、HTML には他のファイルの HTML コンテンツを直接組み込む方法が提供されていないことがわかっています。プログラミング言語.
Javascript JQuery と併用すると、他のファイルから HTML コンテンツを埋め込むための最適なオプションになります。
含める別の方法 HTML 他のファイルのコンテンツは、ディレクティブと仮想パラメータのキーワード。 virtual パラメータキーワードは、埋め込む必要があるファイルを示すために使用されます。これはサーバー側インクルードとして知られています。
Angular は、ng-include ディレクティブを使用してファイルをインクルードする機能も提供します。このディレクティブを使用すると、外部ファイルからメインの HTML ファイルにコードを直接挿入できます。

よろしければ：

クライアント側には以下が含まれます

関連記事

サーバー側インクルード

AngularJSにHTMLファイルを組み込む方法

まとめ