AngularJS - शामिल हैं

HTML HTML पेज के भीतर HTML पेज एम्बेड करने का समर्थन नहीं करता है। इस कार्यक्षमता को प्राप्त करने के लिए, हम निम्नलिखित विकल्पों में से एक का उपयोग कर सकते हैं -

Using Ajax - संबंधित HTML पृष्ठ प्राप्त करने के लिए एक सर्वर कॉल करें और इसे HTML नियंत्रण के आंतरिक HTML में सेट करें।
Using Server Side Includes - JSP, PHP और अन्य वेब साइड सर्वर तकनीकों में डायनामिक पेज के भीतर HTML पेज शामिल हो सकते हैं।

AngularJS का उपयोग करते हुए, हम एनजी शामिल निर्देश का उपयोग करके एक HTML पृष्ठ के भीतर HTML पृष्ठों को एम्बेड कर सकते हैं।

<div ng-app = "" ng-controller = "studentController">
   <div ng-include = "'main.htm'"></div>
   <div ng-include = "'subjects.htm'"></div>
</div>

उदाहरण

tryAngularJS.htm

<html>
   <head>
      <title>Angular JS Includes</title>
      <script src = "https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js">
      </script>
      
      <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 = "mainApp" ng-controller = "studentController">
         <div ng-include = "'/angularjs/src/include/main.htm'"></div>
         <div ng-include = "'/angularjs/src/include/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>
      
   </body>
</html>

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>

उत्पादन

इस उदाहरण को कार्यान्वित करने के लिए, आपको एक वेब सर्वर पर testAngularJS.htm, main.htm और subjects.htm तैनात करने की आवश्यकता है । वेब ब्राउज़र में अपने सर्वर के URL का उपयोग करके फ़ाइल testAngularJS.htm खोलें और परिणाम देखें।