AngularJS में $scope क्या है? उदाहरण सहित ट्यूटोरियल

AngularJS में $scope क्या है?

AngularJS में $scope एक अंतर्निहित ऑब्जेक्ट है जो मूल रूप से "कंट्रोलर" और "व्यू" को बांधता है। नियंत्रक के भीतर स्कोप में सदस्य चर को परिभाषित किया जा सकता है जिसे फिर व्यू द्वारा एक्सेस किया जा सकता है।

प्रत्येक नियंत्रक AngularJS एप्लिकेशन को डिपेंडेंसी इंजेक्शन के माध्यम से अपना $scope इंस्टेंस प्राप्त होता है। आप उस ऑब्जेक्ट से जो कुछ भी जोड़ते हैं, वह कंट्रोलर द्वारा नियंत्रित टेम्पलेट को दिखाई देता है, इसलिए $scope एक साझा डेटा मॉडल के रूप में कार्य करता है जो आपके और आपके बीच स्थित होता है। Javaस्क्रिप्ट लॉजिक और आपका HTML मार्कअप।

नीचे दिए गए उदाहरण पर विचार करें:

angular.module('app',[]).controller('HelloWorldCtrl',
	function($scope)
	{
		$scope.message = "Hello World"
	});

Code स्पष्टीकरण:

1. मॉड्यूल का नाम “ऐप” है
2. कंट्रोलर का नाम “HelloWorldCtrl” है।
3. स्कोप ऑब्जेक्ट मुख्य ऑब्जेक्ट है जिसका उपयोग नियंत्रक से दृश्य तक जानकारी पास करने के लिए किया जाता है।
4. सदस्य चर को स्कोप ऑब्जेक्ट में जोड़ा गया

एक सिंगल कंट्रोलर और एक सिंगल व्यू से आधी तस्वीर ही समझ आती है। असल एप्लीकेशन में कंट्रोलर एक-दूसरे के अंदर होते हैं, लिस्ट दोहराई जाती हैं और विजेट्स का पुन: उपयोग किया जाता है, जिसका मतलब है कि एक ही समय में कई स्कोप मौजूद होते हैं।

AngularJS में स्कोप हायरार्की और इनहेरिटेंस कैसे काम करते हैं

प्रत्येक AngularJS एप्लिकेशन में केवल एक रूट स्कोप होता है और इसमें कितने भी चाइल्ड स्कोप हो सकते हैं। डायरेक्टिव इन चाइल्ड स्कोप को बनाते हैं और उन्हें उस DOM एलिमेंट से जोड़ते हैं जिसे वे डेकोरेट करते हैं, इसलिए स्कोप ट्री रेंडर किए गए पेज की संरचना को प्रतिबिंबित करता है।

जब AngularJS किसी अभिव्यक्ति का मूल्यांकन करता है, जैसे कि {{siteName}}यह सबसे पहले एलिमेंट से जुड़े स्कोप में उस प्रॉपर्टी को खोजता है। यदि प्रॉपर्टी मौजूद नहीं है, तो खोज पैरेंट स्कोप में चली जाती है और रूट स्कोप तक पहुंचने तक ऊपर की ओर बढ़ती रहती है। Javaस्क्रिप्ट डेवलपर्स इस व्यवहार को प्रोटोटाइपल इनहेरिटेंस के रूप में जानते हैं, और चाइल्ड स्कोप ठीक उसी तरह अपने पेरेंट्स से इनहेरिट करते हैं।

नीचे दिए गए उदाहरण में एक कंट्रोलर को दूसरे के अंदर नेस्ट किया गया है ताकि आप इनहेरिटेंस को होते हुए देख सकें।

<div ng-app="scopeDemo">
    <div ng-controller="ParentCtrl">
        Parent scope value: {{siteName}}
        <div ng-controller="ChildCtrl">
            Child reads parent value: {{siteName}}
            Child own value: {{lesson}}
        </div>
    </div>
</div>

<script type="text/javascript">
    var app = angular.module("scopeDemo", []);

    app.controller("ParentCtrl", function($scope) {
        $scope.siteName = "Guru99";
    });

    app.controller("ChildCtrl", function($scope) {
        $scope.lesson = "AngularJS Scope";
    });
</script>

Code स्पष्टीकरण:

1. ParentCtrl परिभाषित करता है siteName अपने दायरे में।
2. ChildCtrl कभी परिभाषित नहीं करता siteNameफिर भी, भीतरी div अभी भी प्रिंट करता है Guru99 क्योंकि लुकअप पैरेंट स्कोप तक जाता है।
3. lesson यह केवल चाइल्ड स्कोप में ही मौजूद रहता है, इसलिए पैरेंट डिव इसे पढ़ नहीं सकता।

कौन से निर्देश एक नया दायरा बनाते हैं?

• एनजी-कंट्रोलर: यह उस एलिमेंट के लिए चाइल्ड स्कोप बनाता है जिस पर इसे रखा जाता है।
• एनजी-रिपीट: यह प्रति पुनरावृति एक चाइल्ड स्कोप बनाता है, यही कारण है कि प्रत्येक पंक्ति एक ही अभिव्यक्ति के लिए अलग-अलग मान रख सकती है।
• अनुकूलित निर्देश: बच्चे के दायरे का अनुरोध कर सकता है, या एक अलग वह स्कोप जो जानबूझकर अपने मूल स्ट्रक्चर से इनहेरिट नहीं करता है।
• घटक निर्देश: जो कुछ भी पंजीकृत है .component() हेल्पर को हमेशा एक आइसोलेट स्कोप प्राप्त होता है।

क्योंकि चाइल्ड स्कोप ऊपर की ओर पढ़ते हैं, इसलिए डेवलपर्स अक्सर सोचते हैं कि उस श्रृंखला का शीर्ष कहाँ स्थित है। उस शीर्ष स्तर के ऑब्जेक्ट को $rootScope कहा जाता है।

$scope और $rootScope में क्या अंतर है?

एंगुलरजेएस $rootScope $rootScope पूरे एप्लिकेशन का दायरा है। किसी एप्लिकेशन में केवल एक ही $rootScope हो सकता है और इसे वैश्विक चर की तरह उपयोग किया जाता है। प्रत्येक $scope एक चाइल्ड स्कोप होता है, और $rootScope ट्री के शीर्ष पर स्थित पैरेंट होता है। नीचे दी गई तालिका इन दोनों ऑब्जेक्ट्स की तुलना करती है।

$rootScope का उपयोग सोच-समझकर करें। इसमें रखी गई कोई भी चीज़ पूरे एप्लिकेशन में रहती है और हर जगह पठनीय होती है, इसलिए वैश्विक स्थिति के लिए एक साझा सेवा आमतौर पर एक सुरक्षित स्थान होता है। आधिकारिक $rootScope संदर्भ इसमें संपूर्ण एपीआई सूचीबद्ध है।

डेटा कहाँ मौजूद है, यह जानना काम का आधा हिस्सा है। दूसरा आधा हिस्सा यह सिखाना है कि उपयोगकर्ता द्वारा कुछ करने पर कैसे प्रतिक्रिया देनी है।

AngularJS में व्यवहार स्थापित करना या जोड़ना

घटनाओं पर प्रतिक्रिया करने या दृश्य में किसी प्रकार की गणना/प्रसंस्करण निष्पादित करने के लिए, हमें स्कोप को व्यवहार प्रदान करना होगा।

दृश्य द्वारा ट्रिगर किए जा सकने वाले विशिष्ट ईवेंट पर प्रतिक्रिया देने के लिए स्कोप ऑब्जेक्ट में व्यवहार जोड़े जाते हैं। एक बार नियंत्रक में व्यवहार परिभाषित हो जाने के बाद, इसे दृश्य द्वारा एक्सेस किया जा सकता है।

आइये एक उदाहरण देखें कि हम इसे कैसे प्राप्त कर सकते हैं।

<!DOCTYPE html>  
<html lang="en">  
<head>  
    <meta chrset="UTF 8">
    <title>Guru99</title>     
</head>  
<body ng-app="DemoApp">
<h1> Guru99 Global Event</h1>
<script src="https://code.angularjs.org/1.6.9/angular.js"></script>
<div ng-controller="DemoController">
	{{fullName("Guru","99")}}
</div>
<script type="text/javascript">  
	var app = angular.module("DemoApp", []);
	app.controller("DemoController", function($scope) {
    
    $scope.fullName=function(firstName,lastname){
		return firstName + lastname;
		}
	} );
</script> 

</body>  
</html>

Code स्पष्टीकरण:

1. हम "fullName" नामक एक व्यवहार बना रहे हैं। यह व्यवहार एक फ़ंक्शन है जो 2 पैरामीटर (firstName,lastname) स्वीकार करता है।
2. इसके बाद यह व्यवहार इन दो पैरामीटरों का संयोजन लौटाता है।
3. व्यू में हम बिहेवियर को कॉल कर रहे हैं और उसमें “ के 2 मान पास कर रहे हैंGuru" और "99" जो व्यवहार में पैरामीटर के रूप में पास किए जाते हैं।

यदि कमांड सफलतापूर्वक निष्पादित हो जाता है, तो जब आप ब्राउज़र में अपना कोड चलाएंगे तो निम्नलिखित आउटपुट दिखाया जाएगा।

आउटपुट:

ब्राउज़र में आपको दोनों मानों का संयोजन दिखाई देगा। Guru और 99 जो व्यवहार में पारित किए गए थे नियंत्रक.

ऊपर दिए गए उदाहरण की तरह बाइंडिंग अपने आप रीफ्रेश हो जाती हैं, और किसी एप्लिकेशन के बड़ा होने से पहले उस प्रक्रिया को समझना महत्वपूर्ण है जिसके कारण ऐसा होता है।

स्कोप वॉचर्स और डाइजेस्ट साइकिल क्यों महत्वपूर्ण हैं?

AngularJS, चेंज इवेंट्स के बजाय डर्टी चेकिंग के माध्यम से व्यू को स्कोप के साथ तालमेल में रखता है। तीन स्कोप API इस प्रक्रिया को संचालित करते हैं:

• $watch: किसी एक्सप्रेशन के लिए एक लिसनर रजिस्टर करता है। इंटरपोलेशन जैसे {{fullName}} टेम्प्लेट लिंकिंग के दौरान आपके लिए वॉचर्स को रजिस्टर करें।
• $आवेदन: यह AngularJS एक्ज़ीक्यूशन कॉन्टेक्स्ट में प्रवेश करता है, आपके कोड का मूल्यांकन करता है और फिर डाइजेस्ट को ट्रिगर करता है। इसकी आवश्यकता केवल कस्टम इवेंट कॉलबैक या थर्ड पार्टी लाइब्रेरी कॉलबैक के अंदर ही होती है, क्योंकि बिल्ट-इन डायरेक्टिव इसे पहले ही कॉल कर लेते हैं।
• $डाइजेस्ट: यह $rootScope और उसके बच्चों पर मौजूद प्रत्येक वॉचर को देखता है, वर्तमान मान की तुलना पिछले मान से करता है, और तब तक दोहराता है जब तक कि मॉडल में परिवर्तन होना बंद न हो जाए।

क्योंकि डाइजेस्ट कई पास चला सकता है, इसलिए वॉच एक्सप्रेशन को कम खर्चीला रखना चाहिए। इनके अंदर DOM एक्सेस से बचें, क्योंकि DOM को पढ़ना किसी अन्य फ़ाइल को पढ़ने की तुलना में कई गुना धीमा होता है। Javaस्क्रिप्ट प्रॉपर्टी।

घड़ी की गहराई भी लागत को प्रभावित करती है। संदर्भ के आधार पर घड़ी देखना सबसे तेज़ तरीका है और इससे तभी पता चलता है जब पूरी कीमत बदल दी जाती है। $watchCollection यह किसी ऐरे या ऑब्जेक्ट के अंदर आइटम जोड़े जाने, हटाए जाने या पुनर्व्यवस्थित किए जाने पर ध्यान देता है। मान के आधार पर निगरानी करने से प्रत्येक डाइजेस्ट पर एक नेस्टेड संरचना को पार किया जाता है और यह सबसे खर्चीला विकल्प है, इसलिए इसे सबसे अंत में चुनें।

अक्सर पूछे जाने वाले प्रश्न