频道导航

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

2019-01-05 JavaScript 前端之家

前端之家收集整理的这篇文章主要介绍了AngularJS中的包含详细介绍及实现示例，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。

AngularJS 包含

在 AngularJS 中，你可以在 HTML 中包含 HTML 文件。

在 HTML 中包含 HTML 文件

在 HTML 中，目前还不支持包含 HTML 文件的功能。

服务端包含

大多服务端脚本都支持包含文件功能 (SSI： Server Side Includes)。

使用 SSI,你可在 HTML 中包含 HTML 文件，并发送到客户端浏览器。

PHP 实例

客户端包含

通过 JavaScript 有很多种方式可以在 HTML 中包含 HTML 文件。

通常我们使用 http 请求 (AJAX) 从服务端获取数据，返回的数据我们可以通过使用 innerHTML 写入到 HTML 元素中。

AngularJS 包含

使用 AngularJS,你可以使用 ng-include 指令来包含 HTML 内容:

实例

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

<div ng-include="'myUsers_Form.htm'">

步骤如下：

步骤 1: 创建 HTML 列表

myUsers_List.html

<table class="table table-striped">

编辑名姓 Edit

运行结果：

用户

404px"> 编辑

步骤 2: 创建 HTML 表单

myUsers_Form.html

创建新用户

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

<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">名:
<div class="col-sm-10">
<input type="text" ng-model="fName" ng-disabled="!edit" placeholder="名">

运行结果：

步骤 3: 创建控制器

myUsers.js

$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

<Meta charset="utf-8"> <div class="container">
<div ng-include="'myUsers_List.htm'">

<div ng-include="'myUsers_Form.htm'">

<script src= "myUsers.js">

运行结果：

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

原文链接：/js/47021.html

中的包含包含实例包含应用

上一篇：JavaScript中windows.open()、wind 下一篇：项目实践一图片上传之form表单还是

猜你在找的JavaScript相关文章

Javascript中的事件冒泡与捕获

事件冒泡和事件捕获起因：今天在封装一个bind函数的时候，发现el.addEventListener函数支...

作者：前端之家时间：2021-02-22

搞懂js中小数运算精度问题原因及解决办法

js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型，number类型相当于其...

作者：前端之家时间：2021-02-22

搞懂：前端跨域问题JS解决跨域问题VUE代理解决跨域问题原理

什么是跨域跨域：广义的跨域包含一下内容： 1.资源跳转（链接跳转，重定向跳转，表单提...

作者：前端之家时间：2021-02-22

前端对base64编码的理解，原生js实现字符base64编码

@ "TOC" 常见对base64的认知(不完全正确) 首先对base64常见的认知，也是...

作者：前端之家时间：2021-02-22

搞懂：MVVM模型以及VUE中的数据绑定数据劫持发布订阅模式

搞懂：MVVM模式和Vue中的MVVM模式 MVVM MVVM ：的缩写，说都能直接说出来：模型，：视图...

作者：前端之家时间：2021-02-22

js判断浏览器是否支持webGL

起因是我之前开发的网页，用到了three.js制作了一个3d的旋转球体效果。在各种浏览器上运行...

作者：前端之家时间：2021-02-14

js判断undefined和null

js判断undefined js判断null js判断null和undefined

作者：前端之家时间：2021-02-14

将文字自动转为banner打印形式的工具

http://patorjk.com/software/taag/

作者：前端之家时间：2021-02-14

聊一聊 bootstrap 的轮播图插件

今天做工作的时候，轻车熟路的做完，又用到了bootstrap的轮播图，觉得有必要安利一下这个插...

作者：前端之家时间：2021-02-14

js实现图片无缝循环跑马灯

html 代码 css js代码 function mylsRunHorseLight() { if (mylsTimer != null) { clearIn...

作者：前端之家时间：2021-02-14

最新文章

名	姓