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. SpringCloud Bus消息总线

    在微服务架构中,通常会使用轻量级的消息代理来构建一个共用的消息主题来连接各个微服务实例,它广播的消息会被所有在注册中心的微服务实例监听和消费,也称消息总线. SpringCloud中也有对应的解决方案 ...

  2. web.xml里报错:Multiple annotations found at this line:

    在web.xml 中添加错误页面配置,出现了这个报错 具体情况是这样的: 错误信息: Multiple annotations found at this line: - cvc-complex-ty ...

  3. Java C++ 比较 – 虚函数、抽象函数、抽象类、接口

    [转自]原文 Java – 虚函数.抽象函数.抽象类.接口 1. Java虚函数 虚函数的存在是为了多态. C++中普通成员函数加上virtual关键字就成为虚函数 Java中其实没有虚函数的概念,它 ...

  4. java中@Qualifier("string")是什么用法

    @Qualifier("XXX") Spring的Bean注入配置注解,该注解指定注入的Bean的名称,Spring框架使用byName方式寻找合格的bean,这样就消除了byTy ...

  5. Linux嵌入式 -- 内核 - 内存管理

    1.  逻辑地址 线性地址 物理地址 段式管理: 16位CPU,20根地址总线,可寻址1M内存,但是只有16位的寄存器,64K. 逻辑地址  =  段基地址 + 段内偏移地址 物理地址 PA  = 段 ...

  6. （四） tensorflow笔记：常用函数说明

    tensorflow笔记系列: (一) tensorflow笔记:流程,概念和简单代码注释 (二) tensorflow笔记:多层CNN代码分析 (三) tensorflow笔记:多层LSTM代码分析 ...

  7. js设计模式理解干货

    构造函数本身就是一个函数,只不过该函数是出于创建对象的目的而定义的. 创建Object实例的两种方式: new 操作符 var person = new Object(); person.name = ...

  8. NSObject头文件解析 / 消息机制 / Runtime解读 (二)

    本章接着NSObject头文件解析 / 消息机制 / Runtime解读(一)写 给类添加属性: BOOL class_addProperty(Class cls, const char *name, ...

  9. 一个丰富的通知工具类 --第三方开源--NotifyUtil

    把NotifyUtil Copy进自己的项目就好 实现有八种,作者在Demo里全部演示齐了,分别是 普通类型通知(单行) 普通类型通知(多行) 消息列表通知(含双图标) 含大图类型通知 自定义视图通知 ...

  10. Memorial for Nanjing victims today 南京大屠杀死难者公祭仪式今于南京举行 勿忘国耻，活捉小*日*本。

    China will hold an annual memorial for the victims of the Nanjing Massacre today in the eastern city ...