使用AngularJS来实现HTML页面嵌套的方法


Posted in Javascript onJune 17, 2015

 HTML不支持嵌入在HTML页面中的HTML页面。实现这一功能通过使用以下方式:

  •     使用Ajax - 让一台服务器来调用获取相应的HTML页面,并将其设置在HTML控件的innerHTML。
  •     使用服务器端包含 - JSP,PHP等Web端服务器技术可以在包括动态页面中的HTML页面。

使用AngularJS,我们可以用ng-include指令在一个HTML页面嵌入另一个HTML页面。

<div ng-app="" ng-controller="studentController">
  <div ng-include="'main.html'"></div>
  <div ng-include="'subjects.html'"></div>
</div>

例子
tryAngularJS.html

<html>
<head>
<title>Angular JS Includes</title>
<style>
table, th , td {
  border: 1px solid grey;
  border-collapse: collapse;
  padding: 5px;
}
table tr:nth-child(odd) {
  background-color: #f2f2f2;
}
table tr:nth-child(even) {
  background-color: #ffffff;
}
</style>
</head>
<body>
<h2>AngularJS Sample Application</h2>
<div ng-app="" ng-controller="studentController">
<div ng-include="'main.html'"></div>
<div ng-include="'subjects.html'"></div>
</div>
<script>
function studentController($scope) {
  $scope.student = {
   firstName: "Mahesh",
   lastName: "Parashar",
   fees:500,
   subjects:[
     {name:'Physics',marks:70},
     {name:'Chemistry',marks:80},
     {name:'Math',marks:65},
     {name:'English',marks:75},
     {name:'Hindi',marks:67}
   ],
   fullName: function() {
     var studentObject;
     studentObject = $scope.student;
     return studentObject.firstName + " " + studentObject.lastName;
   }
  };
}
</script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
</body>
</html>

main.html

<table border="0">
  <tr><td>Enter first name:</td><td><input type="text" ng-model="student.firstName"></td></tr>
  <tr><td>Enter last name: </td><td><input type="text" ng-model="student.lastName"></td></tr>
  <tr><td>Name: </td><td>{{student.fullName()}}</td></tr>
</table>

subjects.html

<p>Subjects:</p>
<table>
  <tr>
   <th>Name</th>
   <th>Marks</th>
  </tr>
  <tr ng-repeat="subject in student.subjects">
   <td>{{ subject.name }}</td>
   <td>{{ subject.marks }}</td>
  </tr>
</table>

输出

要运行这个例子,需要部署textAngularJS.html,main.html和subjects.html 到一个网络服务器。使用服务器URL在Web浏览器中打开textAngularJS.html。看到结果。

使用AngularJS来实现HTML页面嵌套的方法

Javascript 相关文章推荐
JavaScript 类型的包装对象(Typed Wrappers)
Oct 27 Javascript
js图片滚动效果时间可随意设定当鼠标移上去时停止
Jun 26 Javascript
jquery easyui使用心得
Jul 07 Javascript
jquery实现翻动fadeIn显示的方法
Mar 05 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
浅析JavaScript中的对象类型Object
May 26 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 Javascript
jQuery实现下拉菜单的实例代码
Jun 19 jQuery
关于Angularjs中跨域设置白名单问题
Apr 17 Javascript
Javascript实现简易天数计算器
May 18 Javascript
uin-app+mockjs实现本地数据模拟
Aug 26 Javascript
Vue实现开关按钮拖拽效果
Sep 22 Javascript
AngularJS的表单使用详解
Jun 17 #Javascript
举例讲解AngularJS中的模块
Jun 17 #Javascript
简介AngularJS的HTML DOM支持情况
Jun 17 #Javascript
在Ubuntu系统上安装Ghost博客平台的教程
Jun 17 #Javascript
JavaScript AOP编程实例
Jun 16 #Javascript
js+HTML5基于过滤器从摄像头中捕获视频的方法
Jun 16 #Javascript
动态加载jQuery的方法
Jun 16 #Javascript
You might like
使用php+xslt在windows平台上
2006/10/09 PHP
php fckeditor 调用的函数
2009/06/21 PHP
解析PHP中一些可能会被忽略的问题
2013/06/21 PHP
php中mt_rand()随机数函数用法
2014/11/24 PHP
php截取html字符串及自动补全html标签的方法
2015/01/15 PHP
PHP安全下载文件的方法
2016/04/07 PHP
ThinkPHP表单令牌错误的相关解决方法分析
2016/05/20 PHP
Javascript之旅 对象的原型链之由来
2010/08/25 Javascript
图片上传插件jquery.uploadify详解
2013/11/15 Javascript
jQuery Validate 验证,校验规则写在控件中的具体实例
2014/02/27 Javascript
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
javascript中Date对象的getDay方法使用指南
2014/12/22 Javascript
JQuery操作textarea,input,select,checkbox方法
2015/09/02 Javascript
js+html5实现页面可刷新的倒计时效果
2017/07/15 Javascript
详解Angular-cli生成组件修改css成less或sass的实例
2017/07/27 Javascript
laravel5.4+vue+element简单搭建的示例代码
2017/08/29 Javascript
Node.js模块全局安装路径配置方法
2018/05/17 Javascript
webpack多入口多出口的实现方法
2018/08/17 Javascript
layer弹出层 iframe层去掉滚动条的实例代码
2018/08/17 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python 实现tar文件压缩解压的实例详解
2017/08/20 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
python 中的列表生成式、生成器表达式、模块导入
2019/06/19 Python
python绘图模块matplotlib示例详解
2019/07/26 Python
Win系统PyQt5安装和使用教程
2019/12/25 Python
python正则表达式实例代码
2020/03/03 Python
TensorFlow的环境配置与安装方法
2021/02/20 Python
HTML5中使用json对象的实例代码
2018/09/10 HTML / CSS
微软日本官方网站:Microsoft日本
2017/11/26 全球购物
巴黎卡诗加拿大官网:Kérastase加拿大
2018/11/12 全球购物
高考标语大全
2014/06/05 职场文书
销售队伍口号
2014/06/11 职场文书
学习保证书100字
2015/02/26 职场文书
调解书格式范本
2015/05/20 职场文书
学习经验交流会演讲稿
2015/11/02 职场文书
jquery插件实现搜索历史
2021/04/24 jQuery