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 ซึ่งเป็นไฟล์แอปพลิเคชันหลักของคุณ และเพิ่มข้อมูลโค้ดด้านล่าง

ด้านล่างนี้เป็นประเด็นหลักที่ควรทราบเกี่ยวกับโค้ดด้านล่าง

  1. ในแท็ก body จะมีแท็ก div ซึ่งมีรหัสเนื้อหา นี่คือตำแหน่งที่จะแทรกโค้ดจากไฟล์ภายนอก 'Sub.html'
  2. มีการอ้างอิงถึงสคริปต์ jquery JQuery เป็นภาษาสคริปต์ที่สร้างขึ้นจาก Javascript ซึ่งทำให้การจัดการ DOM ง่ายยิ่งขึ้น
  3. ตัว 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

  1. ส่วนหัวของหน้า
  2. ส่วนท้ายของหน้า
  3. เมนูนำทาง

เพื่อให้เว็บเซิร์ฟเวอร์รู้จัก 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 ง่าย ๆ ที่มีคุณลักษณะต่อไปนี้

  1. ใช้คำสั่ง “ng-include” เพื่อแทรกโค้ดในไฟล์ภายนอก 'Table.html' ข้อความดังกล่าวได้รับการเน้นด้วยตัวหนาในโค้ดด้านล่าง ดังนั้นแท็ก div ' - จะถูกแทนที่ด้วยโค้ดทั้งหมดในไฟล์ 'Table.html'
  2. ในคอนโทรลเลอร์ ตัวแปร “บทช่วยสอน” จะถูกสร้างขึ้นโดยเป็นส่วนหนึ่งของอ็อบเจ็กต์ $scope ตัวแปรนี้มีรายการคู่คีย์-ค่า

ในตัวอย่างของเรา คู่ค่าคีย์คือ

  1. ชื่อ – หมายถึงชื่อของหัวข้อ เช่น ตัวควบคุม โมเดล และคำสั่ง
  2. 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 ใน AngularJS

สรุป

  • ตามค่าเริ่มต้น เรารู้ว่า HTML ไม่ได้ให้วิธีการโดยตรงในการรวมเนื้อหา HTML จากไฟล์อื่นๆ เช่นเดียวกับไฟล์อื่นๆ การเขียนโปรแกรมภาษา.
  • Javascript พร้อมด้วย JQuery เป็นตัวเลือกที่ดีที่สุดสำหรับการฝังเนื้อหา HTML จากไฟล์อื่น
  • อีกวิธีหนึ่งในการรวม HTML เนื้อหาจากไฟล์อื่น ๆ คือการใช้ คำสั่งและคีย์เวิร์ดพารามิเตอร์เสมือน คีย์เวิร์ดพารามิเตอร์เสมือนใช้เพื่อแสดงไฟล์ที่จำเป็นต้องฝัง สิ่งนี้เรียกว่าการรวมฝั่งเซิร์ฟเวอร์
  • Angular ยังอำนวยความสะดวกในการรวมไฟล์โดยใช้คำสั่ง ng-include คำสั่งนี้สามารถใช้เพื่อแทรกโค้ดจากไฟล์ภายนอกลงในไฟล์ HTML หลักได้โดยตรง