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 ...
随机推荐
- Maven实战1
屏上得来终觉浅,绝知此事要躬行 总结: p.p1 { margin: 0.0px 0.0px 0.0px 0.0px; font: 12.0px ".PingFang SC"; c ...
- 说下browserslist
browserslist 是一个开源项目 见到有些package.json里会有如下的配置参数 "browserslist": [ "> 1%", &qu ...
- Integer的自动拆箱
public class Test2{ public static void main(String[] args){ Integer a=1; Integer b=2; Integer c=3; I ...
- (一) .net core 2.0 初体验
1..net core 2.0环境 .net core 下载地址:https://www.microsoft.com/net/core#windowscmd 问题一:提示[Failed to load ...
- 51 nod 1624 取余最长路 思路：前缀和 + STL（set）二分查找
题目: 写这题花了我一上午时间. 下面是本人(zhangjiuding)的思考过程: 首先想到的是三行,每一行一定要走到. 大概是这样一张图 每一行长度最少为1.即第一行(i -1) >= 1, ...
- pygame_第一个窗口程序
####可以使用python自带的IDLE交互式开发,也可以借助其他的编辑器,我这里采用的pycharm编辑器 1.导入我们所需要的模块 import pygame,sys --导入我们需要的模块 ...
- Nexus 私有仓库搭建与 Maven 集成
Nexus 私有仓库搭建与 Maven 集成 |作者:RexFang |出处:http://www.cnblogs.com/rexfang/ |关于作者:Java 程序员一枚 |版权:本文版权归作者和 ...
- windows无法启动MySQL服务 错误1067
启动wampmysqld 出现 1067 错误 解决方法:删除在MySQL安装目录下的Data目录中的ib_logfile0和ib_logfile1这两个文件. 重新启动MySQL服务
- 翻译 | 关键CSS和Webpack: 减少阻塞渲染的CSS的自动化解决方案
原文地址: Critical CSS and Webpack: Automatically Minimize Render-Blocking CSS 原文作者: Anthony Gore 译者: 蜗牛 ...
- JAVA提高一：静态导入、可变参数、增强型for循环、装拆箱
国庆假期已结束,假期8天,全部在家带娃,体会到了妻子的不容易,需要好好努力来多赚钱了,言归正传.10月份开始进去JAVA 高级语法知识学习,本节复习学习的为:静态导入.可变参数.增强型for循环.装拆 ...