मैं सबसे अच्छा अभ्यास के लिए देख रहा हूँ कि कैसे AngularJS में एक सेवा संपत्ति के लिए बाध्य किया जाए।
मैंने कई उदाहरणों के माध्यम से यह समझने के लिए काम किया है कि एंगुलरजेएस का उपयोग करके बनाई गई सेवा में गुणों को कैसे बांधें।
नीचे मेरे पास दो उदाहरण हैं कि मैं किसी सेवा में संपत्तियों को कैसे बांध सकता हूं; वे दोनों काम करते हैं। पहला उदाहरण बुनियादी बाइंडिंग का उपयोग करता है और दूसरा उदाहरण $ स्कोप का उपयोग किया जाता है। सेवा गुणों के साथ जुड़ने के लिए $ घड़ी
क्या किसी सेवा में संपत्तियों के लिए बाध्य करते समय या तो इन उदाहरणों को प्राथमिकता दी जाती है या क्या कोई अन्य विकल्प है जो मुझे नहीं पता है कि इसकी सिफारिश की जाएगी?
इन उदाहरणों का आधार यह है कि सेवा को प्रत्येक 5 सेकंड में अपने गुणों को "lastUpdated" और "कॉल" को अपडेट करना चाहिए। एक बार सेवा गुणों को अपडेट करने के बाद दृश्य को इन परिवर्तनों को प्रतिबिंबित करना चाहिए। ये दोनों उदाहरण सफलतापूर्वक काम करते हैं; मुझे आश्चर्य है कि अगर ऐसा करने का एक बेहतर तरीका है।
बुनियादी बंधन
निम्नलिखित कोड को यहाँ देखा और चलाया जा सकता है: http://plnkr.co/edit/d3c16z
<html>
<body ng-app="ServiceNotification" >
<div ng-controller="TimerCtrl1" style="border-style:dotted">
TimerCtrl1 <br/>
Last Updated: {{timerData.lastUpdated}}<br/>
Last Updated: {{timerData.calls}}<br/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("ServiceNotification", []);
function TimerCtrl1($scope, Timer) {
$scope.timerData = Timer.data;
};
app.factory("Timer", function ($timeout) {
var data = { lastUpdated: new Date(), calls: 0 };
var updateTimer = function () {
data.lastUpdated = new Date();
data.calls += 1;
console.log("updateTimer: " + data.lastUpdated);
$timeout(updateTimer, 5000);
};
updateTimer();
return {
data: data
};
});
</script>
</body>
</html>दूसरे तरीके से मैंने सेवा संपत्तियों के लिए बाध्यकारी को हल किया है। $ गुंजाइश का उपयोग करना है। नियंत्रक में $ घड़ी।
$ गुंजाइश। $ घड़ी
निम्नलिखित कोड को यहाँ देखा और चलाया जा सकता है: http://plnkr.co/edit/dSBlC9
<html>
<body ng-app="ServiceNotification">
<div style="border-style:dotted" ng-controller="TimerCtrl1">
TimerCtrl1<br/>
Last Updated: {{lastUpdated}}<br/>
Last Updated: {{calls}}<br/>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.5/angular.js"></script>
<script type="text/javascript">
var app = angular.module("ServiceNotification", []);
function TimerCtrl1($scope, Timer) {
$scope.$watch(function () { return Timer.data.lastUpdated; },
function (value) {
console.log("In $watch - lastUpdated:" + value);
$scope.lastUpdated = value;
}
);
$scope.$watch(function () { return Timer.data.calls; },
function (value) {
console.log("In $watch - calls:" + value);
$scope.calls = value;
}
);
};
app.factory("Timer", function ($timeout) {
var data = { lastUpdated: new Date(), calls: 0 };
var updateTimer = function () {
data.lastUpdated = new Date();
data.calls += 1;
console.log("updateTimer: " + data.lastUpdated);
$timeout(updateTimer, 5000);
};
updateTimer();
return {
data: data
};
});
</script>
</body>
</html>मुझे पता है कि मैं $ rootcope का उपयोग कर सकता हूं। सेवा में $ प्रसारण और $ root। नियंत्रक में $।, लेकिन अन्य उदाहरणों में मैंने बनाया है कि पहले प्रसारण पर $ प्रसारण / $ का उपयोग नहीं किया गया है। नियंत्रक, लेकिन अतिरिक्त कॉल जो प्रसारित होती हैं, उन्हें नियंत्रक में ट्रिगर किया जाता है। यदि आप $ rootcope को हल करने के तरीके से अवगत हैं। $ प्रसारण समस्या, कृपया एक उत्तर दें।
लेकिन जो मैंने पहले उल्लेख किया था, उसे आराम करने के लिए, मैं सबसे अच्छा अभ्यास जानना चाहूंगा कि कैसे एक सेवा गुणों से बंधे।
अपडेट करें
यह प्रश्न मूल रूप से अप्रैल 2013 में पूछा और उत्तर दिया गया था। मई 2014 में, गिल बिरमैन ने एक नया उत्तर प्रदान किया, जिसे मैंने सही उत्तर के रूप में बदल दिया। चूंकि गिल बिरमान के जवाब में बहुत कम वोट हैं, इसलिए मेरी चिंता यह है कि इस सवाल को पढ़ने वाले लोग कई अन्य वोटों के साथ अन्य उत्तरों के पक्ष में अपने जवाब की अवहेलना करेंगे। इससे पहले कि आप सबसे अच्छा उत्तर देने के बारे में निर्णय लें, मैं गिल बिरमैन के उत्तर की अत्यधिक अनुशंसा करता हूं।