AngularJS中的包含详细介绍及实现示例


Posted in Javascript onJuly 28, 2016

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>

<div class="container">
 <div ng-include="'myUsers_List.htm'"></div>
 <div ng-include="'myUsers_Form.htm'"></div>
</div>

步骤如下:

步骤 1: 创建 HTML 列表

myUsers_List.html

<h1>用户</h1>

<table class="table table-striped">
 <thead><tr>
 <th>编辑</th>
 <th>名</th>
 <th>姓</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>

运行结果:

用户

编辑
  Edit {{ user.fName }} {{ user.lName }}

步骤 2: 创建 HTML 表单

myUsers_Form.html

<button class="btn btn-success" ng-click="editUser('new')">
<span class="glyphicon glyphicon-user"></span>创建新用户
</button>
<hr>

<h3 ng-show="edit">创建新用户:</h3>
<h3 ng-hide="edit">编辑用户:</h3>

<form class="form-horizontal">
 <div class="form-group">
 <label class="col-sm-2 control-label">名:</label>
 <div class="col-sm-10">
 <input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">
 </div>
 </div> 
 <div class="form-group">
 <label class="col-sm-2 control-label">姓:</label>
 <div class="col-sm-10">
 <input type="text" ng-model="lName" ng-disabled="!edit" placeholder="姓">
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">密码:</label>
 <div class="col-sm-10">
 <input type="password" ng-model="passw1" placeholder="密码">
 </div>
 </div>
 <div class="form-group">
 <label class="col-sm-2 control-label">重复密码:</label>
 <div class="col-sm-10">
 <input type="password" ng-model="passw2" placeholder="重复密码">
 </div>
 </div>
</form>

<hr>
<button class="btn btn-success" ng-disabled="error || incomplete">
<span class="glyphicon glyphicon-save"></span>保存
</button>

运行结果:

AngularJS中的包含详细介绍及实现示例

步骤 3: 创建控制器

myUsers.js

angular.module('myApp', []).controller('userCtrl', function($scope) {
$scope.fName = '';
$scope.lName = '';
$scope.passw1 = '';
$scope.passw2 = '';
$scope.users = [
{id:1, fName:'Hege',lName:"Pege" },
{id:2, fName:'Kim',lName:"Pim" },
{id:3, fName:'Sal',lName:"Smith" },
{id:4, fName:'Jack',lName:"Jones" },
{id:5, fName:'John',lName:"Doe" },
{id:6, fName:'Peter',lName:"Pan" }
];
$scope.edit = true;
$scope.error = false;
$scope.incomplete = false; 
$scope.editUser = function(id) {
 if (id == 'new') {
 $scope.edit = true;
 $scope.incomplete = true;
 $scope.fName = '';
 $scope.lName = '';
 } else {
 $scope.edit = false;
 $scope.fName = $scope.users[id-1].fName;
 $scope.lName = $scope.users[id-1].lName; 
 }
};

$scope.$watch('passw1',function() {$scope.test();});
$scope.$watch('passw2',function() {$scope.test();});
$scope.$watch('fName',function() {$scope.test();});
$scope.$watch('lName',function() {$scope.test();});

$scope.test = function() {
 if ($scope.passw1 !== $scope.passw2) {
 $scope.error = true;
 } else {
 $scope.error = false;
 }
 $scope.incomplete = false;
 if ($scope.edit && (!$scope.fName.length ||
 !$scope.lName.length ||
 !$scope.passw1.length || !$scope.passw2.length)) {
 $scope.incomplete = true;
 }
};
})

步骤 4: 创建主页

myUsers.html

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="//apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body ng-app="myApp" 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中的包含详细介绍及实现示例

AngularJS中的包含详细介绍及实现示例

以上就是 对AngularJS 包含资料的整理,希望能帮助AngularJS 编程的朋友。

Javascript 相关文章推荐
你所要知道JS(DHTML)中的一些技巧
Jan 09 Javascript
js下用层来实现select的title提示属性
Feb 23 Javascript
基于jquery实现点击左右按钮图片横向滚动
Apr 11 Javascript
在新窗口打开超链接的方法小结
Apr 14 Javascript
YUI模块开发原理详解
Nov 18 Javascript
浅谈javascript中for in 和 for each in的区别
Apr 23 Javascript
Jquery使用css方法改变样式实例
May 18 Javascript
Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例
Dec 08 Javascript
解决OneThink中无法异步提交kindeditor文本框中修改后的内容方法
May 05 Javascript
微信小程序使用picker实现时间和日期选择框功能【附源码下载】
Dec 11 Javascript
angularjs获取到My97DatePicker选中的值方法
Oct 02 Javascript
Jquery Fade用法详解
Nov 06 jQuery
AngularJS Bootstrap详细介绍及实例代码
Jul 28 #Javascript
JavaScript中windows.open()、windows.close()方法详解
Jul 28 #Javascript
JS中正则表达式只有3种匹配模式(没有单行模式)详解
Jul 28 #Javascript
AngularJS中的API(接口)简单实现
Jul 28 #Javascript
js 声明数组和向数组中添加对象变量的简单实例
Jul 28 #Javascript
AngularJS 输入验证详解及实例代码
Jul 28 #Javascript
jquery实用技巧之输入框提示语句
Jul 28 #Javascript
You might like
PHP中使用json数据格式定义字面量对象的方法
2014/08/20 PHP
浅析iis7.5安装配置php环境
2015/05/10 PHP
PHP使用递归方式列出当前目录下所有文件的方法
2015/06/02 PHP
JavaScript 快捷键设置实现代码
2009/03/13 Javascript
JavaScript 在各个浏览器中执行的耐性
2009/04/06 Javascript
nodejs之请求路由概述
2014/07/05 NodeJs
javascript使用window.open提示“已经计划系统关机”的原因
2014/08/15 Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
2014/09/25 Javascript
JavaScript实现穷举排列(permutation)算法谜题解答
2014/12/29 Javascript
在父页面得到zTree已选中的节点的方法
2015/02/12 Javascript
jquery html动态添加的元素绑定事件详解
2016/05/24 Javascript
Ajax实现不刷新取最新商品
2017/03/01 Javascript
基于daterangepicker日历插件使用参数注意的问题
2017/08/10 Javascript
Vue官方文档梳理之全局配置
2017/11/22 Javascript
基于Vue 2.0 监听文本框内容变化及ref的使用说明介绍
2018/08/24 Javascript
webpack4+Vue搭建自己的Vue-cli项目过程分享
2018/08/29 Javascript
刷新页面后让控制台的js代码继续执行
2019/09/20 Javascript
Python利用ansible分发处理任务
2015/08/04 Python
Python数据分析之双色球统计单个红和蓝球哪个比例高的方法
2018/02/03 Python
Python实现输出某区间范围内全部素数的方法
2018/05/02 Python
用python处理图片实现图像中的像素访问
2018/05/04 Python
Pycharm 设置自定义背景颜色的图文教程
2018/05/23 Python
详解Django的CSRF认证实现
2018/10/09 Python
Python实现简单查找最长子串功能示例
2019/02/26 Python
解决Pyinstaller 打包exe文件 取消dos窗口(黑框框)的问题
2019/06/21 Python
化学专业自荐信
2014/05/28 职场文书
爱岗敬业事迹材料
2014/12/24 职场文书
2015年学校安全工作总结
2015/04/22 职场文书
谢师宴学生致辞
2015/07/27 职场文书
证婚人婚礼致辞
2015/07/28 职场文书
2019运动会广播加油稿汇总
2019/08/21 职场文书
写好Python代码的几条重要技巧
2021/05/21 Python
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
Nginx反向代理至go-fastdfs案例讲解
2021/08/02 Servers
Python中re模块的元字符使用小结
2022/04/07 Python
Nginx代理Redis哨兵主从配置的实现
2022/07/15 Servers