AngularJS में ng-include: HTML फ़ाइल को कैसे शामिल करें [उदाहरण]
जेम्स हार्टमैन
डिफ़ॉल्ट रूप से, HTML अन्य फ़ाइलों से क्लाइंट-साइड कोड शामिल करने की सुविधा प्रदान नहीं करता है। किसी भी प्रोग्रामिंग भाषा में किसी भी एप्लिकेशन के लिए विभिन्न फ़ाइलों में कार्यक्षमता वितरित करना आम तौर पर एक अच्छा अभ्यास है।
उदाहरण के लिए, यदि आपके पास संख्यात्मक संचालन के लिए तर्क है, तो आप आमतौर पर उस कार्यक्षमता को एक अलग फ़ाइल में परिभाषित करना चाहेंगे। उस अलग फ़ाइल को केवल उस फ़ाइल को शामिल करके कई अनुप्रयोगों में फिर से इस्तेमाल किया जा सकता है।
यह सामान्यतः अवधारणा है कथन शामिल करें जो .Net और जैसी प्रोग्रामिंग भाषाओं में उपलब्ध हैं Java.
यह ट्यूटोरियल अन्य तरीकों पर विचार करता है जिनसे फ़ाइलों (जिनमें बाह्य HTML कोड होता है) को मुख्य HTML फ़ाइल में शामिल किया जा सकता है।
क्लाइंट साइड में शामिल हैं
HTML कोड को शामिल करने का सबसे आम तरीका है Javascript. Javaलिपि एक प्रोग्रामिंग भाषा है जिसका उपयोग HTML पेज की सामग्री में तुरंत हेरफेर करने के लिए किया जा सकता है। इसलिए, Javascript इसका उपयोग अन्य फ़ाइलों से कोड शामिल करने के लिए भी किया जा सकता है।
नीचे दिए गए चरण बताते हैं कि यह कैसे पूरा किया जा सकता है।
स्टेप 1) Sub.html नामक एक फ़ाइल परिभाषित करें और फ़ाइल में निम्नलिखित कोड जोड़ें।
<div> This is an included file </div>
चरण 2) Sample.html नामक एक फ़ाइल बनाएं, जो आपकी मुख्य एप्लिकेशन फ़ाइल है और नीचे दिया गया कोड स्निपेट जोड़ें।
नीचे दिए गए कोड के बारे में ध्यान देने योग्य मुख्य पहलू इस प्रकार हैं,
- बॉडी टैग में एक div टैग होता है जिसकी आईडी Content होती है। यह वह स्थान है जहाँ बाहरी फ़ाइल 'Sub.html' से कोड डाला जाएगा।
- यहाँ jQuery स्क्रिप्ट का संदर्भ दिया गया है। jQuery एक स्क्रिप्टिंग भाषा है जो कि jQuery के शीर्ष पर बनाई गई है। Javascript जो DOM हेरफेर को और भी आसान बनाता है।
- में Javascript फ़ंक्शन में, एक कथन '$(“#Content”).load(“Sub.html”);' है जो Sub.html फ़ाइल में कोड को div टैग में इंजेक्ट करता है जिसमें Content की आईडी होती है।
<html> <head> <script src="jquery.js"></script> <script> $(function(){ $("#Content").load("Sub.html"); }); </script> </head> <body> <div id="Content"></div> </body> </html>
सर्वर साइड में शामिल हैं
सर्वर साइड इन्क्लूड्स किसी साइट पर कोड के एक सामान्य हिस्से को शामिल करने के लिए भी उपलब्ध हैं। यह आमतौर पर HTML दस्तावेज़ के नीचे के भागों में सामग्री को शामिल करने के लिए किया जाता है।
- पेज हैडर
- पेज फ़ुटर
- नेविगेशन मेनू.
वेब सर्वर द्वारा सर्वर साइड इन्क्लूड्स को पहचानने के लिए, फ़ाइल नामों में विशेष एक्सटेंशन होते हैं। इन्हें आमतौर पर वेब सर्वर द्वारा स्वीकार किया जाता है जैसे कि .shtml, .stm, .shtm, .cgi.
सामग्री को शामिल करने के लिए इस्तेमाल किया जाने वाला निर्देश "शामिल निर्देश" है। शामिल निर्देश का एक उदाहरण नीचे दिखाया गया है;
<!--#include virtual="navigation.cgi" -->
- उपरोक्त निर्देश एक दस्तावेज़ की विषय-वस्तु को दूसरे दस्तावेज़ में शामिल करने की अनुमति देता है।
- उपरोक्त कोड में “वर्चुअल” कमांड का उपयोग एप्लिकेशन के डोमेन रूट के सापेक्ष लक्ष्य को निर्दिष्ट करने के लिए किया जाता है।
- इसके अलावा, वर्चुअल पैरामीटर के अलावा, फ़ाइल पैरामीटर भी है जिसका उपयोग किया जा सकता है। “फ़ाइल” पैरामीटर का उपयोग तब किया जाता है जब किसी को वर्तमान फ़ाइल की निर्देशिका से संबंधित पथ निर्दिष्ट करने की आवश्यकता होती है।
टिप्पणी:
वर्चुअल पैरामीटर का उपयोग उस फ़ाइल (HTML पेज, टेक्स्ट फ़ाइल, स्क्रिप्ट, आदि) को निर्दिष्ट करने के लिए किया जाता है जिसे शामिल करने की आवश्यकता होती है। यदि वेब सर्वर प्रक्रिया के पास फ़ाइल को पढ़ने या स्क्रिप्ट को निष्पादित करने की पहुँच नहीं है, तो शामिल कमांड विफल हो जाएगी। 'वर्चुअल' शब्द एक कीवर्ड है जिसे शामिल निर्देश में रखा जाना आवश्यक है।
AngularJS में HTML फ़ाइल कैसे शामिल करें
Angular, ng-include निर्देश का उपयोग करके अन्य AngularJS फ़ाइलों से कार्यक्षमता को शामिल करने के लिए फ़ंक्शन प्रदान करता है।
"एनजी-शामिल निर्देश" का प्राथमिक उद्देश्य मुख्य AngularJS अनुप्रयोग में एक बाहरी HTML खंड को लाने, संकलित करने और शामिल करने के लिए उपयोग किया जाता है।
आइए नीचे दिए गए कोड बेस को देखें और समझाएं कि Angular का उपयोग करके इसे कैसे प्राप्त किया जा सकता है।
चरण 1) चलिए नीचे दिए गए कोड को Table.html नामक फ़ाइल में लिखते हैं। यह वह फ़ाइल है जिसे ng-include निर्देश का उपयोग करके हमारी मुख्य एप्लिकेशन फ़ाइल में इंजेक्ट किया जाएगा।
नीचे दिया गया कोड स्निपेट मानता है कि "ट्यूटोरियल" नामक एक स्कोप वैरिएबल है। फिर यह ng-रिपीट डायरेक्टिव का उपयोग करता है, जो "ट्यूटोरियल" वैरिएबल में प्रत्येक विषय से गुजरता है और 'नाम' और 'विवरण' कुंजी-मान जोड़ी के लिए मान प्रदर्शित करता है।
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Country }}</td>
</tr>
</table>
चरण 2) चलिए नीचे दिए गए कोड को Main.html नामक फ़ाइल में लिखते हैं। यह एक सरल Angular.JS एप्लीकेशन है जिसमें निम्नलिखित पहलू हैं
- बाहरी फ़ाइल 'Table.html' में कोड इंजेक्ट करने के लिए "ng-include निर्देश" का उपयोग करें। नीचे दिए गए कोड में कथन को बोल्ड में हाइलाइट किया गया है। इसलिए 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 सामग्री एम्बेड करने के लिए सबसे पसंदीदा विकल्प है।
- शामिल करने का एक और तरीका एचटीएमएल अन्य फ़ाइलों से सामग्री का उपयोग करना है डायरेक्टिव और वर्चुअल पैरामीटर कीवर्ड। वर्चुअल पैरामीटर कीवर्ड का उपयोग उस फ़ाइल को इंगित करने के लिए किया जाता है जिसे एम्बेड करने की आवश्यकता होती है। इसे सर्वर-साइड इनक्लूड के रूप में जाना जाता है।
- Angular ng-include निर्देश का उपयोग करके फ़ाइलों को शामिल करने की सुविधा भी प्रदान करता है। इस निर्देश का उपयोग बाहरी फ़ाइलों से कोड को सीधे मुख्य HTML फ़ाइल में इंजेक्ट करने के लिए किया जा सकता है।
