AngularJs มี
ใน AngularJS คุณสามารถรวมไฟล์ HTML ใน HTML
รวมไฟล์ HTML ใน HTML
ใน HTML ฟังก์ชันการทำงานที่มีไฟล์ HTML ไม่ได้รับการสนับสนุนในปัจจุบัน
เซิร์ฟเวอร์มี
สคริปต์ฝั่งเซิร์ฟเวอร์ส่วนใหญ่รองรับฟังก์ชั่นไฟล์รวม (SSI: Server Side รวมอยู่ด้วย)
การใช้ SSI คุณสามารถรวมไฟล์ HTML ใน HTML และส่งไปยังเบราว์เซอร์ไคลเอนต์
อินสแตนซ์ PHP
<? php ต้องการ ("navigation.php"); -
รวมถึงลูกค้า
มีหลายวิธีในการรวมไฟล์ HTML ใน HTML ด้วย JavaScript
โดยปกติเราจะใช้คำขอ HTTP (AJAX) เพื่อรับข้อมูลจากเซิร์ฟเวอร์และเราสามารถเขียนข้อมูลที่ส่งคืนลงในองค์ประกอบ HTML โดยใช้ InnerHTML
AngularJs มี
การใช้ AngularJS คุณสามารถใช้ NG-include Directive เพื่อรวมเนื้อหา HTML:
ตัวอย่าง
<body> <div> <div ng-include = "'myusers_list.htm'"> </div> <div ng-include = "'myusers_form.htm'"> </div> </div>
ขั้นตอนมีดังนี้:
ขั้นตอนที่ 1: สร้างรายการ HTML
myusers_list.html
<H1> ผู้ใช้ </h1> <table> <thead> <tr> <th> แก้ไข </th> <th> ชื่อ </th> <th> ชื่อ </th> </tr> </thead> <tbody> <tr ng-repeat = "ผู้ใช้ในผู้ใช้"> <td> <button ng-click = "edituser <td> {{user.fname}} </td> <td> {{user.lname}} </td> </tr> </tbody> </table>ผลการทำงาน:
ผู้ใช้
| แก้ไข | ชื่อ | นามสกุล |
|---|---|---|
| {{user.fname}} | {{user.lname}} |
ขั้นตอนที่ 2: สร้างแบบฟอร์ม HTML
myusers_form.html
<button ng-click = "edituser ('new')"> <span> </span> สร้างผู้ใช้ใหม่ </button> <hr> <h3 ng-show = "แก้ไข"> สร้างผู้ใช้ใหม่: </h3> <h3 ng-hide = "แก้ไข" ng-model = "fname" ng-disabled = "! แก้ไข" placeholder = "name"> </div> </div> <div> <dable> หัวเรื่อง: </label> <div> <อินพุต type = "text" ng-model = "lname" ng-disabled = " type = "รหัสผ่าน" ng-model = "passw1" placeholder = "รหัสผ่าน"> </div> </div> <divel ไม่สมบูรณ์ "> <span> </span> บันทึก </button>ผลการทำงาน:
ขั้นตอนที่ 3: สร้างคอนโทรลเลอร์
myusers.js
Angular.module ('myapp', []). คอนโทรลเลอร์ ('userCtrl', ฟังก์ชั่น ($ scope) {$ scope.fname = ''; $ scope.lname = ''; $ scope.passw1 = '' $ scope.passw2 = '' fname: 'kim', lname: "pim"}, {id: 3, fname: 'sal', lname: "smith"}, {id: 4, fname: 'jack', lname: "Jones"}, {id: 5, fname: 'John', lname: }]; $ scope.edit = true; $ scope.error = false; $ scope.incomplete = false; $ scope.edituser = function (id) {if (id == 'ใหม่') {$ scope.edit = true; $ scope.fname = $ scope.users [id-1] .fname; {$ scope.test ();}); $ scope. $ watch ('fname', function () {$ scope.test ();}); $ scope. $ watch ('lname', ฟังก์ชั่น () {$ scope.test ();};};}; {ถ้า ($ scope.passw1! == $ scope.passw2) {$ scope.error = true; ! $ scope.passw2.length)) {$ scope.incomplete = true;}};})ขั้นตอนที่ 4: สร้างโฮมเพจ
myusers.html
<! doctype html> <html> <head> <meta charset = "utf-8"> <link rel = "stylesheet" href = "// apps.bdimg.com/libs/bootstrap/3.3.4/css/bootstrap.min.cs src = "http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"> </script> </head> <body ng-app = "myapp" ng-controller = "userctrl"> ng-include = "'myusers_form.htm'"> </div> </div> <script src = "myusers.js"> </script> </body> </html>
ผลการทำงาน:
ข้างต้นเป็นการรวบรวมข้อมูล AngularJS ฉันหวังว่ามันจะช่วยเพื่อนเขียนโปรแกรม AngularJS