AngularJS
डेटा साझा करना
खोज…
टिप्पणियों
कोणीय के साथ काम करते समय एक बहुत ही सामान्य सवाल यह है कि नियंत्रकों के बीच डेटा कैसे साझा किया जाए। किसी सेवा का उपयोग करना सबसे लगातार प्रतिक्रिया है और यह दो या अधिक नियंत्रकों के बीच किसी भी प्रकार की डेटा ऑब्जेक्ट को साझा करने के लिए फ़ैक्टरी पैटर्न का प्रदर्शन करने वाला एक सरल उदाहरण है। क्योंकि यह एक साझा ऑब्जेक्ट संदर्भ है, सेवा का उपयोग करके अन्य सभी नियंत्रकों में एक नियंत्रक में एक अद्यतन तुरंत उपलब्ध होगा। ध्यान दें कि सेवा और कारखाने और दोनों प्रदाता ।
डेटा साझा करने के लिए ngStorage का उपयोग करना
सबसे पहले, अपने index.html में ngStorage स्रोत शामिल करें।
एक उदाहरण ngStorage src इंजेक्शन होगा:
<head>
<title>Angular JS ngStorage</title>
<script src = "//ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<script src="https://rawgithub.com/gsklee/ngStorage/master/ngStorage.js"></script>
</head>
ngStorage आपको 2 स्टोरेज देता है: $localStorage और $sessionStorage । आपको ngStorage की आवश्यकता है और सेवाओं को इंजेक्ट करें।
मान लीजिये यदि ng-app="myApp" , तो आप निम्नलिखित के रूप में ngStorage को इंजेक्ट करेंगे:
var app = angular.module('myApp', ['ngStorage']);
app.controller('controllerOne', function($localStorage,$sessionStorage) {
// an object to share
var sampleObject = {
name: 'angularjs',
value: 1
};
$localStorage.valueToShare = sampleObject;
$sessionStorage.valueToShare = sampleObject;
})
.controller('controllerTwo', function($localStorage,$sessionStorage) {
console.log('localStorage: '+ $localStorage +'sessionStorage: '+$sessionStorage);
})
जब तक आप नियंत्रकों में उन सेवाओं को इंजेक्ट करते हैं, तब तक $localStorage और $sessionStorage किसी भी नियंत्रकों के माध्यम से विश्व स्तर पर सुलभ है।
आप HTML5 के localStorage और sessionStorage का भी उपयोग कर सकते हैं। हालाँकि, HTML5 localStorage का उपयोग करने के लिए आपको उन्हें उपयोग करने या सहेजने से पहले अपनी वस्तुओं को क्रमबद्ध करना और उनका उपयोग करना होगा।
उदाहरण के लिए:
var myObj = {
firstname: "Nic",
lastname: "Raboy",
website: "https://www.google.com"
}
//if you wanted to save into localStorage, serialize it
window.localStorage.set("saved", JSON.stringify(myObj));
//unserialize to get object
var myObj = JSON.parse(window.localStorage.get("saved"));
सेवा का उपयोग करके एक नियंत्रक से दूसरे में डेटा साझा करना
हम controllers बीच डेटा set और get करने के लिए एक service बना सकते हैं और फिर उस सेवा को नियंत्रक फ़ंक्शन में इंजेक्ट कर सकते हैं जहां हम इसका उपयोग करना चाहते हैं।
सेवा :
app.service('setGetData', function() {
var data = '';
getData: function() { return data; },
setData: function(requestData) { data = requestData; }
});
नियंत्रक:
app.controller('myCtrl1', ['setGetData',function(setGetData) {
// To set the data from the one controller
var data = 'Hello World !!';
setGetData.setData(data);
}]);
app.controller('myCtrl2', ['setGetData',function(setGetData) {
// To get the data from the another controller
var res = setGetData.getData();
console.log(res); // Hello World !!
}]);
यहां, हम देख सकते हैं कि myCtrl1 का उपयोग डेटा setting के लिए किया जाता है और डेटा getting करने के लिए myCtrl2 का उपयोग किया जाता है। तो, हम डेटा को एक कंट्रोलर से दूसरे कंट्रेलर जैसे साझा कर सकते हैं।