HTML不支持在html中嵌入html页面, 这就是我们使用AngularJS Include指令的原因。通过使用ng-controller指令, 我们可以轻松地完成任务。
语法如下：
<element ng-include=" ">content...<element>例子：
<!DOCTYPE html>
<html>
<head>
<script src=
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
</script>
<title>ng-include directives</title>
</head>
<body ng-app= "" >
<center>
<h1 style= "color:green;" >lsbin</h1>
<div ng-include= "'geeks.html'" ></div>
</center>
</body>
</html>输出如下：
包括AngularJS代码：
与以前的情况类似, 你可以使用ng-include包含html文件, 类似地, 它可以包含AngularJS代码。
例子：
lsbin.html表：
< table >
< tr ng-repeat = "x in courses" >
< td >{{ x.Course }}</ td >
< td >{{ x.Duration }}</ td >
</ tr >
</ table >代码如下：
<!DOCTYPE html>
< html >
< head >
< script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
</ script >
</ head >
< body >
< div ng-app = "geeks" ng-controller = "customersCtrl" >
< div ng-include = "'Geekstable.html'" ></ div >
</ div >
< script >
var app = angular.module('geeks', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("customers.php").then(function (response) {
$scope.courses = response.data.records;
});
});
</ script >
</ body >
</ html >输出如下：
包括跨域：
如果要包括来自其他域的文件, 则可以在应用程序的config功能中添加合法文件或域的白名单。
样例代码：
<!DOCTYPE html>
< html >
< script src =
"https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js" >
</ script >
< body ng-app = "myApp" >
< div ng-include = "'filel_path_from_anotherDomain'" ></ div >
< script >
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist(['filel_path_from_anotherDomain']);
});
</ script >
</ body >
</ html >
