1.在HTML中包含HTML文件:在HTML中,目前还不支持包含HTML文件的功能;
2.服务端包含:大多数服务端脚本都支持文件功能(SSI),使用SSI,你可以在HTML中包含HTML文件,并发送到客户端浏览器:
<?php require("navigation.php");?>
3.客户端包含HTML:
**通过javascript有很多种方式可以在HTML中包含HTML文件;
**通常我们使用http请求(AJAX)从服务端获取数据,返回的数据我们可以通过使用innerHTML写入到HTML元素中
<body ng-app="">
<div ng-include=" 'runoob.htm' ">
</body>
4.包含AngularJS代码:ng-include指令除了可以包含HTML文件外,还可以包含AngularJS代码;
<div ng-app="myApp" ng-controller="siteCtrl">
<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>
5.跨域包含:默认情况下,ng-include指令不允许包含其他域的文件;如果你需要访问其他域名的文件,需要设置域名访问白名单;
<body ng-app="myApp">
<div ng-include=" 'http://c.runoob.com/runoobtest/angular_include.php' "></div>
<script>
var app=angular.module('myApp',[]);
app.config(function($sceDelegateProvider){
$sceDelegateProvider.resourceUrlWhitelist([
'http://c.runoob.com/runoobtest/**'
]);
});
</script>
</body>
6.需要设置服务端允许跨域访问,设置:
<?php
header('Access-Control-Allow-Origin:*'); //允许所有域名访问
echo '<b style="color:red">我是跨域的内容</b>';
?>