angularjs - angular 2 tutorial



नियंत्रकों के बीच डेटा पास करें (3)

भले ही एक्सएलआईआई ने पूरी तरह से प्रतिक्रिया दी, मुझे यह ट्यूटोरियल एक सेवा का उपयोग करते हुए मिला। यह बहुत ही रोचक और दो तरीकों से संपत्ति को नियंत्रित करने वालों के बीच डेटा साझा करने का एक सरल तरीका है: https://egghead.io/lessons/angularjs-sharing-data-between-controllers

मैंने अभी भी इसे अभी के लिए इस्तेमाल नहीं किया है।

अन्यथा घटनाओं के आधार पर यह दूसरा तरीका भी है: http://www.objectpartners.com/2013/08/21/using-services-and-messages-to-share-data-between-controllers-in-angularjs/

मैं AngularJS सीखने के लिए कह रहा हूँ, बहुत से विभिन्न MV * फ्रेमवर्क से। मुझे रूपरेखा पसंद है, हालांकि मुझे नियंत्रकों के बीच डेटा पारित करने में परेशानी हो रही है।

मान लीजिए कि मेरे पास कुछ इनपुट (input.html) और एक नियंत्रक के साथ एक स्क्रीन है, चलो इनपुटकटल कहते हैं।
इस दृश्य पर एक बटन होता है जो आपको दूसरी स्क्रीन पर ले जाता है, मान लें कि approveCtrl कंट्रोलर के साथ approve (html) करें।
इस ApproveCtrl को InputCtrl से डेटा की आवश्यकता है। यह बड़े अनुप्रयोगों में एक बहुत ही सामान्य परिदृश्य की तरह लगता है।

मेरे पिछले एमवी * फ्रेमवर्क में, इसे (छद्म कोड) की तरह संभाला जाएगा:

   var self = this;
   onClick = function() {
          var approveCtrl = DI.resolve(ApproveCtrl);
          approveCtrl.property1 = self.property1;
          approveCtrl.property1 = self.property2;
          self.router.show(approveCtrl);  
   }            
  • यह नियंत्रक की तरह काम करेगा- पहले। आप पहले नियंत्रक बनाते हैं, इसे सही स्थिति में डालने का मौका देते हैं; बाद में व्यू बनाया जाता है।

अब, AngularJS में, मैं इसे इस तरह से संभाल रहा हूं:

 var self = this;
 onClick = function(){
          self.$locationService.path('approve');       
 }
  • यह व्यू-फर्स्ट की तरह काम करता है। आप कहते हैं कि नेविगेट करने के लिए कौन सा दृश्य / मार्ग है, नियंत्रक फ्रेमवर्क द्वारा बनाया गया है।

मुझे बनाए गए नियंत्रक की स्थिति को नियंत्रित करना और उसे डेटा पास करना कठिन लगता है। मैंने दृष्टिकोणों को देखा है और कोशिश की है, लेकिन मेरी राय में सभी के पास अपने मुद्दे हैं:

  1. InputCtrl और ApproveCtrl में एक साझा सेवा को इंजेक्ट करें और इस सेवा पर साझा किए जाने के लिए सभी डेटा डालें
    • यह चारों ओर गंदे काम जैसा दिखता है; साझा सेवा में स्थिति वैश्विक स्थिति बन जाती है, जबकि मुझे केवल डेटा को एप्रूवेटक्लेयर पास करने की आवश्यकता होती है
    • इस साझा सेवा का जीवनकाल उस तरीके से अधिक लंबा है, जिसकी मुझे आवश्यकता है - केवल डेटा को पासवेर्टक्लो को पास करने के लिए
  2. $ मार्गप्रेम में डेटा पास करें
    • यह काफी गन्दा हो जाता है जब पास में बहुत सारे पैरामीटर होते हैं
  3. $ गुंजाइश घटनाओं का उपयोग करें
    • वैचारिक रूप से, यह कुछ ऐसा नहीं है जिसके लिए मैं घटनाओं का उपयोग करूंगा - मुझे केवल डेटा को पासवेस्टर्ल, कुछ भी नहीं होने की आवश्यकता है
    • यह काफी बोझिल है; मुझे पहले माता-पिता को एक घटना भेजनी है, फिर वह इसे बच्चों के लिए प्रसारित करेगा

क्या मुझसे कोई चूक हो रही है? क्या मैं बहुत छोटे नियंत्रक बना रहा हूँ? क्या मैं अन्य चौखटों से आदतों को पकड़ने की कोशिश कर रहा हूँ?


Answer #1

यदि आप एक पृष्ठ (पेज 1) से दूसरे पृष्ठ (पृष्ठ 2) तक सरल स्ट्रिंग डेटा पास करना चाहते हैं, तो एक समाधान पारंपरिक यूआरएल मापदंडों का उपयोग करना है। पृष्ठ 2 मार्ग url को "/ page2 / param1 / param2" जैसे पैरामीटर के साथ शामिल करें। पेज 2 के नियंत्रक " मार्गप्राम " में पैरामीटर प्राप्त करेंगे। आप मार्गप्राराम.परम 1 और मार्गप्रेम.परम 2 के रूप में पैरामीटर का उपयोग करने में सक्षम होंगे । नीचे दिए गए कोड से अपनाया गया है: कोणीय जेएस का उपयोग करके यूआरएल पैरामीटर कैसे प्राप्त करें

पृष्ठ 2 के रूट को पेज 1 के कंट्रोलर (जेएस) या इसके यूआरएल में पैरामीटर के साथ एक यूआरएल में शामिल करें:

"/page2/param1/param2"

पृष्ठ 2 मार्ग:

$routeProvider.when('/page2/:param1/:param2', {
    templateUrl: 'pages/page2.html',    
    controller: 'Page2Ctrl'
});

और नियंत्रक:

.controller('Page2Ctrl', ['$scope','$routeParams', function($scope, $routeParams) {
  $scope.param1 = $routeParams.param1;
  $scope.param2 = $routeParams.param2;
  ...
}]);

अब आप अपने पेज 2 के html / टेम्पलेट में भी पैरामीटर्स (param1 और param2) मानों को एक्सेस कर सकते हैं।


Answer #2

संरचना के संदर्भ में AngularJS MVC एक से अधिक मॉड्यूलर है।

क्लासिक एमवीसी 3 सरल परतों का वर्णन करता है जो एक दूसरे के साथ इस तरह से बातचीत करते हैं कि नियंत्रक मॉडल विथ व्यू (और मॉडल को सीधे देखें या इसके विपरीत काम नहीं करना चाहिए)।

कोणीय में आपके पास कई हो सकते हैं, कुछ पूरी तरह से वैकल्पिक, संस्थाएं जो एक दूसरे के बीच कई तरीकों से बातचीत कर सकती हैं, उदाहरण के लिए:

यही कारण है कि विभिन्न संस्थाओं के बीच आपके डेटा को संप्रेषित करने के कई तरीके हैं। आप ऐसा कर सकते हैं:

  • this और $scope बीच अंतर का उपयोग करके नियंत्रकों के बीच सीधे संदेश भेजें
  • घटनाओं का उपयोग करके संदेश भेजें
  • साझा सिस्टम का उपयोग करके संदेश भेजें (नोट: ऊपर जैसा लिंक, उत्तर दोनों तकनीकों को दिखाता है)

या

  • AJAX बैकएंड का उपयोग करके संदेश भेजें
  • बाहरी सिस्टम (जैसे MQ ) का उपयोग करके संदेश भेजें

...और भी काफी। इसकी विविधता के कारण एंगुलर डेवलपर / डिज़ाइनर को यह चुनने की अनुमति देता है कि वे किस तरह से सबसे अधिक आरामदायक हैं और उन्हें लेकर चलते हैं। मैं आपको AngularJS Developer Guide पढ़ने की सलाह देता हूं जहां आप कुछ सामान्य समस्याओं के लिए धन्य समाधान पा सकते हैं।





angularjs