首页
所有分类
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 相关文章推荐
js获取当前地址 JS获取当前URL的示例代码
Feb 26 Javascript
js怎么判断flash swf文件是否加载完毕
Aug 14 Javascript
js验证上传图片的方法
May 12 Javascript
基于 Node.js 实现前后端分离
Apr 23 Javascript
使用jquery获取url及url参数的简单实例
Jun 14 Javascript
关于Iframe父页面与子页面之间的相互调用
Nov 22 Javascript
javascript工厂模式和构造函数模式创建对象方法解析
Dec 30 Javascript
vue中的$emit 与$on父子组件与兄弟组件的之间通信方式
May 13 Javascript
angularJs在多个控制器中共享服务数据的方法
Sep 30 Javascript
微信小程序实现单选选项卡切换效果
Jun 19 Javascript
layer设置maxWidth及maxHeight解决方案
Jul 26 Javascript
Vue开发中常见的套路和技巧总结
Nov 24 Vue.js
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
临时表(1) 游标(1) mixin(1) 表变量(1) GTID(1) props(1) ECharts(3) ref(1) timestamp(1) ip连接(1)
You might like
php5 pdo新改动加载注意事项
2008/09/11 PHP
将php数组输出html表格的方法
2014/02/24 PHP
PHP实现基于回溯法求解迷宫问题的方法详解
2017/08/17 PHP
golang实现php里的serialize()和unserialize()序列和反序列方法详解
2018/10/30 PHP
PHP调用QQ互联接口实现QQ登录网站功能示例
2019/10/24 PHP
Javascript调用XML制作连动下拉列表框
2006/06/25 Javascript
splice slice区别
2006/10/09 Javascript
JQuery中$.ajax()方法参数详解及应用
2013/12/12 Javascript
微信小程序 loading 详解及实例代码
2016/11/09 Javascript
Angular 4依赖注入学习教程之InjectToken的使用（八）
2017/06/04 Javascript
JavaScript获取移动设备型号的实现代码(JS获取手机型号和系统)
2018/03/10 Javascript
layui实现数据表格自定义数据项
2019/10/26 Javascript
修改vue源码实现动态路由缓存的方法
2020/01/21 Javascript
OpenLayers3实现测量功能
2020/09/25 Javascript
vue从后台渲染文章列表以及根据id跳转文章详情详解
2020/12/14 Vue.js
python基础教程之循环介绍
2014/08/29 Python
在Python中使用lambda高效操作列表的教程
2015/04/24 Python
python自定义异常实例详解
2017/07/11 Python
K-means聚类算法介绍与利用python实现的代码示例
2017/11/13 Python
python数字图像处理之骨架提取与分水岭算法
2018/04/27 Python
python pandas消除空值和空格以及 Nan数据替换方法
2018/10/30 Python
python 搭建简单的http server,可直接post文件的实例
2019/01/03 Python
Python如何优雅获取本机IP方法
2019/11/10 Python
Python中的四种交换数值的方法解析
2019/11/18 Python
python+requests接口压力测试500次,查看响应时间的实例
2020/04/30 Python
Python tkinter之Bind（绑定事件）的使用示例
2021/02/05 Python
中科方德软件测试面试题
2016/04/21 面试题
交通安全演讲稿
2014/01/07 职场文书
英语系毕业生求职信
2014/07/13 职场文书
迎新生标语大全
2014/10/06 职场文书
2014年项目经理工作总结
2014/11/24 职场文书
2015年学生会纪检部工作总结
2015/03/31 职场文书
社区禁毒宣传活动总结
2015/05/07 职场文书
入党积极分子考察意见
2015/06/02 职场文书
教师学习十八届五中全会精神心得体会
2016/01/05 职场文书
java固定大小队列的几种实现方式详解
2021/07/15 Java/Android