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. 堆栈在linux内存中的使用

    链接:https://www.zhihu.com/question/57013926/answer/151506606 1.Linux 内核中使用 task_struct 作为进程描述符,该结构定义在 ...

  2. Nginx location指令匹配顺序规则

    location匹配命令 1. “= ”,字面精确匹配, 如果匹配,则跳出匹配过程.(不再进行正则匹配) 2. “^~ ”,最大前缀匹配,如果匹配,则跳出匹配过程.(不再进行正则匹配) 3. 不带任何 ...

  3. c#.NET中日志信息写入Windows日志中解决方案

    1. 目的应用系统的开发和维护离不开日志系统,选择一个功能强大的日志系统解决方案是应用系统开发过程中很重要的一部分.在.net环境下的日志系统解决方案有许多种,log4net是其中的佼佼者.在Wind ...

  4. 简学Python第五章__模块介绍，常用内置模块

    Python第五章__模块介绍,常用内置模块 欢迎加入Linux_Python学习群  群号:478616847 目录: 模块与导入介绍 包的介绍 time &datetime模块 rando ...

  5. python常见的PEP8规范

    1. 括号中使用垂直隐式缩进或使用悬挂缩进 缩进 每级缩进用4个空格 示例: (垂直隐式缩进)对准左括号 def function_name(var_one,var_two, var_three,va ...

  6. xenapi-add-support-for-vgpu

    Model types 为了在vm中支持vgpu,问题在于vgpu是否应该被当作一个PCI设备, 虽然物理GPU不是一个SR-IOV设备,但vgpu却是以一个类似SR-IOV device上的VF赋给 ...

  7. libvirt/qemu特性之numa

    博客地址:http://blog.csdn.net/halcyonbaby 内容系本人学习.研究和总结,如有雷同,实属荣幸! Numa 查看主机node情况 使用virsh命令查看 virsh # c ...

  8. Ubuntu 中查看内核版本和系统版本的四个命令

    一.查看内核版本:cat /proc/version 二.查看内核版本:uname -a 三.查看系统版本:lsb_release -a 四.查看发行版类型:cat /etc/issue

  9. svg札记

    1.人老了,有些事情太容易忘记了,这里做下笔记,供参考,for self for you. 2.源于地图监控,建筑级别各大地图商的api(高德.百度.腾讯等)已经足够使用,唯独室内图这块还差点. 3. ...

  10. CSS3 之 RGBa 可透明颜色

    在 CSS3 中,增加了一个 opacity 属性,允许开发者设置元素的透明度,现在 opacity 已被主流的现代浏览器支持,但 opacity 会把被设置的元素及其子元素同时设置为同一个透明度,这 ...