HTML does not support HTML pages embedded in HTML pages. Implement this function by using the following methods:
1.Use Ajax - Let a server call to get the corresponding HTML page and set it to the innerHTML of the HTML control.
2. Use server-side server technologies such as JSP, PHP to include HTML pages in dynamic pages.
Using AngularJS, we can use the ng-include directive to embed another HTML page in one HTML page.
<div ng-app="" ng-controller="studentController"> <div ng-include="'main.html'"></div> <div ng-include="'subjects.html'"></div>
example
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> <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>Output
To run this example, you need to deploy textAngularJS.html, main.html and subjects.html to a web server. Open textAngularJS.html in a web browser using the server URL. See the results.
The above is the information included in AngularJS. We will continue to organize relevant knowledge in the future. Thank you for your support for this site!