使用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 相关文章推荐
jquery 定位input元素的几种方法小结
Jul 28 Javascript
javascript实现在网页任意处点左键弹出隐藏菜单的方法
May 13 Javascript
浅谈Javascript实现继承的方法
Jul 06 Javascript
JQuery日期插件datepicker的使用方法
Mar 03 Javascript
Angular4学习笔记router的简单使用
Mar 30 Javascript
Element Input组件分析小结
Oct 11 Javascript
express.js中间件说明详解
Mar 19 Javascript
详解jQuery中的getAll()和cleanData()
Apr 15 jQuery
vue-i18n结合Element-ui的配置方法
May 20 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
Aug 28 Javascript
微信小程序实现菜单左右联动
May 19 Javascript
如何让vue长列表快速加载
Mar 29 Vue.js
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
做一个有下拉功能的留言版
2006/10/09 PHP
PHP高级对象构建 多个构造函数的使用
2012/02/05 PHP
php出租房数据管理及搜索页面
2017/05/23 PHP
php生成复杂验证码(倾斜,正弦干扰线,黏贴,旋转)
2018/03/12 PHP
用js生产批量批处理执行命令
2008/07/28 Javascript
javascript权威指南 学习笔记之变量作用域分享
2011/09/28 Javascript
体验js中splice()的强大(插入、删除或替换数组的元素)
2013/01/16 Javascript
通过Jquery的Ajax方法读取将table转换为Json
2014/05/31 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
超赞的jQuery图片滑块动画特效代码汇总
2016/01/25 Javascript
常用的JQuery函数及功能小结
2016/03/24 Javascript
基于CSS3和jQuery实现跟随鼠标方位的Hover特效
2016/07/25 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
Bootstrap框架的学习教程详解(二)
2016/10/18 Javascript
Angular2开发——组件规划篇
2017/03/28 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
json2.js 入门教程之使用方法与实例分析
2017/09/14 Javascript
vuex+axios+element-ui实现页面请求loading操作示例
2020/02/02 Javascript
[01:14:30]TNC vs VG 2019国际邀请赛淘汰赛 胜者组赛BO3 第二场 8.20.mp4
2019/08/22 DOTA
Python 时间操作例子和时间格式化参数小结
2014/04/24 Python
Python获取系统默认字符编码的方法
2015/06/04 Python
详解如何用django实现redirect的几种方法总结
2018/11/22 Python
浅谈PySpark SQL 相关知识介绍
2019/06/14 Python
Python PIL图片添加字体的例子
2019/08/22 Python
Python3之字节串bytes与字节数组bytearray的使用详解
2019/08/27 Python
Anaconda的安装及其环境变量的配置详解
2020/04/22 Python
css3旋转木马_动力节点Java学院整理
2017/07/12 HTML / CSS
计算机专业毕业生自荐信范文
2014/03/06 职场文书
cf收人广告词
2014/03/14 职场文书
学校爱心捐款倡议书
2014/05/13 职场文书
英文演讲稿开场白
2014/08/25 职场文书
英语四级考试作弊检讨书
2014/09/29 职场文书
银行贷款收入证明
2014/10/17 职场文书
党员承诺书格式范文
2015/04/28 职场文书
python 爬取华为应用市场评论
2021/05/29 Python
vite+vue3.0+ts+element-plus快速搭建项目的实现
2021/06/24 Vue.js