假设你有一个主要的 HTML 文件(index.html)和一个要包含的 HTML 文件(includedContent.html):
1. index.html:
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<title>AngularJS Include</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
</head>
<body ng-controller="myCtrl">
<h2>主要内容</h2>
<!-- 使用 ng-include 包含外部 HTML 文件的内容 -->
<div ng-include="'includedContent.html'"></div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function ($scope) {
// 控制器的逻辑
});
</script>
</body>
</html>
2. includedContent.html:
<h3>被包含的内容</h3>
<p>这是一个被包含的 HTML 文件的内容。</p>
在这个例子中,ng-include 指令用于包含 includedContent.html 文件的内容。注意,路径可以是相对路径或绝对路径,具体取决于你的项目结构。
确保在你的项目中正确引入 AngularJS 库,并适时使用控制器(ng-controller)来控制页面上的逻辑。这个例子中,我们简单地创建了一个 AngularJS 应用并在主页面中使用了 ng-include 来包含外部 HTML 文件的内容。
请注意,由于 AngularJS 已经进入维护模式,建议考虑使用现代的 Angular 版本或其他前端框架。
转载请注明出处:http://www.zyzy.cn/article/detail/4872/Angular