| 在 AngularJS 中，你可以在 HTML 中包含 HTML 文件。 在 HTML 中包含 HTML 文件在 HTML 中，目前还不支持包含 HTML 文件的功能。 服务端包含大多服务端脚本都支持包含文件功能 (SSI： Server Side Includes)。 使用 SSI, 你可在 HTML 中包含 HTML 文件，并发送到客户端浏览器。 PHP 实例<?php require("navigation.php"); ?> 客户端包含通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。 通常我们使用 http 请求 (AJAX) 从服务端获取数据，返回的数据我们可以通过使用 innerHTML 写入到 HTML 元素中。 AngularJS 包含使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: 实例<body ng-app=""> <div ng-include="'codercto.htm'"></div> </body> 步骤如下：
codercto.htm 文件代码：<h1>码农教程</h1><p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p> 包含 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'"></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> 跨域包含默认情况下， ng-include 指令不允许包含其他域名的文件。 如果你需要包含其他域名的文件，你需要设置域名访问白名单： sites.htm 文件代码：<body ng-app="myApp"> <div ng-include="'https://c.codercto.com/coderctotest/angular_include.php'"></div> <script>var app = angular.module('myApp', [])app.config(function($sceDelegateProvider) { $sceDelegateProvider.resourceUrlWhitelist([ 'https://c.codercto.com/coderctotest/**' ]);});</script> </body> 此外，你还需要设置服务端允许跨域访问，设置方法可参考：PHP Ajax 跨域问题最佳解决方案。 angular_include.php 文件代码：<?phpheader('Access-Control-Allow-Origin:*'); echo '<b style="color:red">我是跨域的内容</b>';?>
下载地址:
AngularJS 动画
AngularJS Bootstrap |
