यदि आप उपयोग कर रहे हैं कुछ समय के लिए, आपने शायद स्कोप फीचर के बारे में सुना है। यह Angular8 में एक इनबिल्ट मॉड्यूल है और पैरेंट स्कोप डिफ़ॉल्ट से उत्पन्न हुआ है। लेकिन अधिकांश समय, सामान्य घटकों के विकास में इसकी आवश्यकता नहीं होती है और यह तस्वीर में अलग-थलग पड़ गया है। इस लेख में, हम निम्नलिखित क्रम में Angular8 में अलग-अलग गुंजाइश के बारे में चर्चा करेंगे:
चलो शुरू करें।
Angular8 में अलग-थलग गुंजाइश क्या है?
Angular8 में पृथक दायरा मूल रूप से मूल दायरे से व्युत्पन्न नहीं किया गया है, लेकिन यह $ पैरेंट के माध्यम से मूल दायरे तक पहुँचने की सुविधा प्रदान करता है। पायथन में अलग-अलग गुंजाइश निर्देश में तीन मूल गुण हैं, जो नीचे सूचीबद्ध हैं।
गुंजाइश: गलत: यह निर्देश अलग-अलग दायरे में डिफ़ॉल्ट रूप से उपयोग किया जाता है और इसका उपयोग मुख्य रूप से उस घटक से गुंजाइश का पुन: उपयोग करने के लिए किया जाता है जिसका वर्तमान में उपयोग किया जा रहा है।
गुंजाइश: सच: इस निर्देश का उपयोग बच्चे के दायरे बनाने के लिए किया जाता है और यह मूल रूप से मूल दायरे को विरासत में प्राप्त करता है।
गुंजाइश: {…}: इसका उपयोग अलग-थलग स्कोप बनाने के लिए किया जाता है और यह मूल रूप से मूल स्कोप से होता है।
उपरोक्त निर्देशों को बेहतर ढंग से समझने के लिए, नीचे दिए गए स्पष्टीकरण पर एक नज़र डालें।
गुंजाइश: सच है
जनक स्कोप<<======prototype====== Child Scope
<<====== $Parent ====== Child Scope
स्ट्रिंग निरंतर पूल में, समान सामग्री वाले दो स्ट्रिंग ऑब्जेक्ट नहीं होंगे।
गुंजाइश: {}
जनक स्कोप<<=====$Parent Scope ========= Isolates Scope
यहां हमें अलग-थलग गुंजाइश और मूल दायरे के बीच तीन प्रकार के इंटरफेस का उपयोग करने की आवश्यकता है।
- डेटा बाइंड (=)
प्रक्षेप (@)
अभिव्यक्ति (&)
उदाहरण
स्कोप: {myValue1: '@ attribute1', myValue2: '= attribute2', myValue3: '& attribute3'}इंटरपोलेट या विशेषताएँ (@)
c ++ नेमस्पेस का उपयोग करें
इसका उपयोग DOM विशेषता के साथ पृथक स्कोप को बांधने के लिए किया जाता है। यह मूल रूप से अलग-अलग दायरे और मूल दायरे के बीच उपयोग किए जाने वाले एक तरह से निर्देश को सेटअप करता है। इसका मतलब यह है कि अगर पेरेंट स्कोप में कोई बदलाव होता है, तो तुरंत ही अलग-अलग दायरे में भी परिलक्षित होगा।
उदाहरण
.directive ('myDirective', function () {return {गुंजाइश: {myAttribute: '@',}}})अब हम इन दो toghether को बांधने के लिए एक निर्देश का उपयोग कर सकते हैं।
अभिव्यक्ति (&)
एक्सप्रेशन (&) का उपयोग पैरेंट स्कोप से अलग-थलग स्कोप में किसी फंक्शन को कॉल करने के लिए किया जाता है। यह मुख्य रूप से अन्य कार्यों के बीच कॉल बैक बनाने के लिए उपयोग किया जाता है।
उदाहरण
.directive ('myDirective', function () {return {गुंजाइश: {myIsolatedFunction: '&'}}})अब हम उपयोग करेंगे JUDGMENT
ठीक पर क्लिक करें विधि अब निम्नलिखित तरीके से नियंत्रक को वापस बुलाएगी। .controller ('myTestController', ['$ गुंजाइश', फंक्शन ($ गुंजाइश) {$ गुंजाइश.myUpdatedValue = function (myValue) {$ गुंजाइश.updatedValue = 'myalalue}}]))बाइंडिंग (=)
बाइंडिंग (=) गुण के समान है, एकमात्र अंतर यह है कि यह एक के बजाय दो तरह से संचार चैनल बनाता है।
उदाहरण
.directive ('myDirective', function () {return {स्कोप: {myBinding: '=',}}}Angular8 में Foreach फ़ंक्शन
अब जब आप Angular8 में अलग-अलग दायरे की मूल अवधारणा को जानते हैं, तो आइए हम साथ ही फ़ॉरच फ़ंक्शन को भी देखें।
Angular8 में Foreach
Angular8 में foreach फ़ंक्शन को सक्षम करने के लिए, नीचे उल्लिखित चरणों का पालन करें।
स्टेप 1
विज़ुअल एडिटर 2012 शुरू करें और नई और फ़ाइल के तहत प्रोजेक्ट करने के लिए नेविगेट करें। जब विंडो खुलती है तो फ़ाइल को forOrforeach नाम दें और फिर ओके बटन पर क्लिक करें।
चरण 2
एक बार चरण 1 पूरा हो जाने के बाद, सॉल्यूशन एक्सप्लोरर को खोलें जिसमें css फाइल, js फाइल, ts फाइल के साथ-साथ html फ़ाइल भी हो।
चरण 3
अब foreach फ़ंक्शन के लिए निम्न कोड चलाएँ।
forOrforeach.ts
वर्ग A {फ़ंक्शन () {var array = [1, 2, 3, 4] के लिए (var v में सरणी) // foreach के रूप में कार्य करने के लिए {अलर्ट (सरणी [v])}}} window.onload = () => {var call = new A () call.function ()}डिफ़ॉल्ट। Html
टाइपस्क्रिप्ट HTML ऐप
App.js
var A = (फ़ंक्शन () {function A () {} A.prototyp.function = function () {var array = [1, 2, 3, 4] के लिए (var v में सरणी) {alert (सरणी [v]] )}} वापसी A}) () window.onload = function () {var call = new A () call.function ()}उपरोक्त कोड के लिए आउटपुट कुछ इस तरह दिखाई देगा।
टाइपस्क्रिप्ट में forEach
जावा फैली और लागू होने के बीच का अंतर
अब हमें टाइपस्क्रिप्ट में फॉर्च्यूमेंट स्टेटमेंट को लागू करने का तरीका बताते हैं।
Newforeach.ts
वर्ग A {no: संख्या [] = [1, 2, 3] lognumber () {this.no.forEach ((nos) => {// foreach statement document.write ('संख्या =:' + nos)}) }} window.onload = () => {var call = new A () call.lognumber ()}उपरोक्त का उत्पादन होगा,
अब जब आप जानते हैं कि दोनों फ़ॉरच के साथ-साथ अलग-अलग स्कोप मॉड्यूल का उपयोग कैसे किया जाता है, तो हम आशा करते हैं कि आप अपने दिन में उसी का उपयोग करेंगे जो इसे अधिक कुशल बनाने के लिए Angular8 कोडिंग के दिन का उपयोग करेगा।दोनों मूल के साथ ही साथ Angular8 में अलग-अलग गुंजाइश के उपयोग के साथ मूल बातें जानें।
यह हमें कोणीय ट्यूटोरियल ब्लॉग के अंत में लाता है। मुझे उम्मीद है कि यह ब्लॉग जानकारीपूर्ण था और आपके लिए मूल्य वर्धित था। अब, आपको कोणीय के भवन ब्लॉकों के साथ स्पष्ट होना चाहिए और एक कोणीय अनुप्रयोग बनाने के लिए तैयार होना चाहिए। मैं आपको इसके माध्यम से जाने की सलाह दूंगा कोणीय ट्यूटोरियल Edureka वीडियो प्लेलिस्ट वीडियो देखने के लिए और एक कोणीय अनुप्रयोग बनाने का तरीका जानें।
इसकी जाँच पड़ताल करो 250,000 से अधिक संतुष्ट शिक्षार्थियों के एक नेटवर्क के साथ एक विश्वसनीय ऑनलाइन शिक्षण कंपनी, एडुरेका द्वारा, दुनिया भर में फैली हुई है। कोणीय एक जावास्क्रिप्ट ढांचा है जो स्केलेबल, एंटरप्राइज़ और प्रदर्शन क्लाइंट-साइड वेब एप्लिकेशन बनाने के लिए उपयोग किया जाता है। कोणीय फ्रेमवर्क अपनाने के उच्च होने के कारण, एप्लिकेशन का प्रदर्शन प्रबंधन अप्रत्यक्ष रूप से बेहतर रोजगार के अवसरों को संचालित करने वाला समुदाय है। एंगुलर सर्टिफिकेशन ट्रेनिंग का उद्देश्य एंटरप्राइज एप्लिकेशन डेवलपमेंट के आसपास इन सभी नई अवधारणाओं को कवर करना है।