$ गुंजाइश और $ rootScope के बीच अंतर


90

किसी को भी $ गुंजाइश और $ rootScope के बीच अंतर समझा सकते हैं?

मुझे लगता है

गुंजाइश $:

हम इसका उपयोग करके विशेष पृष्ठ से विशेष नियंत्रक में एनजी-मॉडल गुण प्राप्त कर सकते हैं।


$ rootScope

हम इसका उपयोग करके किसी भी पेज से किसी भी नियंत्रक में सभी एनजी-मॉडल गुण प्राप्त कर सकते हैं।


क्या ये सही है? या फिर कुछ और?


@CodeError! आपका क्या मतलब है, यह लिंक मेरे प्रश्न में मदद नहीं करता है, इसमें $ गुंजाइश है। $ जड़, $ जड़ नहीं है

$ rootScope आपके कोणीय ऐप में सभी स्कोप के पदानुक्रम के शीर्ष पर है।
अंगद

जवाबों:


87

"$ rootScope" एक वेब पेज में निर्मित सभी "$ गुंजाइश" कोणीय वस्तुओं का एक मूल उद्देश्य है।

यहां छवि विवरण दर्ज करें

$ गुंजाइश बनाई गई है ng-controllerजबकि $ rootcope के साथ बनाया गया है ng-app

यहां छवि विवरण दर्ज करें


67

मुख्य अंतर ऑब्जेक्ट के साथ सौंपी गई संपत्ति की उपलब्धता है। नियत की गई संपत्ति का $scopeउपयोग उस नियंत्रक के बाहर नहीं किया जा सकता है जिसमें इसे परिभाषित किया गया है जबकि एक संपत्ति के साथ सौंपा गया है$rootScope उपयोग कहीं भी किया जा सकता है।

उदाहरण: यदि आप नीचे दिए गए उदाहरण में विभाग की संपत्ति से प्रतिस्थापित $rootScopeकरते हैं $scope, तो दूसरे नियंत्रक में पहले नियंत्रक से आबादी नहीं होगी

angular.module('example', [])
  .controller('GreetController', ['$scope', '$rootScope',
    function($scope, $rootScope) {
      $scope.name = 'World';
      $rootScope.department = 'Angular';
    }
  ])
  .controller('ListController', ['$scope',
    function($scope) {
      $scope.names = ['Igor', 'Misko', 'Vojta'];
    }
  ]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<body ng-app="example">
  <div class="show-scope-demo">
    <div ng-controller="GreetController">
      Hello {{name}}!
    </div>
    <div ng-controller="ListController">
      <ol>
        <li ng-repeat="name in names">{{name}} from {{department}}</li>
      </ol>
    </div>
  </div>
</body>


18

कोणीय के डेवलपर की गाइड स्कोप के अनुसार :

प्रत्येक कोणीय अनुप्रयोग में एक मूल स्कोप होता है, लेकिन कई बाल स्कोप हो सकते हैं। एप्लिकेशन में कई स्कोप हो सकते हैं, क्योंकि कुछ निर्देश नए चाइल्ड स्कोप बनाते हैं (निर्देशन संबंधी दस्तावेज़ीकरण देखें कि कौन से निर्देश नए स्कोप बनाते हैं)। जब नए स्कोप बनाए जाते हैं, तो उन्हें उनके मूल क्षेत्र के बच्चों के रूप में जोड़ा जाता है। यह एक ट्री स्ट्रक्चर बनाता है जो DOM को समानता देता है जहां वे जुड़े हुए हैं।

दोनों नियंत्रकों और निर्देशों में गुंजाइश का संदर्भ है, लेकिन एक दूसरे के लिए नहीं। यह व्यवस्था नियंत्रक से निर्देशन के साथ-साथ DOM से भी अलग करती है। यह एक महत्वपूर्ण बिंदु है क्योंकि यह नियंत्रकों को अज्ञेयवादी बनाता है, जो अनुप्रयोगों की परीक्षण कहानी को बेहतर बनाता है।


13

$rootScopeविश्व स्तर पर उपलब्ध है, चाहे आप किसी भी नियंत्रक में हों, जबकि $scopeकेवल वर्तमान नियंत्रक के लिए उपलब्ध है और यह बच्चे हैं।


3

दूसरे तरीके से हम इसे देख सकते हैं; स्थानीय है $rootScopeजबकि वैश्विक $scopeहै। जब Controllerएक पृष्ठ को सौंपा जाता है, तो एक $scopeचर का उपयोग यहां किया जा सकता है क्योंकि यह इस नियंत्रक को बांधता है। लेकिन जब हम इसके मूल्य को अन्य नियंत्रकों या सेवाओं में साझा करना चाहते हैं, तो $rootScopeइसका उपयोग किया जा रहा है (** वैकल्पिक तरीके हैं, हम मूल्यों को साझा कर सकते हैं लेकिन इस मामले में हम उपयोग करना चाहते हैं$rootScope )।

आप उन दो शब्दों को कैसे परिभाषित करते हैं, इस बारे में आपका दूसरा प्रश्न सही है।

अंत में थोड़ा सा ट्रैक करें, कृपया $rootScopeसावधानी से उपयोग करें । जिस तरह से आप वैश्विक चर का उपयोग करते हैं, उसी तरह से डीबग करने के लिए दर्द हो सकता है और आप गलती से वैश्विक चर को टाइमर या किसी ऐसी चीज़ के अंदर बदल सकते हैं जो आपके पढ़ने को गलत बनाता है।


2

प्रत्येक एप्लिकेशन में एक एकल रूटस्कोप होता है और इसका जीवनचक्र ऐप के समान होता है और प्रत्येक नियंत्रक के पास इसका स्वयं का दायरा हो सकता है, जिसे दूसरों के साथ साझा नहीं किया जाता है।

इस लेख पर एक नज़र डालें:

https://github.com/angular/angular.js/wiki/Understanding-Scopes


2

मैं आपको स्कॉप्स के लिए आधिकारिक इन-डेप्थ एंगुलर डॉक्यूमेंट पढ़ने की सलाह देता हूं। 'स्कोप पदानुक्रम' अनुभाग पर शुरू करें:

https://docs.angularjs.org/guide/scope

अनिवार्य रूप से, $ rootScope और $ गुंजाइश दोनों डोम के विशिष्ट भागों की पहचान करते हैं जिसके भीतर

  • कोणीय संचालन किया जाता है
  • $ rootScope या $ गुंजाइश के भाग के रूप में घोषित चर उपलब्ध हैं

जो कुछ भी $ rootScope से संबंधित है, वह आपके Angular ऐप पर वैश्विक रूप से उपलब्ध है, जबकि $ स्कोप के अंतर्गत आने वाली कोई भी चीज़ DOM के उस हिस्से के भीतर उपलब्ध है, जिसके लिए वह स्कोप लागू होता है।

$ RootScope को DOM तत्व पर लागू किया जाता है जो कोणीय एप के लिए मूल तत्व है (इसलिए नाम $ rootScope)। जब आप DOM के एक तत्व में ng-app निर्देश जोड़ते हैं, तो यह DOM का मूल तत्व बन जाता है जिसके भीतर $ rootScope उपलब्ध है। दूसरे शब्दों में, $ rootScope के गुण आदि आपके संपूर्ण कोणीय अनुप्रयोग में उपलब्ध होंगे।

एक कोणीय $ गुंजाइश (और यह सब चर और संचालन) आपके आवेदन के भीतर डोम के एक विशेष सबसेट के लिए उपलब्ध है। विशेष रूप से, किसी विशेष नियंत्रक के लिए $ गुंजाइश डोम के उस हिस्से के लिए उपलब्ध है, जहां उस विशेष नियंत्रक को लागू किया गया है (एनजी-नियंत्रक निर्देश का उपयोग करके)। ध्यान दें कि कुछ निर्देश जैसे एनजी-रिपीट, जब डीओएम के एक हिस्से के भीतर लागू किया जाता है, जहां नियंत्रक लागू किया गया है, मुख्य दायरे के बाल स्कोप बना सकते हैं - एक ही नियंत्रक के भीतर - एक नियंत्रक में केवल एक गुंजाइश नहीं होती है।

अगर आप अपने एंगुलर ऐप को चलाते समय जेनरेट किए गए HTML को देखते हैं, तो आप आसानी से देख सकते हैं कि कौन से DOM एलिमेंट्स में 'स्कोप' है, क्योंकि एंगुलर किसी भी एलिमेंट पर क्लास एनग-स्कोप जोड़ता है जिसमें स्कोप लागू किया गया है (रूट एलिमेंट सहित) एप्लिकेशन, जिसमें $ rootScope है)।

वैसे, $ स्कोप और $ रूटस्स्कोप की शुरुआत में '$' का संकेत एंगुलर में केवल एक पहचानकर्ता है जो एंगुलर द्वारा आरक्षित है।

ध्यान दें कि मॉड्यूल और नियंत्रकों के बीच चर आदि साझा करने के लिए $ rootScope का उपयोग करना आमतौर पर सबसे अच्छा अभ्यास नहीं माना जाता है। जावास्क्रिप्ट डेवलपर्स वैश्विक चर के 'प्रदूषण' से बचने के बारे में बात करते हैं क्योंकि वहां चर साझा किए जाते हैं, क्योंकि बाद में यदि किसी अन्य नाम का एक चर कहीं और उपयोग किया जाता है, तो डेवलपर को यह पता चले बिना कि यह पहले से ही $ rootScope पर घोषित है। इसका महत्व अनुप्रयोग के आकार और इसे विकसित करने वाली टीम के साथ बढ़ता है। आदर्श रूप से $ rootScope में केवल स्थिरांक या स्थिर चर शामिल होंगे, जिनका उद्देश्य पूरे ऐप में हर समय सुसंगत होना है। मॉड्यूल भर में सामान साझा करने का एक बेहतर तरीका सेवाओं और कारखानों का उपयोग करना हो सकता है, जो एक और विषय है!


2

दोनों जावा स्क्रिप्ट ऑब्जेक्ट हैं और अंतर नीचे के रूप में चित्र द्वारा चित्रित किया गया है।

यहां छवि विवरण दर्ज करें

NTB:
पहले कोणीय अनुप्रयोग किसी भी मॉडल या फ़ंक्शन की संपत्ति को $ दायरे में खोजने की कोशिश करते हैं, अगर यह संपत्ति को $ दायरे में नहीं मिला है, तो यह ऊपरी पदानुक्रम में मूल दायरे में खोज करता है। यदि संपत्ति अभी भी ऊपरी पदानुक्रम में नहीं मिली है, तो कोणीय $ जड़ों में हल करने की कोशिश करता है।


1

जॉन पापा के एंगुलरजेएस स्टाइलगाइड की तरह नई शैली, सुझाव दे रही है कि हमें $scopeवर्तमान पृष्ठ की संपत्तियों को बचाने के लिए उपयोग नहीं करना चाहिए । इसके बजाय हमें इसका उपयोग करना चाहिएcontrollerAs with vm दृष्टिकोण का जहां दृश्य नियंत्रक ऑब्जेक्ट को ही बांधता है। इसके बाद कंट्रोलर सिंटैक्स का उपयोग करते हुए इसके लिए कैप्चर वैरिएबल का उपयोग करें। Vm जैसे एक सुसंगत चर नाम चुनें, जो ViewModel के लिए खड़ा है।

$scopeहालांकि आपको इसकी देखने की क्षमताओं के लिए अभी भी आवश्यकता होगी ।

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.