这里有新鲜出炉的 AngularJS 教程,程序狗速度看过来!
AngularJS 诞生于 Google 是一款优秀的前端 JS 框架,已经被用于 Google 的多款产品当中。AngularJS 有着诸多特性,最为核心的是:MVC、模块化、自动化双向数据绑定、语义化标签、依赖注入,等等。
这篇文章主要介绍了使用 AngularJS 来实现 html 页面嵌套的方法, 主要用到了 AngularJS 中的 ng-include 指令, 需要的朋友可以参考下
HTML 不支持嵌入在 HTML 页面中的 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。看到结果。
来源: http://www.phperz.com/article/17/0620/270816.html