使用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>&nbsp;&nbsp;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的更多相关文章

  1. AngularJS快速入门指南18：Application

    是时候创建一个真正的AngularJS单页面应用程序了(SPA). 一个AngularJS应用程序示例 你已经了解了足够多的内容来创建第一个AngularJS应用程序: My Note Save Cl ...

  2. AngularJS快速入门指南16：Bootstrap

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  3. AngularJS快速入门指南01：导言

    AngularJS使用新的attributes扩展了HTML AngularJS对单页面应用的支持非常好(SPAs) AngularJS非常容易学习 现在就开始学习AngularJS吧! 关于本指南 ...

  4. AngularJS快速入门指南20：快速参考

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  5. AngularJS快速入门指南19：示例代码

    本文给出的大部分示例都可以直接运行,通过点击运行按钮来查看结果,同时支持在线编辑代码. <div ng-app=""> <p>Name: <input ...

  6. AngularJS快速入门指南15：API

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  7. AngularJS快速入门指南14：数据验证

    thead>tr>th, table.reference>tbody>tr>th, table.reference>tfoot>tr>th, table ...

  8. AngularJS快速入门指南13：表单

    一个AngularJS表单是一组输入型控件的集合. HTML控件 HTML输入型标签标包括: input标签 select标签 button标签 textarea标签 HTML表单 HTML表单将各种 ...

  9. AngularJS快速入门指南12：模块

    AngularJS模块定义了一个application. 模块是一个application中不同部分的容器. application中的所有控制器都应该属于一个模块. 带有一个控制器的模块 下面这个a ...

随机推荐

  1. Unity3d Android Http 开发中的坑（吐槽

    在一般的U3D网络开发中,直接使用WWW类便足够正常使用,但我在发现使用WWW下载大文件时,会导致整个程序卡顿的情况(不清楚是否我个人电脑问题),所以干脆使用HttpWebRequest/HttpWe ...

  2. 原子操作--ARM架构

    说明:内核版本号为3.10.101 一.ARM架构中的原子操作实现 在原子操作(一)中我们已经提到,各个架构组织为“复仇者”联盟,统一了基本的原子变量操作,这里我们就拿atomic_dec(v)来看看 ...

  3. 【转】webGL与OpenGL的不同

    原链接 http://www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences WebGL and OpenGL Differences     ...

  4. windows下nginx的启动关闭

    Windows下Nginx的启动.停止等命令 在Windows下使用Nginx,我们需要掌握一些基本的操作命令,比如:启动.停止Nginx服务,重新载入Nginx等,下面我就进行一些简单的介绍. .启 ...

  5. IntegerCache类

    先看代码实例现象: 问题:为什么都是比较数值,第一个为true,第二个确为false呢? 查找源码(java.lang.Integer),看到如下代码: /** * Cache to support ...

  6. 远程登录linux不用输入密码的方法

    原创文章,欢迎阅读,未经博主允许禁止转载. ssh免密登录,使用密钥认证.执行以下命令,一路回车,就生成了密钥认证.然后,ssh登录,scp等都不用密码了. $ ssh-keygen -t rsa $ ...

  7. ViewPager及PagerTabStrip 的使用详解

    ViewPager 就是一个滑屏效果的一个控件,使用比较简单.使用过程思路流程基本如下: 在需要添加的ViewPager的布局文件中添加ViewPager控件--->准备好滑屏所有的View-- ...

  8. C#的对象赋值

    例如 Class A {       int x = 0;       int y = 0; }   public void test() {       A test1 = new A( );   ...

  9. JDBC Boilerplate

    public class Student{ private Integer studId; private String name; private String email; private Dat ...

  10. windows下安装iReport 并确保启动正确

    突然从润乾转到iReport ,我也很蒙.突然离开了万能的客服,我心不甘.现在所有资料都要自己查找,只好做个记录.现在从安装开始说. 此时安装的最新版是5.6.0,要知道,网上大部分资料都是4.X,更 ...