AngularJS包括详解及示例代码


Posted in Javascript onAugust 17, 2016

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

1.使用Ajax - 让一台服务器来调用获取相应的HTML页面,并将其设置在HTML控件的innerHTML。

2.使用服务器端包含 - 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包括详解及示例代码

 以上就是AngularJS 包括的资料整理,后续继续整理相关知识,谢谢大家对本站的支持!

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
javascript实现面向对象类的功能书写技巧
Mar 07 Javascript
高效的表格行背景隔行变色及选定高亮的JS代码
Dec 04 Javascript
javascript中length属性的探索
Jul 31 Javascript
JS自调用匿名函数具体实现
Feb 11 Javascript
JavaScript排序算法之希尔排序的2个实例
Apr 04 Javascript
js选项卡的实现方法
Feb 09 Javascript
Angularjs使用directive自定义指令实现attribute继承的方法详解
Aug 05 Javascript
详解AngularJs ui-router 路由的简单介绍
Apr 26 Javascript
AngularJS实现注册表单验证功能
Oct 16 Javascript
一个Vue页面的内存泄露分析详解
Jun 25 Javascript
原生JavaScript实现的无缝滚动功能详解
Jan 17 Javascript
详细分析Javascript中创建对象的四种方式
Aug 17 #Javascript
AngularJS表单详解及示例代码
Aug 17 #Javascript
AngularJS模块详解及示例代码
Aug 17 #Javascript
Bootstrap 源代码分析(未完待续)
Aug 17 #Javascript
AngularJS HTML DOM详解及示例代码
Aug 17 #Javascript
AngularJS表格详解及示例代码
Aug 17 #Javascript
AngularJS过滤器详解及示例代码
Aug 16 #Javascript
You might like
Smarty+QUICKFORM小小演示
2007/02/25 PHP
彻底杜绝PHP的session cookie错误
2009/08/09 PHP
ThinkPHP实现二级循环读取的方法
2014/11/03 PHP
php实现的生成迷宫与迷宫寻址算法完整实例
2017/11/06 PHP
两种方法实现文本框输入内容提示消失
2013/03/17 Javascript
javascript中注册和移除事件的4种方式
2013/03/20 Javascript
javascript常用功能汇总
2015/07/05 Javascript
window.location.reload 刷新使用分析(去对话框)
2015/11/11 Javascript
js实现div在页面拖动效果
2016/05/04 Javascript
bootstrap-datetimepicker实现只显示到日期的方法
2016/11/25 Javascript
NodeJs测试框架Mocha的安装与使用
2017/03/28 NodeJs
用js实现每隔一秒刷新时间的实例(含年月日时分秒)
2017/10/25 Javascript
在React 组件中使用Echarts的示例代码
2017/11/08 Javascript
浅谈layui 数据表格前后台传值的问题
2019/09/12 Javascript
vue深度监听(监听对象和数组的改变)与立即执行监听实例
2020/09/04 Javascript
[09:13]2014DOTA2国际邀请赛 中国区预选赛coser表演
2014/05/23 DOTA
Python linecache.getline()读取文件中特定一行的脚本
2008/09/06 Python
wxpython学习笔记(推荐查看)
2014/06/09 Python
用python做一个搜索引擎(Pylucene)的实例代码
2017/07/05 Python
django页面跳转问题及注意事项
2019/07/18 Python
Pycharm创建项目时如何自动添加头部信息
2019/11/14 Python
python和pywin32实现窗口查找、遍历和点击的示例代码
2020/04/01 Python
会走动的图形html5时钟示例
2014/04/27 HTML / CSS
详解HTML5中的拖放事件(Drag 和 drop)
2016/11/14 HTML / CSS
日本快乐生活方式购物网站:Shop Japan
2018/07/17 全球购物
请介绍一下WSDL的文档结构
2013/03/17 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
高三地理教学反思
2014/01/11 职场文书
阳光体育活动方案
2014/02/16 职场文书
计划生育标语
2014/06/23 职场文书
购房公证委托书(2014版)
2014/09/12 职场文书
群众路线个人整改方案
2014/10/25 职场文书
会议欢迎词
2015/01/23 职场文书
用CSS3画一个爱心
2021/04/27 HTML / CSS
python 如何做一个识别率百分百的OCR
2021/05/29 Python
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python