AngularJS インクルード
AngularJS では、HTML ファイルを HTML に含めることができます。
HTML ファイルを HTML に含める
HTML では、現時点では HTML ファイルを含める機能はサポートされていません。
サーバーサイドインクルード
ほとんどのサーバーサイドスクリプトはファイルインクルード機能に対応しています（SSI： Server Side Includes)。
SSI を使用すると、HTML ファイルを HTML に含めて、クライアントブラウザに送信できます。
PHP の例
<?php require("navigation.php"); ?>
クライアントサイドインクルード
JavaScript を使用すると、HTML ファイルを HTML に含める方法は多数あります。
通常、HTTP リクエスト（AJAX）を使用してサーバーからデータを取得します。返されたデータは、 を使用してinnerHTMLHTML 要素に書き込むことができます。
AngularJS インクルード
AngularJS を使用すると、ng-includeディレクティブを使用して HTML コンテンツを含めることができます:
手順は次のとおりです。
サンプル.htm ファイルのコード：
<h1>サンプル</h1>
<p>これは、ng-include ディレクティブを使用して実装された、インクルードされる HTML ページです。</p>
AngularJS コードを含める
ng-include ディレクティブは、HTML ファイルを含めるだけでなく、AngularJS コードも含めることができます:
sites.htm ファイルのコード：
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>
インクルードされるファイル "sites.php" には AngularJS コードが含まれており、それが正常に実行されます：
例
<div ng-app="myApp" ng-controller="sitesCtrl">
<div ng-include="'sites.htm'"></div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('sitesCtrl', function($scope, $http) {
$http.get("sites.php").then(function (response) {
$scope.names = response.data.records;
});
});
</script>
試してみる »
クロスドメインインクルード
デフォルトでは、ng-include ディレクティブは他のドメインのファイルを含めることを許可しません。
他のドメインのファイルを含める必要がある場合は、ドメインアクセスのホワイトリストを設定する必要があります：
sites.htm ファイルのコード：
<body ng-app="myApp">
<div ng-include="'https://c.example.com/サンプルtest/angular_include.php'"></div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'https://c.example.com/サンプルtest/**'
]);
});
</script>
</body>
試してみる »
さらに、サーバー側でクロスドメインアクセスを許可する設定も必要です。設定方法は以下を参照してください：PHP Ajax クロスドメイン問題の最適な解決策。
angular_include.php ファイルのコード：
//すべてのドメインからのアクセスを許可
header('Access-Control-Allow-Origin:*');
echo '<b style="color:red">私はクロスドメインのコンテンツです</b>';