एंगुलरजेएस को लीगेसी कोड के साथ जोड़ना

एंगुलरजेएस को लीगेसी अनुप्रयोगों के साथ एकीकृत करना बाहरी कॉलबैक के कारण चुनौतियां पेश कर सकता है, जिन्हें एंगुलर फ्रेमवर्क के साथ इंटरैक्ट करने की आवश्यकता होती है। . इसे संबोधित करने के लिए, AngularJS इंटरऑपरेबिलिटी के लिए कई तंत्र प्रदान करता है। डेटा। इसके बाद लीगेसी कोड AngularJS के एक्सटर्नलइंटरफ़ेस ऑब्जेक्ट के माध्यम से इन विधियों को कॉल कर सकता है। सेवा के भीतर, सेटर फ़ंक्शन को एंगुलर इवेंट बस का उपयोग करके एक इवेंट को ट्रिगर करना चाहिए।

कंट्रोलर में सेवाओं से इवेंट कैप्चर करना

कंट्रोलर सेवाओं द्वारा उत्सर्जित इवेंट की सदस्यता ले सकते हैं। ऐसा करने के लिए, पहले सेवा में एक ईवेंट नाम परिभाषित करें। नियंत्रक में, एक इवेंट श्रोता को पंजीकृत करने के लिए $scope.$on() विधि का उपयोग करें जो प्रासंगिक नाम के साथ घटनाओं को पकड़ लेगा और सभी आवश्यक यूआई अपडेट करेगा।

Limitations

यह ध्यान रखना महत्वपूर्ण है कि AngularJS के बाहर से सेवा के डेटा के सीधे अपडेट हमेशा दृश्य में अपडेट को ट्रिगर नहीं कर सकते हैं। ऐसा इसलिए है क्योंकि AngularJS एकतरफा डेटा बाइंडिंग तंत्र का उपयोग करता है। यह सुनिश्चित करने के लिए कि अद्यतन दृश्य में प्रतिबिंबित हों, किसी भी डेटा परिवर्तन या दायरे पर विधि आमंत्रण को AngularJS के $apply() फ़ंक्शन में लपेटा जाना चाहिए।

उदाहरण

निम्नलिखित कोड स्निपेट दर्शाता है कि AngularJS में एक सेवा कैसे स्थापित की जाए और इसे पुराने AS3 एप्लिकेशन से कैसे एक्सेस किया जाए:

angular.module('myApp').service('myService', function() { यह.डेटा = []; this.setData = फ़ंक्शन (डेटा) { यह.डेटा.पुश(डेटा); this.$emit('dataUpdated', data); }; });

// लीगेसी AS3 कोड में externalInterface.call("myService.setData", data);

angular.module('myApp').service('myService', function () {
  this.data = [];

  this.setData = function (data) {
    this.data.push(data);
    this.$emit('dataUpdated', data);
  };
});

$scope.$on('dataUpdated', function (event, data) {
  // प्राप्त डेटा के साथ यूआई को अपडेट करें
});