使用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 相关文章推荐
利用XMLHTTP传递参数在另一页面执行并刷新本页
Oct 26 Javascript
JQuery 操作/获取table具体代码
Jun 13 Javascript
JS页面延迟执行一些方法(整理)
Nov 11 Javascript
js 页面元素的几个用法总结
Nov 18 Javascript
原生Javascript封装的一个AJAX函数分享
Oct 11 Javascript
JS禁止查看网页源代码的实现方法
Oct 12 Javascript
BootStrap学习笔记之nav导航栏和面包屑导航
Jan 03 Javascript
angular和BootStrap3实现购物车功能
Jan 25 Javascript
vuejs实现标签选项卡动态更改css样式的方法
May 31 Javascript
使用jquery DataTable和ajax向页面显示数据列表的方法
Aug 09 jQuery
jQuery实现的记住帐号密码功能完整示例
Aug 03 jQuery
Vue中import from的来源及省略后缀与加载文件夹问题
Feb 09 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 远程图片保存到本地的函数类
2008/12/08 PHP
PHP5中新增stdClass 内部保留类
2011/06/13 PHP
PHP的构造方法,析构方法和this关键字详细介绍
2013/10/22 PHP
PHP中trait使用方法详细介绍
2017/05/21 PHP
php判断str字符串是否是xml格式数据的方法示例
2017/07/26 PHP
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
js实现仿MSN带关闭功能的右下角弹窗代码
2015/09/04 Javascript
JS数组操作(数组增加、删除、翻转、转字符串、取索引、截取(切片)slice、剪接splice、数组合并)
2016/05/20 Javascript
javascript+html5+css3自定义弹出窗口效果
2017/10/26 Javascript
前端MVVM框架解析之双向绑定
2018/01/24 Javascript
Vue动态面包屑功能的实现方法
2019/07/01 Javascript
JS实现动态星空背景效果
2019/11/01 Javascript
非常漂亮的js烟花效果
2020/03/10 Javascript
JavaScript实现弹出窗口效果
2020/12/09 Javascript
使用Python设计一个代码统计工具
2018/04/04 Python
PyCharm安装第三方库如Requests的图文教程
2018/05/18 Python
对pandas replace函数的使用方法小结
2018/05/18 Python
Python爬取商家联系电话以及各种数据的方法
2018/11/10 Python
python快排算法详解
2019/03/04 Python
python logging模块的使用总结
2019/07/09 Python
Python PIL图片添加字体的例子
2019/08/22 Python
自定义django admin model表单提交的例子
2019/08/23 Python
原生python实现knn分类算法
2019/10/24 Python
Python join()函数原理及使用方法
2020/11/14 Python
python tkinter实现连连看游戏
2020/11/16 Python
使用bandit对目标python代码进行安全函数扫描的案例分析
2021/01/27 Python
CSS3 please 跨浏览器的CSS3产生器
2010/03/14 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
2019/11/01 HTML / CSS
Lou & Grey美国官网:主打舒适性面料服饰
2017/12/21 全球购物
我的珠宝盒:Ma boîte à bijoux
2019/08/27 全球购物
世界上最大的艺术社区:SAA
2020/12/30 全球购物
阿里巴巴Oracle DBA笔试题答案-备份恢复类
2013/11/20 面试题
成品仓管员岗位职责
2013/12/11 职场文书
捐款倡议书怎么写
2014/05/13 职场文书
自我推荐信怎么写
2015/03/24 职场文书
卡特教练观后感
2015/06/08 职场文书