AngularJs 使用include包含文件

使用 AngularJS，可以将 HTML 页面嵌入到 HTML 页面中。

HTML 不支持在 HTML 页面中嵌入 HTML 页面。要想实现此效果，可以通过以下两种方式

• 使用 Ajax - 进行服务器调用以获取相应的 HTML 页面并将其设置在 HTML 控件的 innerHTML 中。
• 在服务器端包含- JSP、PHP 和其他 Web 端服务器技术可以在动态页面中包含 HTML 页面。

AngularJs 包含

在AngularJs中可以使用 ng-include 指令实现页面的包含。

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'/demo_source/angularjs/main.htm'"></div>
   <div ng-include = "'/demo_source/angularjs/subjects.htm'"></div>
</div>
<script>
         var mainApp = angular.module("mainApp", []);
         
         mainApp.controller('studentController', function($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>

尝试一下

下面我们分别看一下被包含的文件的内容

main.htm

<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.htm

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