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 ...
随机推荐
- vue 2 滚动条加载更多数据实现
解析: 判断滚动条到底部,需要用到DOM的三个属性值,即scrollTop.clientHeight.scrollHeight. scrollTop为滚动条在Y轴上的滚动距离. clientHeigh ...
- 基于ArcGIS Viewer for Flex开发的一款跨平台的应用程序
特点: 1.基于ArcGIS Viewer for Flex开发的一款跨平台的应用程序: -(IBAction) showTOC:(id)sender { if (_tocViewController ...
- Unity将来时：IL2CPP是什么？
作者:小玉链接:https://zhuanlan.zhihu.com/p/19972689来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. Unity3D 想必大家都不陌 ...
- Qt Sqlite qwt 发布过程中碰到的问题runtime error
qt版本:4.8.0 qwt版本:6.1.2 使用dll show检测缺少的dll,或者笨一点的方法,点击运行差什么找什么放进去: 左上显示exe调用哪些dll,右边是dll又再次调用啦哪些dll: ...
- Java NIO 之缓冲区
缓冲区基础 所有的缓冲区都具有四个属性来 供关于其所包含的数据元素的信息. capacity(容量):缓冲区能够容纳数据的最大值,创建缓冲区后不能改变. limit(上界):缓冲区的第一个不能被读或写 ...
- GDB常用命令
一. gdb使用流程 1.编译生成可执行文件 gcc -g hello.c -o hello 2.启动gdb gdb hello 3. 在main处设置断点 break main 4.运行程序 run ...
- JavaScript-navigator_userAgent-编写一段代码能够区分浏览器的主流和区分
1 userAgent:包含浏览器名称和版本号的字符串 <!DOCTYPE html> <html> <head lang="en"> < ...
- 解决Get请求的长度限制
错误提示: HTTP Error 404.15 - Not Found The request filtering module is configured to deny a request whe ...
- python3下安装Django
1.下载python3 https://www.Python.org/ 我下载的是Python3.5.1 选的 Windows x86-64 executable installer 2. 打开cmd ...
- oracle高阶知识点
------------------------------------------------- varchar2(4000)字符型,最大长度不能超过4000,与char的区别是不用空格补足 num ...