HTML ไม่รองรับหน้า HTML ที่ฝังอยู่ในหน้า HTML ใช้ฟังก์ชั่นนี้โดยใช้วิธีการต่อไปนี้:
1. ใช้ AJAX - ให้การโทรเซิร์ฟเวอร์รับหน้า HTML ที่สอดคล้องกันและตั้งค่าเป็น innerHTML ของการควบคุม HTML
2. ใช้เทคโนโลยีเซิร์ฟเวอร์ฝั่งเซิร์ฟเวอร์เช่น JSP, PHP เพื่อรวมหน้า HTML ในหน้าแบบไดนามิก
การใช้ AngularJS เราสามารถใช้ NG-include Directive เพื่อฝังหน้า HTML อื่นในหน้า HTML หนึ่งหน้า
<div ng-app = "" ng-controller = "StudentController"> <div ng-include = "'main.html'"> </div> <div ng-include = "'subjects.html'"> </div>
ตัวอย่าง
tryangularjs.html
<html> <head> <title> angular js รวมถึง </title> <style> ตาราง, th, td {border: 1px solid grey; การล่มสลายของชายแดน: การล่มสลาย; Padding: 5px;} ตาราง tr: nth-child (คี่) {พื้นหลัง-สี: #f2f2f2;} ตาราง tr: nth-child (แม้) {พื้นหลัง-สี: #ffffff;} </style> </head> <body> <h2> แอปพลิเคชันตัวอย่าง ng-include = "'main.html'"> </div> <div ng-include = "'subjects.html'"> </div> </div> <script> function StudentController ($ scope) {$ scope.student = {firstName: "Mahesh" {ชื่อ: 'ฟิสิกส์', เครื่องหมาย: 70}, {ชื่อ: 'เคมี', เครื่องหมาย: 80}, {ชื่อ: 'คณิตศาสตร์',: 65}, {ชื่อ: 'ภาษาอังกฤษ', เครื่องหมาย: 75}, {ชื่อ: 'ภาษาฮินดี' studentObject = $ scope.student; ส่งคืน 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
<bable> <tr> <td> ป้อนชื่อแรก: </td> <td> <อินพุตประเภท = "ข้อความ" ng-model = "student.firstname"> </td> </tr> <tr> <td> ป้อนชื่อ: </td> <td> </td> <td> {{student.fullname ()}} </td> </tr> </table>เรื่อง. html
<p> หัวเรื่อง: </p> <table> <tr> <th> ชื่อ </th> <th> เครื่องหมาย </th> </tr> <tr ng-repeat = "หัวเรื่องใน student.subjects"> <td> {{subject.name}} </td> <td>เอาท์พุท
ในการเรียกใช้ตัวอย่างนี้คุณจะต้องปรับใช้ textangularjs.html, main.html และ subjects.html ไปยังเว็บเซิร์ฟเวอร์ เปิด textangularjs.html ในเว็บเบราว์เซอร์โดยใช้ URL เซิร์ฟเวอร์ ดูผลลัพธ์
ข้างต้นคือข้อมูลที่รวมอยู่ใน AngularJS เราจะจัดระเบียบความรู้ที่เกี่ยวข้องต่อไปในอนาคต ขอบคุณสำหรับการสนับสนุนเว็บไซต์นี้!