求知 文章 文库 Lib 视频 Code iProcess 课程 认证 咨询 工具 火云堂 讲座吧   成长之路  
会员   
要资料
 
追随技术信仰

随时听讲座
每天看新闻
 
 

AngularJS教程
AngularJS快速入门
AngularJS环境设置
AngularJS MVC体系结构
AngularJS第一个应用程序
AngularJS指令
AngularJS表达式
AngularJS控制器
AngularJS过滤器
AngularJS表格
AngularJS HTML DOM
AngularJS模块
AngularJS表单
AngularJS包括
AngularJS Ajax
AngularJS视
AngularJS作用域
AngularJS服务
AngularJS依赖注入
AngularJS自定义指令
AngularJS国际化
 
 

AngularJS包括
105 次浏览
23次
 捐助

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。看到结果。


您可以捐助,支持我们的公益事业。

1元 10元 50元





认证码: 验证码,看不清楚?请点击刷新验证码 必填



105 次浏览
23次
 捐助
 

每天2个文档/视频
扫描微信二维码订阅
订阅技术月刊
获得每月300个技术资源
 
 

关于我们 | 联系我们 | 京ICP备10020922号 京公海网安备110108001071号