AngularJS 包含详解及示例

作者 : 慕源网 本文共1483个字,预计阅读时间需要4分钟 发布时间: 2022-05-2 共83人阅读

AngularJS 包含,HTML不支持在HTML中嵌入HTML页面,这就是我们使用AngularJS ng-include指令的原因。通过使用NG-Controller指令,我们可以轻松在 AngularJS 的 HTML 中包含 HTML 文件。

语法:

<element ng-include=" ">内容...<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;">GeeksforGeeks</h1>
		<div ng-include="'geeks.html'"></div>
	</center>
</body>
</html>

输出:

AngularJS 包含详解及示例

包含 AngularJS 代码:

ng-include 指令除了可以包含 HTML 文件外,还可以包含 AngularJS 代码:

例子:

GeeksforGeeks.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>

输出:

AngularJS 包含详解及示例
包含跨域:

如果您想包含来自另一个域的文件,则可以在应用程序的配置功能中添加合法文件或域的白名单。

示例代码:

<!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>

慕源网 » AngularJS 包含详解及示例

常见问题FAQ

程序仅供学习研究,请勿用于非法用途,不得违反国家法律,否则后果自负,一切法律责任与本站无关。
请仔细阅读以上条款再购买,拍下即代表同意条款并遵守约定,谢谢大家支持理解!

发表评论

开通VIP 享更多特权,建议使用QQ登录