使用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. CSS布局技巧 -- 纯CSS让子元素的宽度总和决定其父元素的宽度

    使用场景 在移动端屏幕宽度有限的前提下,使用横向滚动的方式展示更多的内容.在这样的需求下,希望父元素作为容器,其宽度可以又横向排列资源的总宽度动态撑开,超过祖父元素的宽度:在不超过祖父元素时,自动继承 ...

  2. 两种状态显示处理. enum , Linq AsEnumerable

    1.ENUM protected void GridView1_RowDataBound(object sender, GridViewRowEventArgs e) { GridViewRow ro ...

  3. Redis 入门练习

    Redis提供了一个命令行入门练习的web:http://try.redis.io/ ///////////////////////////////////////////////////////// ...

  4. PostgreSQL和MYsql的对比

    一.postgresql多进程,mysql多线程 二.postgresql和它配套的开源软件非常多,容易进行负载均衡 三.posgresql代码简介,mysql比较混乱 四.最重要的,postgres ...

  5. [spark案例学习] WEB日志分析

    数据准备 数据下载:美国宇航局肯尼迪航天中心WEB日志 我们先来看看数据:首先将日志加载到RDD,并显示出前20行(默认). import sys import os log_file_path =' ...

  6. ＃笔记＃ CSS工作流

    目录 明确代码规范 CSS Reset 关于前缀 浮动闭合 CSS的前处理器(Preprocessor)和后处理器(Postprocessor) 明确代码规范 目的是确保跨平台协作多人开发的代码显示界 ...

  7. linux下配置ssledge代理服务器

    ssl edge 是一个非常好用的VPN/proxy, 比云梯 稳定快速的多.  在LINUX下开发 Titanium 需要用到各种FQ,所以它是必备工具. 1. 根据自己付费后的用户名和密码,下载 ...

  8. 简单修改cramfs

    首先进入root用户,确保LINUX系统下装有cramfsprogs,没有的话get-apt install cramfsprogs, 找到.cramfs文件,输入命令cramfsck -x song ...

  9. 剑指offer算法_位运算求和

    不用+,-,*,/运算求和,可以分成三步: 1.计算两个数字的异或值,相当于只计算每一位的和,不计算进位,得出结果sum: 2.计算两个数字的与值,相当于求出两个数字的进位,然后左移一位,相当于进位, ...

  10. python 元类

    转载自  http://blog.jobbole.com/21351/ 类也是对象 在理解元类之前,你需要先掌握Python中的类.Python中类的概念借鉴于Smalltalk,这显得有些奇特.在大 ...