编程 Javascript

使用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页面嵌套的方法

- Author -

goldensun

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javaScript call 函数的用法说明

Apr 09 Javascript

jquery中get和post的简单实例

Feb 04 Javascript

jquery滚动特效集锦

Jun 03 Javascript

react开发中如何使用require.ensure加载es6风格的组件

May 09 Javascript

Bootstrap Table使用整理（三）

Jun 09 Javascript

使用Vue的slot插槽分发父组件内容实现高度复用、更加灵活的组件(推荐)

May 01 Javascript

Vue刷新修改页面中数据的方法

Sep 16 Javascript

微信小程序webview 脚手架使用详解

Jul 22 Javascript

jquery获取并修改触发事件的DOM元素示例【基于target 属性】

Oct 10 jQuery

vue element-ui实现input输入框金额数字添加千分位

Dec 29 Javascript

JavaScript读取本地文件常用方法流程解析

Oct 12 Javascript

小程序实现左滑删除的效果的实例代码

Oct 19 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