AngularJS快速入门指南17：Includes
使用AngularJS，你可以在HTML中包含其它的HTML文件。
在HTML中包含其它HTML文件？
当前的HTML文档还不支持该功能。不过W3C建议在后续的HTML版本中增加HTML imports功能，以支持在HTML中包含其它的HTML文件。
<link rel="import" href="/path/navigation.html">
在服务端包含文件
大部分的web服务器都支持服务端包含文件（Server Side Includes）。通过使用SSI，你可以在页面被发送到客户端浏览器之前将HTML文件包含到一段HTML文档中。例如下面的这行PHP代码：
<?php require("navigation.php"); ?>
在客户端包含文件
通过JavaScript，我们可以有许多的方法将HTML文件加入到HTML文档中。
最通用的做法莫过于使用Ajax，即通过异步http请求从服务端获取数据，然后动态将内容以innerHTML的形式输出到HTML元素中。
在AngularJS中包含文件
在AngularJS中，你可以使用ng-include指令将HTML文件加入到HTML文档中：
<body> <div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div> </body>
下面是完成上述页面的三个步骤。
第一步：创建myUsers_List.htm文件
<h3>Users</h3> <table class="table table-striped">
<thead><tr>
<th>Edit</th>
<th>First Name</th>
<th>Last Name</th>
</tr></thead>
<tbody><tr ng-repeat="user in users">
<td>
<button class="btn" ng-click="editUser(user.id)">
<span class="glyphicon glyphicon-pencil"></span> Edit
</button>
</td>
<td>{{ user.fName }}</td>
<td>{{ user.lName }}</td>
</tr></tbody>
</table>
第二步：创建myUsers_Form.htm文件
<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span> Create New User
</button>
<hr>
<h3 ng-show="edit">Create New User:</h3>
<h3 ng-hide="edit">Edit User:</h3>
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">First Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="First Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Last Name:</label>
<div class="col-sm-10">
<input type="text" ng-model="lName" ng-disabled="!edit" placeholder="Last Name">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Password:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw1" placeholder="Password">
</div>
</div>
<div class="form-group">
<label class="col-sm-2 control-label">Repeat:</label>
<div class="col-sm-10">
<input type="password" ng-model="passw2" placeholder="Repeat Password">
</div>
</div>
</form>
<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span> Save Changes
</button>
第三步：创建主页面文件
<!DOCTYPE html>
<html ng-app="">
<link rel="stylesheet" href = "http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<body ng-controller="userCtrl"> <div class="container">
<div ng-include="'myUsers_List.htm'"></div>
<div ng-include="'myUsers_Form.htm'"></div>
</div> <script src= "myUsers.js"></script> </body>
</html>
AngularJS快速入门指南17：Includes的更多相关文章
- AngularJS快速入门指南18：Application
是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...
- AngularJS快速入门指南16：Bootstrap
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南01：导言
AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...
- AngularJS快速入门指南20：快速参考
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南19：示例代码
本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...
- AngularJS快速入门指南15：API
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南14：数据验证
thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...
- AngularJS快速入门指南13：表单
一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...
- AngularJS快速入门指南12：模块
AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...
随机推荐
- 使用Concurrency Visualizer优化性能
Concurrency Visualizer: https://msdn.microsoft.com/en-us/library/dd537632.aspx?f=255&MSPPError=- ...
- qq协助
今天和一个朋友开完笑说让我进他的电脑,从而出现这篇文章!!!! 目前的QQ版本支持远程协助,所以想到通过两个QQ号码完成对另一台电脑的控制第一台电脑:1.自动登录QQ2.打开另一个QQ号码窗口3. ...
- STM32移植RT-Thread后的串口在调试助手上出现：(mq != RT_NULL) assert failed at rt_mq_recv:2085和串口只发送数据不能接收数据问题
STM32移植RT-Thread后的串口在调试助手上出现:(mq != RT_NULL) assert failed at rt_mq_recv:2085的问题讨论:http://www.rt-thr ...
- MySQL的安装配置
安装配置 MySQL1.官方下载 MySQL2.用 tar 解压.tar.bz 或.tar.gz3.解压后有三个目录,分别为 usr etc var4.进入 usr,进入 bin5.在主机上建个目录( ...
- Websocket Component
As of Camel 2.10, the Websocket component supports SSL/TLS configuration through the Camel JSSE Conf ...
- log4j写入数据库
转发自http://www.cnblogs.com/adolfmc/p/3432720.html Log4j 配置数据库连接池(将日志信息保存到数据库) org.apache.log4j.jdbc.J ...
- 博客迁移至CSDN
本人的技术博客已经迁移至CSDN,地址为http://blog.csdn.net/starrow,现为Lotus Domino开发领域最活跃丰富的博客,内容包括Lotus Domino, JavaSc ...
- websocket---Html5
使用websocket主要是处理,通过服务器向页面发送消息,进行页面操作的处理. 以前类似情况,由于程序立即相应,处理事件较短,所遇采用过ajax进行轮询, 但是由于本次,需要人工干预,所以采用web ...
- dataview将excel表格的数据导出成txt文件
有时候需要处理大量的数据,且这些数据又存在于excel表格内,在平时的时候,我是非常喜欢这样的数据的,因为只要是excel表格内的数据,处理起来的方法就很方便.也可能我平时遇见的数据总是以一种杂乱无章 ...
- 树莓派安装RASPBIAN系统
买了个树莓派3B,安装Raspbian时出现问题,能ping通,但是无法建立ssh链接!对于我这种只有网线和电源的玩家来说打击太大. 找了一下原因,如下链接所述: http://downloads.r ...