在 AngularJS 中，你可以在 HTML 中包含 HTML 檔案。
在 HTML 中，目前還不支援包含 HTML 檔案的功能。
大多服務端腳本都支援包含檔案功能 (SSI： Server Side Includes)。
使用 SSI, 你可在 HTML 中包含 HTML 檔案，并發送到用戶端浏覽器。
<?php require("navigation.php"); ?>
通過 JavaScript 有很多種方式可以在 HTML 中包含 HTML 檔案。
通常我們使用 http 請求 (AJAX) 從服務端擷取資料，傳回的資料我們可以通過
使用 innerHTML 寫入到 HTML 元素中。
使用 AngularJS, 你可以使用 ng-include
指令來包含 HTML 内容:
<body ng-app="">
<div ng-include="'runoob.htm'"></div>
</body>
步驟如下：
<h1>菜鳥教程</h1>
<p>這是一個被包含的 HTML 頁面，使用 ng-include 指令來實作！</p>
ng-include 指令除了可以包含 HTML 檔案外，還可以包含 AngularJS 代碼:
<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 指令不允許包含其他域名的檔案。
如果你需要包含其他域名的檔案，你需要設定域名通路白名單：
<body ng-app="myApp">
<div ng-include="'https://c.runoob.com/runoobtest/angular_include.php'"></div>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'https://c.runoob.com/runoobtest/**'
]);
此外，你還需要設定服務端允許跨域通路，設定方法可參考：PHP Ajax 跨域問題最佳解決方案。
<?php
// 允許所有域名可以通路
header('Access-Control-Allow-Origin:*');
echo '<b style="color:red">我是跨域的内容</b>';
?>