ng-include ใน AngularJS: วิธีรวมไฟล์ HTML [ตัวอย่าง]
ตามค่าเริ่มต้น HTML ไม่ได้จัดเตรียมสิ่งอำนวยความสะดวกในการรวมโค้ดฝั่งไคลเอ็นต์จากไฟล์อื่น โดยปกติแล้ว แนวทางปฏิบัติที่ดีในภาษาการเขียนโปรแกรมใดๆ ก็ตามคือการกระจายฟังก์ชันการทำงานไปยังไฟล์ต่างๆ สำหรับแอปพลิเคชันใดๆ
ตัวอย่างเช่น หากคุณมีตรรกะสำหรับการดำเนินการทางตัวเลข โดยปกติแล้วคุณจะต้องการกำหนดฟังก์ชันการทำงานนั้นไว้ในไฟล์แยกต่างหากหนึ่งไฟล์ จากนั้นจึงสามารถนำไฟล์แยกต่างหากนั้นมาใช้ซ้ำในแอปพลิเคชันต่างๆ ได้โดยการเพียงแค่รวมไฟล์นั้นไว้
โดยปกติจะเป็นแนวคิดของ รวมข้อความ ซึ่งมีให้บริการในภาษาการเขียนโปรแกรมเช่น .Net และ Java.
บทช่วยสอนนี้จะพิจารณาถึงวิธีอื่นๆ ที่สามารถรวมไฟล์ (ไฟล์ที่มีโค้ด HTML ภายนอก) ไว้ในไฟล์ HTML หลักได้
ฝั่งไคลเอ็นต์ประกอบด้วย
วิธีหนึ่งที่พบบ่อยที่สุดคือการใส่โค้ด HTML ก็คือผ่านทาง Javascript. Javaต้นฉบับ เป็นภาษาโปรแกรมที่สามารถใช้เพื่อจัดการเนื้อหาในหน้า HTML ได้ทันที เพราะฉะนั้น, Javascript สามารถใช้เพื่อรวมโค้ดจากไฟล์อื่นได้
ขั้นตอนด้านล่างนี้แสดงให้เห็นว่าสามารถทำได้สำเร็จได้อย่างไร
ขั้นตอนที่ 1) กำหนดไฟล์ชื่อ Sub.html และเพิ่มโค้ดต่อไปนี้ลงในไฟล์
<div> This is an included file </div>
ขั้นตอน 2) สร้างไฟล์ชื่อ Sample.html ซึ่งเป็นไฟล์แอปพลิเคชันหลักของคุณ และเพิ่มข้อมูลโค้ดด้านล่าง
ด้านล่างนี้เป็นประเด็นหลักที่ควรทราบเกี่ยวกับโค้ดด้านล่าง
- ในแท็ก body จะมีแท็ก div ซึ่งมีรหัสเนื้อหา นี่คือตำแหน่งที่จะแทรกโค้ดจากไฟล์ภายนอก 'Sub.html'
- มีการอ้างอิงถึงสคริปต์ jquery JQuery เป็นภาษาสคริปต์ที่สร้างขึ้นจาก Javascript ซึ่งทำให้การจัดการ DOM ง่ายยิ่งขึ้น
- ตัว Vortex Indicator ได้ถูกนำเสนอลงในนิตยสาร Javascript ฟังก์ชั่น มีคำสั่ง '$(“#Content”).load(“Sub.html”);' ซึ่งทำให้โค้ดในไฟล์ Sub.html ถูกแทรกลงในแท็ก div ซึ่งมี id ของ Content
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
ฝั่งเซิร์ฟเวอร์รวมอยู่ด้วย
การรวมฝั่งเซิร์ฟเวอร์ยังพร้อมใช้งานสำหรับการรวมโค้ดทั่วไปทั่วทั้งไซต์ โดยปกติจะทำเพื่อรวมเนื้อหาในส่วนด้านล่างของเอกสาร HTML
- ส่วนหัวของหน้า
- ส่วนท้ายของหน้า
- เมนูนำทาง
เพื่อให้เว็บเซิร์ฟเวอร์รู้จัก Server Side Included ชื่อไฟล์จะมีนามสกุลพิเศษ โดยปกติเว็บเซิร์ฟเวอร์จะยอมรับสิ่งเหล่านี้ เช่น .shtml, .stm, .shtm , .cgi
คำสั่งที่ใช้ในการรวมเนื้อหาคือ “คำสั่งรวม” ตัวอย่างของคำสั่งรวมแสดงอยู่ด้านล่าง
<!--#include virtual="navigation.cgi" -->
- คำสั่งข้างต้นอนุญาตให้รวมเนื้อหาของเอกสารหนึ่งไว้ในอีกเอกสารหนึ่งได้
- โค้ดคำสั่ง "เสมือน" ด้านบนใช้เพื่อระบุเป้าหมายที่สัมพันธ์กับรูทโดเมนของแอปพลิเคชัน
- นอกจากนี้ สำหรับพารามิเตอร์เสมือน ยังมีพารามิเตอร์ไฟล์ที่สามารถใช้ได้อีกด้วย พารามิเตอร์ "ไฟล์" จะใช้เมื่อจำเป็นต้องระบุเส้นทางที่สัมพันธ์กับไดเร็กทอรีของไฟล์ปัจจุบัน
หมายเหตุ
พารามิเตอร์เสมือนใช้เพื่อระบุไฟล์ (หน้า HTML, ไฟล์ข้อความ, สคริปต์ ฯลฯ) ที่ต้องการรวมไว้ หากกระบวนการของเว็บเซิร์ฟเวอร์ไม่สามารถเข้าถึงเพื่ออ่านไฟล์หรือรันสคริปต์ คำสั่งรวมจะล้มเหลว คำ 'เสมือน' คือคำหลักที่ต้องวางไว้ในคำสั่งรวม
วิธีรวมไฟล์ HTML ใน AngularJS
Angular จัดเตรียมฟังก์ชันเพื่อรวมฟังก์ชันการทำงานจากไฟล์ AngularJS อื่น ๆ โดยใช้คำสั่ง ng-include
วัตถุประสงค์หลักของคำสั่ง "ng-include" ใช้เพื่อดึงข้อมูล คอมไพล์ และรวมส่วน HTML ภายนอกในแอปพลิเคชัน AngularJS หลัก
ลองดูที่ฐานโค้ดด้านล่างและอธิบายว่าสามารถทำได้โดยใช้ Angular ได้อย่างไร
ขั้นตอน 1) มาเขียนโค้ดด้านล่างนี้ในไฟล์ชื่อ Table.html นี่คือไฟล์ที่จะถูกแทรกลงในไฟล์แอปพลิเคชันหลักของเราโดยใช้คำสั่ง ng-include
ข้อมูลโค้ดด้านล่างนี้จะถือว่ามีตัวแปรขอบเขตที่เรียกว่า "บทช่วยสอน" จากนั้นจะใช้คำสั่ง ng-repeat ซึ่งจะผ่านแต่ละหัวข้อในตัวแปร “บทช่วยสอน” และแสดงค่าสำหรับคู่คีย์-ค่า 'ชื่อ' และ 'คำอธิบาย'
<table> <tr ng-repeat="Topic in tutorial"> <td>{{ Topic.Name }}</td> <td>{{ Topic.Country }}</td> </tr> </table>
ขั้นตอน 2) มาเขียนโค้ดด้านล่างในไฟล์ชื่อ Main.html กัน นี่เป็นแอปพลิเคชัน Angular.JS ง่าย ๆ ที่มีคุณลักษณะต่อไปนี้
- ใช้คำสั่ง “ng-include” เพื่อแทรกโค้ดในไฟล์ภายนอก 'Table.html' ข้อความดังกล่าวได้รับการเน้นด้วยตัวหนาในโค้ดด้านล่าง ดังนั้นแท็ก div ' - จะถูกแทนที่ด้วยโค้ดทั้งหมดในไฟล์ 'Table.html'
- ในคอนโทรลเลอร์ ตัวแปร “บทช่วยสอน” จะถูกสร้างขึ้นโดยเป็นส่วนหนึ่งของอ็อบเจ็กต์ $scope ตัวแปรนี้มีรายการคู่คีย์-ค่า
ในตัวอย่างของเรา คู่ค่าคีย์คือ
- ชื่อ – หมายถึงชื่อของหัวข้อ เช่น ตัวควบคุม โมเดล และคำสั่ง
- Descriptไอออน – อธิบายหัวข้อแต่ละหัวข้อ
ตัวแปรบทช่วยสอนยังเข้าถึงได้ในไฟล์ 'Table.html'
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Event Registration</title> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script> </head> <body ng-app="sampleApp"> <div ng-controller="AngularController"> <h3> Guru99 Global Event</h3> <div ng-include="'Table.html'"></div> </div> <script> var sampleApp = angular.module('sampleApp',[]); sampleApp.controller('AngularController', function($scope) { $scope.tutorial =[ {Name: "Controllers" , Description : "Controllers in action"}, {Name: "Models" , Description : "Models and binding data"}, {Name: "Directives" , Description : "Flexibility of Directives"} ]; }); </script> </body> </html>
เมื่อคุณรันโค้ดข้างต้นคุณจะได้รับผลลัพธ์ดังต่อไปนี้
เอาท์พุต:
สรุป
- ตามค่าเริ่มต้น เรารู้ว่า HTML ไม่ได้ให้วิธีการโดยตรงในการรวมเนื้อหา HTML จากไฟล์อื่นๆ เช่นเดียวกับไฟล์อื่นๆ การเขียนโปรแกรมภาษา.
- Javascript พร้อมด้วย JQuery เป็นตัวเลือกที่ดีที่สุดสำหรับการฝังเนื้อหา HTML จากไฟล์อื่น
- อีกวิธีหนึ่งในการรวม HTML เนื้อหาจากไฟล์อื่น ๆ คือการใช้ คำสั่งและคีย์เวิร์ดพารามิเตอร์เสมือน คีย์เวิร์ดพารามิเตอร์เสมือนใช้เพื่อแสดงไฟล์ที่จำเป็นต้องฝัง สิ่งนี้เรียกว่าการรวมฝั่งเซิร์ฟเวอร์
- Angular ยังอำนวยความสะดวกในการรวมไฟล์โดยใช้คำสั่ง ng-include คำสั่งนี้สามารถใช้เพื่อแทรกโค้ดจากไฟล์ภายนอกลงในไฟล์ HTML หลักได้โดยตรง