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 相关文章推荐
javascript的函数、创建对象、封装、属性和方法、继承
Mar 10 Javascript
javascript用函数实现对象的方法
May 14 Javascript
JavaScript判断数组是否包含指定元素的方法
Jul 01 Javascript
基于javascript数组实现图片轮播
May 02 Javascript
关于List.ToArray()方法的效率测试
Sep 30 Javascript
微信小程序 网络API发起请求详解
Nov 09 Javascript
Bootstrap导航条学习使用(一)
Feb 08 Javascript
基于JQuery的购物车添加删除以及结算功能示例
Mar 08 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
May 30 Javascript
JQuery插件tablesorter表格排序实现过程解析
May 28 jQuery
Vue的自定义组件不能使用click方法的解决
Jul 28 Javascript
详解Vue中Axios封装API接口的思路及方法
Oct 10 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
You might like
改德生G88 - 加装等响度低音提升电路
2021/03/02 无线电
PHP文本操作类
2006/11/25 PHP
解析关于wamp启动是80端口被占用的问题
2013/06/21 PHP
PHP Session机制简介及用法
2014/08/19 PHP
Codeigniter(CI)框架分页函数及相关知识
2014/11/03 PHP
php实现文件管理与基础功能操作
2017/03/21 PHP
JavaScript格式化数字的函数代码
2010/11/30 Javascript
jQuery事件绑定和委托实例
2014/11/25 Javascript
JavaScript获取数组最小值和最大值的方法
2015/06/09 Javascript
Backbone View 之间通信的三种方式
2016/08/09 Javascript
JavaScript-html标题滚动效果的简单实现
2016/09/08 Javascript
javascript-解决mongoose数据查询的异步操作
2016/12/22 Javascript
JS去除字符串中空格的方法
2017/02/14 Javascript
在vue项目中集成graphql(vue-ApolloClient)
2018/09/08 Javascript
JavaScript实现刮刮乐效果
2020/11/01 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python的多态性实例分析
2015/07/07 Python
python机器学习实战之最近邻kNN分类器
2017/12/20 Python
Python解决N阶台阶走法问题的方法分析
2017/12/28 Python
符合语言习惯的 Python 优雅编程技巧【推荐】
2018/09/25 Python
Python3 读、写Excel文件的操作方法
2018/10/20 Python
Keras使用tensorboard显示训练过程的实例
2020/02/15 Python
Python第三方包之DingDingBot钉钉机器人
2020/04/09 Python
Python restful框架接口开发实现
2020/04/13 Python
30行Python代码实现高分辨率图像导航的方法
2020/05/22 Python
python调用私有属性的方法总结
2020/07/24 Python
详解如何在PyCharm控制台中输出彩色文字和背景
2020/08/17 Python
pytorch 中forward 的用法与解释说明
2021/02/26 Python
Sahajan美国:阿育吠陀护肤品牌
2021/01/09 全球购物
经典的班主任推荐信
2013/10/28 职场文书
应聘护理专业毕业自荐书范文
2014/02/12 职场文书
三分钟演讲稿事例
2014/03/03 职场文书
公司承诺书怎么写
2014/05/24 职场文书
党的群众路线教育实践活动批评与自我批评范文
2014/10/16 职场文书
2016年感恩父亲节活动总结
2016/04/01 职场文书
Go语言 go程释放操作(退出/销毁)
2021/04/30 Golang