AngularJS学习篇（二十）
AngularJS 包含
在 AngularJS 中，你可以在 HTML 中包含 HTML 文件。
使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容:
<body ng-app=""> <div ng-include="'test.htm'"></div> </body>
test.htm 文件代码：
<h1>菜鸟教程</h1>
<p>这是一个被包含的 HTML 页面，使用 ng-include 指令来实现！</p>
ng-include 指令除了可以包含 HTML 文件外，还可以包含 AngularJS 代码:
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body> <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> <p>AngularJS 代码包含在 "sites.htm" 文件中。</p> </body>
</html>
sites.htm 文件代码：
<table>
<tr ng-repeat="x in names">
<td>{{ x.Name }}</td>
<td>{{ x.Url }}</td>
</tr>
</table>
跨域包含
默认情况下， ng-include 指令不允许包含其他域名的文件。
如果你需要包含其他域名的文件，你需要设置域名访问白名单：
<!DOCTYPE html>
<html>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
<body ng-app="myApp"> <div ng-include="'http://c.runoob.com/runoobtest/angular_include.php'"></div> <script>
var app = angular.module('myApp', [])
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'http://c.runoob.com/runoobtest/**'
]);
});
</script>
<p>你需要设置服务端允许跨域访问，设置方法可参考 <a target="_blank" href="/w3cnote/php-ajax-cross-border.html">PHP Ajax 跨域问题最佳解决方案</a>。
</body>
</html>
此外，你还需要设置服务端允许跨域访问，设置方法可参考：PHP Ajax 跨域问题最佳解决方案。
<?php
// 允许所有域名可以访问
header('Access-Control-Allow-Origin:*'); echo '<b style="color:red">我是跨域的内容</b>';
?>
AngularJS学习篇（二十）的更多相关文章
- AngularJS学习篇（十二）
AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...
- AngularJS学习篇（十九）
AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...
- AngularJS学习篇（十八）
AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...
- AngularJS学习篇（十六）
AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...
- AngularJS学习篇（十五）
AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular. ...
- AngularJS学习篇（十四）
AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...
- AngularJS学习篇（十）
AngularJS Select(选择框) 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如 ...
- python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法
python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...
- 深度学习（二十六）Network In Network学习笔记
深度学习(二十六)Network In Network学习笔记 Network In Network学习笔记 原文地址:http://blog.csdn.net/hjimce/article/deta ...
- python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码
python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...
随机推荐
- Java钉钉开发_01_开发前的准备
源码已上传GitHub:传送门 一.准备事项 1.1 一个能在公网上访问的项目: 参见:Java微信开发_02_本地服务器映射外网 1.2 一个钉钉账号 去注册 1.3 创建一个应用 登录钉钉后台 ...
- tomcat manager 的用户权限配置，及环境变量CATALINA_HOME的错位问题
因为tomcat的manager是管理其他项目的发布.删除等操作的管理项目,所以需要为其设置登陆用户和密码,以及用户相应的访问权限,配置如下: tomcat-users.xml需要添加如下内容: &l ...
- Corn Fields poj3254(状态压缩DP）
Corn Fields Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 6081 Accepted: 3226 Descr ...
- Docker入门之五数据管理
在Docker使用过程中,需要对数据进行持久化或需要在多个容器之间进行数据共享,就会涉及容器的数据管理操作.主要有两种方式:1.数据卷 2.数据卷容器. 一.数据卷 数据卷是一个可供容器使用的特殊目录 ...
- Struts201---环境搭配
开发工具:Eclipse Struts版本:2.3.24 最近在学SSH框架,SSH是 struts+spring+hibernate的一个集成框架,是目前比较流行的一种Web应用程序开源框架.集 ...
- android中跨线程向控件传值的问题
activity.oncreate(bundle savedinstancestate)中创建一个handler类的实例, 在这个handler实例的handlemessage回调函数中调用更新界面显 ...
- Java面向对象 线程技术 -- 下篇
Java面向对象 线程技术 -- 下篇 知识概要: (1)线程间的通信 生产者 - 消费者 (2)生产者消费者案例优化 (3)守护线程 (4)停止线 ...
- c# 图片转二进制/字符串 二进制/字符串反转成图片
protected void Button1_Click(object sender, EventArgs e) { //图片转二进制 byte[] imageByte = GetPictureDat ...
- WPF DataGrid自定义样式
微软的WPF DataGrid中有很多的属性和样式,你可以调整,以寻找合适的(如果你是一名设计师).下面,找到我的小抄造型的网格.它不是100%全面,但它可以让你走得很远,有一些非常有用的技巧和陷阱. ...
- springboot kafka集成(实现producer和consumer)
本文介绍如何在springboot项目中集成kafka收发message. 1.先解决依赖 springboot相关的依赖我们就不提了,和kafka相关的只依赖一个spring-kafka集成包 &l ...