ylbtech-AngularJS：包含
1.返回顶部
1、

AngularJS 包含

在 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="'runoob.htm'"></div>

</body>

尝试一下 »

步骤如下：

runoob.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 代码，它将被正常执行：

sites.htm 文件代码：

<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="'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>

</body>

尝试一下 »

此外，你还需要设置服务端允许跨域访问，设置方法可参考：PHP Ajax 跨域问题最佳解决方案。

angular_include.php 文件代码：

<?php

// 允许所有域名可以访问

header('Access-Control-Allow-Origin:*');

echo '<b style="color:red">我是跨域的内容</b>';

?>
2、
2.返回顶部
 
3.返回顶部
 
4.返回顶部
 
5.返回顶部
1、
2、 
6.返回顶部
 
作者：ylbtech
出处：http://ylbtech.cnblogs.com/
本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

AngularJS：包含的更多相关文章

  1. 【18】AngularJS 包含

    AngularJS 包含 在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中包含 HTML 文件 在 HTML 中,目前还不支持包含 HTML 文件的功能. 服 ...

  2. AngularJS 包含

    在 AngularJS 中,你可以在 HTML 中包含 HTML 文件. 在 HTML 中,目前还不支持包含 HTML 文件的功能. 大多服务端脚本都支持包含文件功能 (SSI: Server Sid ...

  3. AngularJS包含

    1.在HTML中包含HTML文件:在HTML中,目前还不支持包含HTML文件的功能: 2.服务端包含:大多数服务端脚本都支持文件功能(SSI),使用SSI,你可以在HTML中包含HTML文件,并发送到 ...

  4. AngularJS 包含HTML文件

    类似于python tornado的include方法,同样是可以在一个html文件中加载另外一个html文件,这样可以不用重复的写一些几乎不改变的代码. 首先创建两个文件,然后代码如下: <! ...

  5. AngularJS(13)-包含

    AngularJS 包含 使用 AngularJS, 你可以使用 ng-include 指令来包含 HTML 内容: 实例 <body> <div class="conta ...

  6. AngularJs之九（ending......)

    今天继续angularJs,但也是最后一篇关于它的了,基础部分差不多也就这些,后续有机会再写它的提升部分. 今天要写的也是一个基础的选择列表: 一:使用ng-options,数组进行循环. <d ...

  7. AngularJS Bootstrap

    AngularJS 的首选样式表是 Bootstrap. 可以在 AngularJS 应用中加入 Twitter Bootstrap,你可以在你的 <head>元素中添加如下代码: < ...

  8. Atitit Server Side Include  ssi服务端包含规范 csi  esi

    Atitit Server Side Include  ssi服务端包含规范 csi  esi 一.CSI (Client Side Includes)  1 1.1. 客户端包含1 1.2. Ang ...

  9. 3.1将AngularJS放入上下文

    本章,作者将AngularJS放在全球web app开发的上下文里,并为后面的章节设置功能.AngularJS的目标,是带来一款工具,它有服务端开发web client的能力,并易于开发,测试,富.复 ...

随机推荐

  1. 记Outlook插件与Web页面交互的各种坑 (含c# HttpWebRequest 连接https 的完美解决方法)

    1) 方案一,  使用Web Service  基础功能没问题, 只是在连接https (ssh) 网站时, 需要针对https进行开发 (即http 和https 生成两套接口, 不太容易统一 ). ...

  2. C++中substr的用法

    C++中substr函数的用法 #include<string> #include<iostream> using namespace std; void main() { s ...

  3. 集成Spring web.xml配置总结

    1.web.xml 的加载顺序是:ServletContext -> context-param -> listener -> filter -> servlet 1.serv ...

  4. 字符在内存中最终的表示形式是什么？是某种字符编码还是码位(Code Point)？

    字符在内存中最终的表示形式是什么?是某种字符编码还是码位(Code Point)? 根据我的了解,编码中有三个核心概念:1. 字符集(Character Set),可以说是一个抽象概念,字符的合集2. ...

  5. 一个最简单的JMeter测试流程

    环境:     JMeter   3.3 JDK 1.8 首先下载JMeter安装包  可以去官网下载. http://jmeter.apache.org/ 然后选择Download Windows系 ...

  6. Keystone Federation Identity

    转自 http://wsfdl.com/openstack/2016/01/14/Keystone-Federation-Identity.html Keystone federation ident ...

  7. [JSOI2016]灯塔

    Description $JSOI$的国境线上有$N$一座连续的山峰,其中第$i$座的高度是$h_i$​​.为了简单起见,我们认为这$N$座山峰排成了连续一条直线. 如果在第$i$座山峰上建立一座高度 ...

  8. review41

    套接字是基于TCP协议的网络通信. 基于UDP

  9. java.net.SocketException: No buffer space available 异常

    http://stackoverflow.com/questions/10088363/java-net-socketexception-no-buffer-space-available-maxim ...

  10. Python正则表达式之 - ?: / ?= / ?!

    Python正则表达式之 - ?: / ?= / ?! 用圆括号将所有选择项括起来,相邻的选择项之间用|分隔.但用圆括号会有一个副作用,使相关的匹配会被缓存,此时可用?:放在第一个选项前来消除这种副作 ...