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学习篇（二十）的更多相关文章

  1. AngularJS学习篇（十二）

    AngularJS SQL ASP.NET 中执行 SQL 获取数据 <!DOCTYPE html> <html> <head> <meta charset= ...

  2. AngularJS学习篇（十九）

    AngularJS Bootstrap 可以在你的 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: <link r ...

  3. AngularJS学习篇（十八）

    AngularJS API AngularJS 全局 API 用于执行常见任务的 JavaScript 函数集合,如: 比较对象 迭代对象 转换对象 全局 API 函数使用 angular 对象进行访 ...

  4. AngularJS学习篇（十六）

    AngularJS 表单 HTML 控件 以下 HTML input 元素被称为 HTML 控件: input 元素 select 元素 button 元素 textarea 元素 HTML 表单 H ...

  5. AngularJS学习篇（十五）

    AngularJS 模块 模块定义了一个应用程序. 模块是应用程序中不同部分的容器. 模块是应用控制器的容器. 控制器通常属于一个模块. 创建模块 你可以通过 AngularJS 的 angular. ...

  6. AngularJS学习篇（十四）

    AngularJS 事件 ng-click 指令 ng-click 指令定义了 AngularJS 点击事件. <!DOCTYPE html> <html> <head& ...

  7. AngularJS学习篇（十）

    AngularJS Select(选择框) 使用 ng-options 创建选择框 在 AngularJS 中我们可以使用 ng-option 指令来创建一个下拉列表,列表项通过对象和数组循环输出,如 ...

  8. python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法

    python3.4学习笔记(二十四) Python pycharm window安装redis MySQL-python相关方法window安装redis,下载Redis的压缩包https://git ...

  9. 深度学习（二十六）Network In Network学习笔记

    深度学习(二十六)Network In Network学习笔记 Network In Network学习笔记 原文地址:http://blog.csdn.net/hjimce/article/deta ...

  10. python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码

    python3.4学习笔记(二十六) Python 输出json到文件,让json.dumps输出中文 实例代码 python的json.dumps方法默认会输出成这种格式"\u535a\u ...

随机推荐

  1. ThinkPHP中：RBAC权限控制的实习步骤

    使用版本ThinkPHP3.1.3 第一步,建表及数据 第二步,建关联模型 第三步,控制器使用关联模型.配置文件 第四步,模板显示数据 第一步,建表及数据 在数据库中,建立一个companysvn数据 ...

  2. 在JavaScript中使用json.js：Ajax项目之POST请求（异步）

    经常在百度搜索框输入一部分关键词后,弹出候选关键热词.现在我们就用Ajax技术来实现这一功能. 一.下载json.js文件 百度搜一下,最好到json官网下载,安全起见. 并与新建的两个文件部署如图 ...

  3. Beauty Contest 凸包+旋转卡壳法

    Beauty Contest Time Limit: 3000MS   Memory Limit: 65536K Total Submissions: 27507   Accepted: 8493 D ...

  4. uva11401

    题目大意:计算从1,2,3,...,n中选出3个不同的整数,使得以它们为边长可以构成三角形的个数. 思路:用一般的方法需要三重循环,时间复杂度为O(n^3),肯定超时,因此可用数学的方法对问题进行分析 ...

  5. 使用python操作mysql

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/7643047.html 作者:窗户 Q ...

  6. mysql-5.7.17-winx64解压版本安装图解附带一些常见问题

    第一步:下载mysql-5.7.17-winx64解压版本:http://dev.mysql.com/downloads/mysql/ 第二步:解压到安装目录,如:D:\MySql\mysql-5.7 ...

  7. 和团队齐头并进——敏捷软件开发的Scrum的学习

    敏捷开发的介绍 概念 更强调程序员团队与业务专家之间的紧密协作.面对面的沟通(认为比书面的文档更有效).频繁交付新的软件版本.紧凑而自我组织型的团队.能够很好地适应需求变化的代码编写和团队组织方法,也 ...

  8. SQLServer中重建聚集索引之后会影响到非聚集索引的索引碎片吗

    本文出处:http://www.cnblogs.com/wy123/p/7650215.html (保留出处并非什么原创作品权利,本人拙作还远远达不到,仅仅是为了链接到原文,因为后续对可能存在的一些错 ...

  9. 从头编写 asp.net core 2.0 web api 基础框架 (3)

    第一部分:http://www.cnblogs.com/cgzl/p/7637250.html 第二部分:http://www.cnblogs.com/cgzl/p/7640077.html 之前我介 ...

  10. ASP.NET没有魔法——ASP.NET MVC 与数据库之MySQL

    之前介绍了My Blog如何使用ADO.NET来访问SQL Server获取数据.本章将介绍如何使用My SQL来完成数据管理. 在使用My SQL之前需确保开发环境中安装了My SQL数据库和Con ...