AngularJS 两种包含方式

服务端包含
大多服务端脚本都支持包含文件功能 (SSI: Server Side Includes)。

使用 SSI, 你可在 HTML 中包含 HTML 文件,并发送到客户端浏览器。

PHP 实例
<?php require("navigation.php"); ?>
客户端包含
通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。

通常我们使用 http 请求 (AJAX) 从服务端获取数据,返回的数据我们可以通过 使用 innerHTML 写入到 HTML 元素中。

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

sites.htm 文件代码:
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>
包含的文件 "sites.htm" 中有 AngularJS 代码,它将被正常执行:

实例
<div ng-app="myApp" ng-controller="sitesCtrl">
<div ng-include="'sites.htm'">www.dgtais.cn</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>

posted @ 2020-10-22 17:55  学无边涯  阅读(92)  评论(0编辑  收藏  举报