使用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操作select下拉列表框的代码
Jun 04 Javascript
javascript确认框的三种使用方法
Dec 17 Javascript
js实现类似jquery里animate动画效果的方法
Apr 10 Javascript
JavaScript实现简单的二级导航菜单实例
Apr 15 Javascript
Node.js和MongoDB实现简单日志分析系统
Apr 25 Javascript
深入解读JavaScript中的Hoisting机制
Aug 12 Javascript
JavaScript编码风格指南(中文版)
Aug 26 Javascript
浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)
Feb 08 Javascript
vue实现自定义H5视频播放器的方法步骤
Jul 01 Javascript
vue-router的钩子函数用法实例分析
Oct 26 Javascript
用Angular实现一个扫雷的游戏示例
May 15 Javascript
vue 点击其他区域关闭自定义div操作
Jul 17 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
动画 《Pokemon Sword·Shield》系列WEB动画《薄明之翼》第2话声优阵容公开!
2020/03/06 日漫
PHP操作数组相关函数
2011/02/03 PHP
PHP+Ajax实现的无刷新分页功能详解【附demo源码下载】
2017/07/03 PHP
超酷的网页音乐播放器DewPlayer使用方法
2010/12/18 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
深入理解JavaScript系列(10) JavaScript核心(晋级高手必读篇)
2012/01/15 Javascript
jquery实现在页面加载完毕后获取图片高度或宽度
2014/06/16 Javascript
JavaScript获取图片真实大小代码实例
2014/09/24 Javascript
node.js中的fs.lstatSync方法使用说明
2014/12/16 Javascript
详解JavaScript中的forEach()方法的使用
2015/06/08 Javascript
AngularJS HTML DOM详解及示例代码
2016/08/17 Javascript
利用Javascript仿Excel的数据透视分析功能
2016/09/07 Javascript
jQuery插件ajaxFileUpload异步上传文件
2016/10/19 Javascript
JS判断输入的字符串是否是数字的方法(正则表达式)
2016/11/29 Javascript
AngularJS 打开新的标签页实现代码
2017/09/07 Javascript
vue-vuex中使用commit提交mutation来修改state的方法详解
2018/09/16 Javascript
手挽手带你学React之React-router4.x的使用
2019/02/14 Javascript
elementui之el-tebs浏览器卡死的问题和使用报错未注册问题
2019/07/06 Javascript
浅谈vuex的基本用法和mapaction传值问题
2019/11/08 Javascript
python 打印出所有的对象/模块的属性(实例代码)
2016/09/11 Python
为什么入门大数据选择Python而不是Java?
2018/03/07 Python
python 统计列表中不同元素的数量方法
2018/06/29 Python
python print 格式化输出,动态指定长度的实现
2020/04/12 Python
Python-jenkins模块之folder相关操作介绍
2020/05/12 Python
keras 获取某层的输入/输出 tensor 尺寸操作
2020/06/10 Python
Pygame框架实现飞机大战
2020/08/07 Python
美国顶级水上运动专业店:Marine Products
2018/04/15 全球购物
英国羊皮鞋类领先品牌:Just Sheepskin
2019/12/12 全球购物
八一建军节演讲稿
2014/09/10 职场文书
2015年维修工作总结
2015/04/25 职场文书
欠条格式范本
2015/07/03 职场文书
运动员代表致辞
2015/07/29 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
pycharm代码删除恢复的方法
2021/06/26 Python
Java中try catch处理异常示例
2021/12/06 Java/Android
Java实现添加条码或二维码到Word文档
2022/06/01 Java/Android