首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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 编程的朋友。

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

- Author -

lqh

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中的事件处理
Jan 16 Javascript
JavaScript入门教程(7) History历史对象
Jan 31 Javascript
Jquery 插件学习实例1 插件制作说明与tableUI优化
Apr 02 Javascript
Javascript中Array用法实例分析
Jun 13 Javascript
谈谈js中的prototype及prototype属性解释和常用方法
Nov 25 Javascript
Bootstrap精简教程
Nov 27 Javascript
【JS+CSS3】实现带预览图幻灯片效果的示例代码
Mar 17 Javascript
微信小程序之拖拽排序（代码分享）
Jan 21 Javascript
JS实现JSON.stringify的实例代码讲解
Feb 07 Javascript
web前端vue filter 过滤器
Jan 12 Javascript
webpack 4.0.0-beta.0版本新特性介绍
Feb 10 Javascript
Javascript获取某个月的天数
May 30 Javascript
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
SRF-M100(1) 德劲1102(1) SHARP(1) GF515(1) 德劲1107(1) 华普R-96(1) A254(1) YH-R296(1) 上海永华(1) 安健(1)
You might like
discuz免激活同步登入代码修改方法(discuz同步登录)
2013/12/24 PHP
php事件驱动化设计详解
2016/11/10 PHP
PHP数据库操作三：redis用法分析
2017/08/16 PHP
JQuery动态创建DOM、表单元素的实现代码
2011/08/09 Javascript
如何制作浮动广告 JavaScript制作浮动广告代码
2012/12/30 Javascript
用jquery仿做发微博功能示例
2014/04/18 Javascript
判断复选框是否被选中的两种方法
2014/06/04 Javascript
解决Jquery向页面append新元素之后事件的绑定问题
2015/03/16 Javascript
JavaScript中的call方法和apply方法使用对比
2015/08/12 Javascript
预防网页挂马的方法总结
2016/11/03 Javascript
JS正则截取两个字符串之间及字符串前后内容的方法
2017/01/06 Javascript
JS字符串false转boolean的方法(推荐)
2017/03/08 Javascript
vue、react等单页面项目应该这样子部署到服务器
2018/01/03 Javascript
JavaScript模拟实现自由落体效果
2018/08/28 Javascript
Echarts之悬浮框中的数据排序问题
2018/11/08 Javascript
利用d3.js实现蜂巢图表带动画效果
2019/09/03 Javascript
JavaScript canvas绘制折线图
2020/02/18 Javascript
PyQt5每天必学之弹出消息框
2018/04/19 Python
python实现关键词提取的示例讲解
2018/04/28 Python
Python实现读取SQLServer数据并插入到MongoDB数据库的方法示例
2018/06/09 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
对于Python深浅拷贝的理解
2019/07/29 Python
python sorted函数原理解析及练习
2020/02/10 Python
python 在threading中如何处理主进程和子线程的关系
2020/04/25 Python
介绍一下Java的安全机制
2012/06/28 面试题
创先争优制度
2014/01/21 职场文书
收银员岗位职责
2014/02/07 职场文书
家长会主持词
2014/03/26 职场文书
党课心得体会范文
2014/09/09 职场文书
2014年祖国生日寄语
2014/09/19 职场文书
精神文明建设汇报材料
2014/12/24 职场文书
开学第一天的感想
2015/08/10 职场文书
卖车协议书范文
2016/03/23 职场文书
MySQL系列之五 视图、存储函数、存储过程、触发器
2021/07/02 MySQL
vue如何清除浏览器历史栈
2022/05/25 Vue.js
Sentry的安装、配置、使用教程(Sentry日志手机系统)
2022/07/23 Python