AngularJS中的包含详细介绍及实现示例  更新时间:2016年07月28日 12:00:32   投稿:lqh   本文主要介绍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 内容: 实例 步骤如下: 步骤 1: 创建 HTML 列表 myUsers_List.html 用户 编辑 名 姓   Edit {{ user.fName }} {{ user.lName }} 运行结果: 用户 编辑 名 姓   Edit {{ user.fName }} {{ user.lName }} 步骤 2: 创建 HTML 表单 myUsers_Form.html 创建新用户 创建新用户: 编辑用户: 名: 姓: 密码: 重复密码: 保存 运行结果: 步骤 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 运行结果:   以上就是 对AngularJS 包含资料的整理,希望能帮助AngularJS 编程的朋友。 您可能感兴趣的文章: AngularJS HTML编译器介绍 AngularJS 执行流程详细介绍 关于angularJs指令的Scope(作用域)介绍 AngularJS Bootstrap详细介绍及实例代码 3个可以改善用户体验的AngularJS指令介绍 AngularJS基础学习笔记之简单介绍 AngularJS 模型详细介绍及实例代码 AngularJS中的Promise详细介绍及实例代码 Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍 AngularJs每天学习之总体介绍 AngularJS 包含 相关文章 动态创建Angular组件实现popup弹窗功能 这篇文章主要介绍了动态创建angular组件实现popup弹窗,需要的朋友可以参考下 2017-09-09 AngularJS深入探讨scope,继承结构,事件系统和生命周期 这篇文章主要介绍了AngularJS的scope,继承结构,事件系统和生命周期,较为详细的分析了scope的作用域、层次结构、继承及生命周期相关概念与使用技巧,需要的朋友可以参考下 2016-11-11 关于angular引入ng-zorro的问题浅析 这篇文章主要给大家介绍了关于angular引入ng-zorro的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧 2020-09-09 Angular 2使用路由自定义弹出组件toast操作示例 这篇文章主要介绍了Angular 2使用路由自定义弹出组件toast操作,结合实例形式分析了Angular2使用路由操作弹出组件toast相关定义与使用技巧,需要的朋友可以参考下 2019-05-05 Angular2内置指令NgFor和NgIf详解 Directive的概念在Angular 1.x就存在了,我对它的认识比较模糊,所以直接通过一些例子来说明。Angular提供的内置执行有很多,这次使用两个:ngFor、ngIf。 2016-08-08 体验jQuery和AngularJS的不同点及AngularJS的迷人之处 AngualrJS是一个很贴心的web应用框架,本篇通过jQuery和Angular两种方式来实现同一个实例,从而体验两者的不同点以及AngularJS的迷人之处 2016-02-02 使用AngularJS制作一个简单的RSS阅读器的教程 这篇文章主要介绍了使用Angular.js制作一个简单的RSS阅读器的教程,AngularJS是一个非常有人气的JavaScript库,文中介绍的制作方法主要使用到了FreedReadR模版,需要的朋友可以参考下 2015-06-06 angular 数据绑定之[]和{{}}的区别 这篇文章主要介绍了angular 数据绑定之[]和{{}}的区别,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2018-09-09 AngularJS中的promise用法分析 这篇文章主要介绍了AngularJS中的promise用法,结合实例形式分析了AngularJS异步处理模式promise具体功能、使用方法与相关注意事项,需要的朋友可以参考下 2017-05-05 详解Angular 自定义结构指令 本篇文章主要介绍了详解Angular 自定义结构指令,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧 2017-06-06 最新评论

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>&nbsp;&nbsp;Edit
  </button>
 </td>
 <td>{{ user.fName }}</td>
 <td>{{ user.lName }}</td>
 </tr></tbody>
</table>

运行结果:

用户

编辑
{{ 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>

运行结果:

步骤 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 HTML编译器介绍
  • AngularJS 执行流程详细介绍
  • 关于angularJs指令的Scope(作用域)介绍
  • AngularJS Bootstrap详细介绍及实例代码
  • 3个可以改善用户体验的AngularJS指令介绍
  • AngularJS基础学习笔记之简单介绍
  • AngularJS 模型详细介绍及实例代码
  • AngularJS中的Promise详细介绍及实例代码
  • Angularjs中ng-repeat-start与ng-repeat-end的用法实例介绍
  • AngularJs每天学习之总体介绍
张贴在3