AngularJS ng-include: उदाहरण सहित HTML फ़ाइलें शामिल करें
जेम्स हार्टमैन
⚡ स्मार्ट सारांश
AngularJS में ng-include एक बाहरी HTML खंड को प्राप्त करता है, संकलित करता है और मुख्य पृष्ठ में इंजेक्ट करता है, इसलिए एक तालिका, एक हेडर या एक फुटर जैसे साझा मार्कअप एक ही पुन: प्रयोज्य आंशिक फ़ाइल में रहते हैं।
डिफ़ॉल्ट रूप से, HTML अन्य फ़ाइलों से क्लाइंट-साइड कोड शामिल करने की सुविधा प्रदान नहीं करता है। किसी भी प्रोग्रामिंग भाषा में किसी भी एप्लिकेशन के लिए विभिन्न फ़ाइलों में कार्यक्षमता वितरित करना आम तौर पर एक अच्छा अभ्यास है।
उदाहरण के लिए, यदि आपके पास संख्यात्मक संचालन के लिए तर्क है, तो आप आमतौर पर उस कार्यक्षमता को एक अलग फ़ाइल में परिभाषित करना चाहेंगे। उस अलग फ़ाइल को केवल उस फ़ाइल को शामिल करके कई अनुप्रयोगों में फिर से इस्तेमाल किया जा सकता है।
यह सामान्यतः अवधारणा है कथन शामिल करें जो उपलब्ध हैं प्रोग्रामिंग की भाषाएँ जैसे कि .Net और Java.
यह ट्यूटोरियल फ़ाइलों (बाहरी फ़ाइलों) के अन्य उपयोगों पर प्रकाश डालता है। एचटीएमएल कोड को मुख्य एचटीएमएल फाइल में शामिल किया जा सकता है।
ग्राहक पक्ष में शामिल हैं
एचटीएमएल कोड को शामिल करने के सबसे सामान्य तरीकों में से एक है Javaस्क्रिप्ट। Javaलिपि एक प्रोग्रामिंग भाषा है जिसका उपयोग HTML पेज की सामग्री में तुरंत हेरफेर करने के लिए किया जा सकता है। इसलिए, Javaस्क्रिप्ट का उपयोग अन्य फाइलों से कोड शामिल करने के लिए भी किया जा सकता है।
नीचे दिए गए चरणों से पता चलता है कि इसे कैसे पूरा किया जा सकता है।
चरण 1) Sub.html नामक एक फ़ाइल परिभाषित करें और फ़ाइल में निम्नलिखित कोड जोड़ें।
<div> This is an included file </div>
चरण 2) Sample.html नामक एक फ़ाइल बनाएं, जो आपकी मुख्य एप्लिकेशन फ़ाइल है और नीचे दिया गया कोड स्निपेट जोड़ें।
नीचे दिए गए कोड के बारे में ध्यान देने योग्य मुख्य पहलू इस प्रकार हैं,
- बॉडी टैग में एक div टैग होता है जिसकी आईडी Content होती है। यह वह स्थान है जहाँ बाहरी फ़ाइल 'Sub.html' से कोड डाला जाएगा।
- यहां jQuery स्क्रिप्ट का संदर्भ है। jQuery एक स्क्रिप्टिंग भाषा है जो jQuery पर आधारित है। Javaएक स्क्रिप्ट जो DOM में हेरफेर करना और भी आसान बनाती है।
- में Javaस्क्रिप्ट फ़ंक्शन में, एक स्टेटमेंट '$(“#Content”).load(“Sub.html”);' है, जो Sub.html फ़ाइल में मौजूद कोड को Content आईडी वाले div टैग में इंजेक्ट करता है।
<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 निर्देश" कहलाता है। include निर्देश का एक उदाहरण नीचे दिखाया गया है:
<!--#include virtual="navigation.cgi" -->
- उपरोक्त निर्देश एक दस्तावेज़ की विषय-वस्तु को दूसरे दस्तावेज़ में शामिल करने की अनुमति देता है।
- उपरोक्त कोड में “वर्चुअल” कमांड का उपयोग एप्लिकेशन के डोमेन रूट के सापेक्ष लक्ष्य को निर्दिष्ट करने के लिए किया जाता है।
- इसके अलावा, वर्चुअल पैरामीटर के अलावा, फ़ाइल पैरामीटर भी है जिसका उपयोग किया जा सकता है। “फ़ाइल” पैरामीटर का उपयोग तब किया जाता है जब किसी को वर्तमान फ़ाइल की निर्देशिका से संबंधित पथ निर्दिष्ट करने की आवश्यकता होती है।
नोट:
वर्चुअल पैरामीटर का उपयोग उस फ़ाइल (HTML पेज, टेक्स्ट फ़ाइल, स्क्रिप्ट, आदि) को निर्दिष्ट करने के लिए किया जाता है जिसे शामिल करने की आवश्यकता होती है। यदि वेब सर्वर प्रक्रिया के पास फ़ाइल को पढ़ने या स्क्रिप्ट को निष्पादित करने की पहुँच नहीं है, तो शामिल कमांड विफल हो जाएगी। 'वर्चुअल' शब्द एक कीवर्ड है जिसे शामिल निर्देश में रखा जाना आवश्यक है।
AngularJS में HTML फ़ाइल कैसे शामिल करें
AngularJS यह फ़ंक्शन ng-include का उपयोग करके अन्य AngularJS फ़ाइलों से कार्यक्षमता को शामिल करने का कार्य प्रदान करता है। निदेश.
“ng-include डायरेक्टिव” का प्राथमिक उद्देश्य बाहरी HTML फ़्रैगमेंट को फ़ेच करना, कंपाइल करना और मुख्य AngularJS एप्लिकेशन में शामिल करना है।
संस्करण नोट: AngularJS 1.x का लॉन्ग टर्म सपोर्ट 31 दिसंबर 2021 को समाप्त हो गया, और फ्रेमवर्क टीम का कहना है कि AngularJS के लिए समर्थन आधिकारिक तौर पर समाप्त हो गया है। जनवरी 2022 में, इसलिए कोई रिलीज़ या सुरक्षा पैच जारी नहीं किए गए। नीचे दिए गए प्रत्येक चरण और कोड ब्लॉक को ऐतिहासिक संदर्भ के रूप में प्रकाशित रूप में ही रखा गया है। आधुनिक एंगुलर में कोई सीधा प्रतिस्थापन उपलब्ध नहीं है: मार्कअप घटकों से बना होता है, और रनटाइम पर चुने गए एक अंश को रेंडर किया जाता है। एनजी-कंटेनर और एनजीकंपोनेंटआउटलेट.
आइए नीचे दिए गए कोड को देखें और समझाएं कि AngularJS का उपयोग करके इसे कैसे प्राप्त किया जा सकता है।
चरण 1) चलिए नीचे दिए गए कोड को Table.html नामक फ़ाइल में लिखते हैं। यह वह फ़ाइल है जिसे ng-include निर्देश का उपयोग करके हमारी मुख्य एप्लिकेशन फ़ाइल में इंजेक्ट किया जाएगा।
नीचे दिए गए कोड स्निपेट में यह माना गया है कि "ट्यूटोरियल" नामक एक स्कोप वेरिएबल मौजूद है। इसके बाद यह उसका उपयोग करता है। एनजी-दोहराने निर्देश, जो "ट्यूटोरियल" वेरिएबल में प्रत्येक विषय से होकर गुजरता है और 'नाम' और ' के लिए मान प्रदर्शित करता हैDescriptआयन कुंजी-मान युग्म।
<table>
<tr ng-repeat="Topic in tutorial">
<td>{{ Topic.Name }}</td>
<td>{{ Topic.Description }}</td>
</tr>
</table>
चरण 2) आइए नीचे दिए गए कोड को Main.html नामक फ़ाइल में लिखें। यह एक सरल AngularJS एप्लिकेशन है जिसमें निम्नलिखित पहलू शामिल हैं।
- बाहरी फ़ाइल '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>
जब आप उपरोक्त कोड निष्पादित करेंगे, तो आपको निम्नलिखित आउटपुट मिलेगा।
उत्पादन:
नीचे दिया गया स्क्रीनशॉट रेंडर किए गए परिणाम को दर्शाता है: ब्राउज़र टैब का शीर्षक 'इवेंट रजिस्ट्रेशन' है, यह शीर्षक डाली गई तालिका के ऊपर स्थित है, और तीन पंक्तियाँ Main.html में ट्यूटोरियल ऐरे से आंशिक फ़ंक्शन के माध्यम से ली गई हैं। एनोटेटेड स्क्रीनशॉट में शीर्षक Gur99 लिखा गया है जबकि कोड इस प्रकार है: Guru99.
ng-include विशेषताएँ: src, onload और autoscroll
फ़ाइल नाम के अलावा, यह निर्देश दो वैकल्पिक विशेषताओं को स्वीकार करता है, और इसे तीन तरीकों से लिखा जा सकता है: किसी भी तत्व पर एक विशेषता के रूप में, या एक <ng-include> एलिमेंट के रूप में, या CSS क्लास के रूप में। नीचे दिया गया संदर्भ आधिकारिक संदर्भ का अनुसरण करता है। ngInclude दस्तावेज़ीकरण.
| विशेषता | अपेक्षित | यह क्या करता है |
|---|---|---|
| src, या ng-include | हाँ | वह अभिव्यक्ति जो टेम्पलेट के अनुरूप मूल्यांकन करती है URL |
| लदाई पर | नहीं | प्रत्येक बार जब कोई नया आंशिक लोडिंग पूरा हो जाता है, तो अभिव्यक्ति का मूल्यांकन किया जाता है। |
| स्वतः स्क्रॉल | नहीं | सामग्री लोड होने के बाद $anchorScroll फ़ंक्शन कॉल होता है; इस विशेषता को छोड़ने से स्क्रॉलिंग अक्षम हो जाती है। |
<div ng-include="'Table.html'" onload="loaded = true" autoscroll></div> <ng-include src="templateUrl"></ng-include>
सबसे आम गलती पहली पंक्ति से ही शुरू होती है: src एक लेता है अभिव्यक्तियह एक साधारण स्ट्रिंग नहीं है। इसलिए, एक शाब्दिक पथ को एट्रिब्यूट के अंदर अपने स्वयं के उद्धरण चिह्नों की आवश्यकता होती है, यही कारण है कि ऊपर दिया गया उदाहरण इस प्रकार है: ng-include="'Table.html'". लिखना ng-include="Table.html" AngularJS का मूल्यांकन करता है Table स्कोप प्रॉपर्टी के रूप में, कुछ भी न ढूंढें और एलिमेंट को खाली छोड़ दें।
ng-include एक नया चाइल्ड स्कोप क्यों बनाता है?
यह निर्देश मार्कअप को आसपास के स्कोप में पेस्ट नहीं करता है। प्रत्येक 'इनक्लूड' एक नया चाइल्ड बनाता है। क्षेत्र जो मूल रूप से उस दायरे से विरासत में मिलता है जिसमें इसे घोषित किया गया था, और यही एक तथ्य अधिकांश बाध्यकारी आश्चर्यों की व्याख्या करता है।
पढ़ना अपेक्षित रूप से कार्य करता है। ऊपर दिया गया अंश इस प्रकार है: tutorial सीधे माता-पिता से, इसीलिए ng-repeat यह ऐरे को ढूंढता है। लिखने में दिक्कत तब आती है जब एक पार्शियल किसी प्रिमिटिव को असाइन करता है, जैसे कि ng-model="topic"AngularJS बनाता है topic चाइल्ड स्कोप पर और पैरेंट कॉपी कभी नहीं बदलती।
दो आदतें इस जाल से बचने में मदद करती हैं:
- किसी ऑब्जेक्ट के माध्यम से बाइंड करें, जैसे कि
ng-model="data.topic"इसलिए माता-पिता और बच्चे एक ही संदर्भ तक पहुँचते हैं। - स्टेट को कंट्रोलर या सर्विस में रखें और केवल प्रिमिटिव्स के बजाय फंक्शन्स को एक्सपोज करें।
इसमें शामिल भी उत्सर्जित करता है $includeContentRequested, $includeContentLoaded और $includeContentErrorताकि माता-पिता प्रतिक्रिया दे सकें $scope.$on बच्चे के दायरे में बिल्कुल भी हस्तक्षेप किए बिना।
किसी खाली या विफल ng-include को कैसे ठीक करें
ऐसा इंक्लूड जो कुछ भी रेंडर नहीं करता, आमतौर पर कुछ कारणों से विफल हो जाता है। आइए इन कारणों को क्रम से समझें।
- उद्धरणों की जाँच करें। फ़ाइल के नाम को लिखते समय एट्रिब्यूट वैल्यू के अंदर सिंगल कोटेशन मार्क की आवश्यकता होती है। इनके बिना एक्सप्रेशन अनडिफाइंड हो जाता है और कोई रिक्वेस्ट नहीं भेजी जाती।
- पेज को HTTP पर सर्व करें। यह निर्देश पार्शियल के लिए XHR जारी करता है, इसलिए फ़ाइल पते के माध्यम से डिस्क से सीधे Main.html खोलने पर अधिकांश ब्राउज़रों में यह विफल हो जाता है। कोई भी स्थानीय वेब सर्वर इसे ठीक कर देता है।
- पाथ रिजॉल्व होने की पुष्टि करें। अनुरोध के लिए नेटवर्क पैनल देखें। 404 का मतलब है कि पथ उस पृष्ठ के सापेक्ष है जो इंक्लूड को होस्ट करता है, न कि उस पार्शियल के सापेक्ष जो इसे संदर्भित करता है।
- समान मूल के नियम का सम्मान करें। डिफ़ॉल्ट रूप से टेम्पलेट URL एप्लिकेशन दस्तावेज़ के डोमेन और प्रोटोकॉल से मेल खाना चाहिए, क्योंकि AngularJS इसे पास करता है। $sce.getTrustedResourceUrlकिसी अन्य स्थान से प्राप्त टेम्पलेट के लिए विश्वसनीय संसाधन में प्रविष्टि आवश्यक है। URL सूची, या एक स्पष्ट trustAsResourceUrl रैपर, और रिमोट सर्वर को अभी भी CORS हेडर भेजने होंगे।
- असफलता की आवाज़ सुनो। जब भी प्रतिक्रिया की स्थिति 200 से 299 के बीच होती है, तो $includeContentError उत्पन्न होता है, जिससे चुपचाप खाली क्षेत्र एक ऐसे संदेश में बदल जाता है जिसे लॉग करना आवश्यक होता है।
एक और कारण आसानी से नज़रअंदाज़ हो सकता है। AngularJS हर फ़ेच किए गए पार्शियल को $templateCache में रखता है, इसलिए एक संपादित फ़ाइल तब तक पुराना मार्कअप परोसती रह सकती है जब तक कि कैश एंट्री हटा नहीं दी जाती या पेज को सोर्स से रीलोड नहीं कर दिया जाता। जब किसी फ़्रैगमेंट को केवल मार्कअप के बजाय अपने स्वयं के व्यवहार की आवश्यकता होती है, तो एक कस्टम निर्देश अपने स्वयं के टेम्पलेट और पृथक दायरे के साथ यह बेहतर उपकरण है।
