AngularJS: एक सेवा गुणों के लिए बाध्यकारी का सही तरीका




data-binding angularjs-service (7)

मैं AngularJS में किसी सेवा प्रॉपर्टी से जुड़ने का सर्वोत्तम अभ्यास ढूंढ रहा हूं।

मैंने AngularJS का उपयोग करके बनाई गई सेवा में गुणों को बांधने के तरीके को समझने के लिए कई उदाहरणों के माध्यम से काम किया है।

नीचे मेरे पास दो उदाहरण हैं कि सेवा में संपत्तियों को कैसे बांधना है; वे दोनों काम करते हैं। पहला उदाहरण बुनियादी बाइंडिंग का उपयोग करता है और दूसरा उदाहरण $ स्कोप का उपयोग करता है। सेवा गुणों से जुड़ने के लिए $ घड़ी

क्या इनमें से कोई भी उदाहरण किसी सेवा में गुणों के लिए बाध्यकारी होने पर प्राथमिकता दी जाती है या क्या कोई अन्य विकल्प है जिसे मुझे पता नहीं है कि इसकी सिफारिश की जाएगी?

इन उदाहरणों का आधार यह है कि सेवा को अपनी संपत्तियों को "अंतिम अद्यतन" और "कॉल" हर 5 सेकंड में अपडेट किया जाना चाहिए। सेवा गुणों को अपडेट करने के बाद दृश्य को इन परिवर्तनों को प्रतिबिंबित करना चाहिए। ये दोनों उदाहरण सफलतापूर्वक काम करते हैं; मुझे आश्चर्य है कि ऐसा करने का एक बेहतर तरीका है या नहीं।

मूल बाध्यकारी

निम्नलिखित कोड देख और यहां चलाया जा सकता है: 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>

मुझे पता है कि मैं $ जड़ का उपयोग कर सकता हूं। सेवा में $ प्रसारण और $ रूट। $ नियंत्रक में, लेकिन अन्य उदाहरणों में मैंने बनाया है कि पहले प्रसारण पर $ प्रसारण / $ का उपयोग नहीं किया गया है नियंत्रक, लेकिन प्रसारित अतिरिक्त कॉल नियंत्रक में ट्रिगर कर रहे हैं। यदि आप $ जड़कोप को हल करने के तरीके से अवगत हैं। $ प्रसारण समस्या, कृपया एक उत्तर दें।

लेकिन मैंने जो उल्लेख किया है उसे पुन: स्थापित करने के लिए, मैं सेवा गुणों से कैसे जुड़ना है, इस बारे में सबसे अच्छा अभ्यास जानना चाहता हूं।

अद्यतन करें

यह सवाल मूल रूप से अप्रैल 2013 में पूछा गया था और उत्तर दिया गया था। मई 2014 में, गिल Birman ने एक नया जवाब प्रदान किया, जिसे मैंने सही उत्तर के रूप में बदल दिया। चूंकि गिल Birman के जवाब में बहुत कम वोट हैं, मेरी चिंता यह है कि इस सवाल को पढ़ने वाले लोग कई उत्तरों के साथ अन्य उत्तरों के पक्ष में अपने जवाब की उपेक्षा करेंगे। सबसे अच्छा जवाब देने का निर्णय लेने से पहले, मैं गिल Birman के जवाब की अत्यधिक अनुशंसा करता हूं।


सबसे सुरुचिपूर्ण समाधान ...

app.service('svc', function(){ this.attr = []; return this; });
app.controller('ctrl', function($scope, svc){
    $scope.attr = svc.attr || [];
    $scope.$watch('attr', function(neo, old){ /* if necessary */ });
});
app.run(function($rootScope, svc){
    $rootScope.svc = svc;
    $rootScope.$watch('svc', function(neo, old){ /* change the world */ });
});

इसके अलावा, मैं ईडीए (इवेंट-प्रेरित आर्किटेक्चर) लिखता हूं इसलिए मैं निम्नलिखित [oversimplified संस्करण] की तरह कुछ करता हूं:

var Service = function Service($rootScope) {
    var $scope = $rootScope.$new(this);
    $scope.that = [];
    $scope.$watch('that', thatObserver, true);
    function thatObserver(what) {
        $scope.$broadcast('that:changed', what);
    }
};

फिर, मैंने वांछित चैनल पर अपने नियंत्रक में श्रोता लगाया और बस अपना स्थानीय दायरा इस तरह अद्यतित रख दिया।

अंत में, "बेस्ट प्रैक्टिस" का अधिकतर नहीं है - बल्कि इसकी प्राथमिकता - जब तक आप चीजों को सोलिड रखते हैं और कमजोर युग्मन को नियोजित करते हैं। बाद के कोड का समर्थन करने का कारण यह है कि ईडीए के पास प्रकृति द्वारा सबसे कम युग्मन संभव है। और यदि आप इस तथ्य के बारे में ज्यादा चिंतित नहीं हैं, तो हम एक ही परियोजना पर एक साथ काम करने से बचें।

उम्मीद है की यह मदद करेगा...


उपर्युक्त उदाहरणों पर बिल्डिंग मैंने सोचा कि मैं पारदर्शी रूप से एक नियंत्रक चर को एक सेवा चर के लिए बाध्यकारी तरीके से फेंक दूंगा।

नीचे दिए गए उदाहरण में नियंत्रक $scope.count चर में परिवर्तन स्वचालित रूप से सेवा count चर में दिखाई देगा।

उत्पादन में हम वास्तव में एक सेवा पर एक आईडी को अद्यतन करने के लिए इस बाध्यकारी का उपयोग कर रहे हैं जो तब अतुल्यकालिक रूप से डेटा प्राप्त करता है और इसकी सेवा वर्र्स अपडेट करता है। आगे बाध्यकारी का मतलब है कि सेवा अद्यतन होने पर नियंत्रक स्वचालित रूप से अपडेट हो जाते हैं।

नीचे दिया गया कोड http://jsfiddle.net/xuUHS/163/ पर काम कर देखा जा सकता है

राय:

<div ng-controller="ServiceCtrl">
    <p> This is my countService variable : {{count}}</p>
    <input type="number" ng-model="count">
    <p> This is my updated after click variable : {{countS}}</p>

    <button ng-click="clickC()" >Controller ++ </button>
    <button ng-click="chkC()" >Check Controller Count</button>
    </br>

    <button ng-click="clickS()" >Service ++ </button>
    <button ng-click="chkS()" >Check Service Count</button>
</div>

सेवा / नियंत्रक:

var app = angular.module('myApp', []);

app.service('testService', function(){
    var count = 10;

    function incrementCount() {
      count++;
      return count;
    };

    function getCount() { return count; }

    return {
        get count() { return count },
        set count(val) {
            count = val;
        },
        getCount: getCount,
        incrementCount: incrementCount
    }

});

function ServiceCtrl($scope, testService)
{

    Object.defineProperty($scope, 'count', {
        get: function() { return testService.count; },
        set: function(val) { testService.count = val; },
    });

    $scope.clickC = function () {
       $scope.count++;
    };
    $scope.chkC = function () {
        alert($scope.count);
    };

    $scope.clickS = function () {
       ++testService.count;
    };
    $scope.chkS = function () {
        alert(testService.count);
    };

}

पार्टी के लिए देर हो चुकी है लेकिन भविष्य के googlers के लिए प्रदान किए गए उत्तर का उपयोग न करें।

जेएस के संदर्भ में वस्तुओं को गुजरने का एक अनूठा तंत्र है, जबकि यह केवल "संख्याओं, तारों आदि" मानों के लिए एक उथली प्रतिलिपि पास करता है।

उपरोक्त उदाहरण में सेवा के बाध्यकारी गुणों की बजाय। हम सेवा को दायरे में क्यों नहीं उजागर करते हैं ??

$scope.hello = HelloService;

यह सरल दृष्टिकोण कोणीय 2वे बाध्यकारी और आपको आवश्यक सभी जादुई चीजों को करने में सक्षम बनाता है। वॉचर्स या अवांछित मार्कअप के साथ अपने कंट्रोलर को हैक न करें।

और यदि आप अपने विचार के बारे में चिंतित हैं तो गलती से अपने सेवा विशेषताओं को ओवरराइट करें। पतला इसे परिभाषित करने के लिए DefineAttribute () का उपयोग करें, पठनीय, अतुलनीय, कॉन्फ़िगर करने योग्य, सेट गेटर्स और सेटर्स। यू इसे नाम दें। आप अपनी सेवा को और अधिक ठोस बनाकर बहुत नियंत्रण प्राप्त कर सकते हैं।

अंतिम युक्ति: यदि आप अपने कंट्रोलर पर काम करने में अपना समय बिताते हैं तो आपकी सेवाएं। तो आप इसे गलत कर रहे हैं :(।

आपके द्वारा प्रदान किए गए उस विशेष डेमो कोड में मैं आपको सलाह दूंगा

 function TimerCtrl1($scope, Timer) {
  $scope.timer = Timer;
 }
///Inside view
{{ timer.time_updated }}
{{ timer.other_property }}
etc...

3 साल पुरानी पोस्ट के लिए बहुत अधिक है, लेकिन अगर किसी को और जानकारी चाहिए तो मुझे बताएं

संपादित करें:

जैसा कि मैंने ऊपर बताया है, आप DefineProperty का उपयोग करके अपने सेवा विशेषताओं के व्यवहार को नियंत्रित कर सकते हैं

उदाहरण:

// Lets expose a property named "propertyWithSetter" on our service
// and hook a setter function that automaticly save new value to db !
Object.defineProperty(self, 'propertyWithSetter', {
  get: function() { return self.data.variable; },
  set: function(newValue) { 
         self.data.variable = newValue; 
         //lets update the database too to reflect changes in data-model !
         self.updateDatabaseWithNewData(data);
       },
  enumerable: true,
  configurable: true
});

अगर हम करते हैं तो अब बाहर contorller में

$scope.hello = HelloService;
$scope.hello.propertyWithSetter = 'NEW VALUE';

हमारी सेवा propertyWithSetter WithSetter के मूल्य को बदल देगी और किसी भी तरह डेटाबेस में नया मान भी पोस्ट करेगी!

या हम जो भी दृष्टिकोण चाहते हैं हम उसे ले सकते हैं। कृपया https://developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty

Upvotes के लिए धन्यवाद :)


मुझे लगता है कि इस प्रश्न में एक प्रासंगिक घटक है।

यदि आप बस किसी सेवा से डेटा खींच रहे हैं और उस जानकारी को इसके दृश्य में विकृत कर रहे हैं, तो मुझे लगता है कि सेवा प्रॉपर्टी पर सीधे बाध्यकारी ठीक है। मैं अपने विचारों में उपभोग करने के लिए मॉडल गुणों के लिए बस सेवा गुणों को मैप करने के लिए बहुत सारे बॉयलरप्लेट कोड लिखना नहीं चाहता हूं।

इसके अलावा, कोणीय में प्रदर्शन दो चीजों पर आधारित है। पहला यह है कि पृष्ठ पर कितने बाइंडिंग हैं। दूसरी बात यह है कि कितने महंगा गेटर कार्य हैं। मिस्को इस बारे में here बात करते here

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

एक चेतावनी के रूप में, आपको अपने $ दायरे से सीधे किसी भी संपत्ति को लटका नहीं देना चाहिए। $scope वैरिएबल आपका मॉडल नहीं है। इसमें आपके मॉडल का संदर्भ है।

मेरे दिमाग में, सेवा से नीचे विकिरण जानकारी को देखने के लिए "सर्वोत्तम अभ्यास":

function TimerCtrl1($scope, Timer) {
  $scope.model = {timerData: Timer.data};
};

और फिर आपके विचार में {{model.timerData.lastupdated}}


मेरे परिप्रेक्ष्य से, $watch सबसे अच्छा अभ्यास तरीका होगा।

आप वास्तव में अपने उदाहरण को थोड़ा सा सरल बना सकते हैं:

function TimerCtrl1($scope, Timer) {
  $scope.$watch( function () { return Timer.data; }, function (data) {
    $scope.lastUpdated = data.lastUpdated;
    $scope.calls = data.calls;
  }, true);
}

आपको बस इतना ही चाहिए

चूंकि गुण एक साथ अपडेट होते हैं, आपको केवल एक घड़ी की आवश्यकता होती है। इसके अलावा, चूंकि वे एक एकल, बल्कि छोटी वस्तु से आते हैं, इसलिए मैंने इसे Timer.data प्रॉपर्टी को देखने के लिए बदल दिया। $watch पारित अंतिम पैरामीटर यह सुनिश्चित करने के बजाय कि संदर्भ समान है, गहरी समानता की जांच करने के लिए कहता है।

थोड़ा संदर्भ प्रदान करने के लिए, कारण है कि मैं सेवा मूल्य को सीधे दायरे पर रखने के लिए इस विधि को प्राथमिकता देना चाहता हूं ताकि चिंताओं को उचित पृथक्करण सुनिश्चित किया जा सके। संचालन के लिए आपके विचार को आपकी सेवाओं के बारे में कुछ भी जानने की आवश्यकता नहीं है। नियंत्रक का काम सबकुछ एक साथ चिपकाना है; इसका काम आपकी सेवाओं से डेटा प्राप्त करना और उन्हें किसी भी तरह से संसाधित करना है और फिर अपने विचार को जो कुछ भी आवश्यक है उसे प्रदान करना है। लेकिन मुझे नहीं लगता कि इसका काम सिर्फ दृश्य के साथ ही सेवा को पास करना है। अन्यथा, नियंत्रक भी वहां क्या कर रहा है? AngularJS डेवलपर्स ने उसी तर्क का पालन किया जब उन्होंने टेम्पलेट्स में किसी भी "तर्क" को शामिल नहीं करना चुना (उदाहरण के लिए if कथन)।

निष्पक्ष होने के लिए, यहां शायद कई दृष्टिकोण हैं और मैं अन्य उत्तरों की प्रतीक्षा करता हूं।


मैं अपने दर्शक को जितना संभव हो उतना कम रखूंगा। मेरा कारण मेरे अनुभवों पर आधारित है और कोई सैद्धांतिक रूप से तर्क दे सकता है।
दर्शक का उपयोग करने का मुद्दा यह है कि आप किसी भी घटक या सेवा में किसी भी तरीके से कॉल करने के लिए किसी भी संपत्ति का उपयोग कर सकते हैं।
एक वास्तविक दुनिया प्रोजेक्ट में, बहुत जल्द आप एक गैर-ट्रैकेबल (बेहतर ट्रेस करने के लिए कड़ी मेहनत कर सकते हैं) के तरीकों की श्रृंखला के साथ समाप्त हो जाएंगे और मूल्यों को बदला जा रहा है जो विशेष रूप से ऑन-बोर्डिंग प्रक्रिया को दुखद बनाता है।


दूसरे दृष्टिकोण के कुछ पेशेवरों और विपक्षों पर विचार करें:

  • {{lastUpdated}} बजाय 0 {{lastUpdated}} , जो आसानी से {{timer.lastUpdated}} हो सकता है, जिसे मैं तर्क दे सकता हूं वह अधिक पठनीय है (लेकिन आइए बहस न करें ... मैं इसे दे रहा हूं एक तटस्थ रेटिंग इंगित करें ताकि आप स्वयं के लिए निर्णय ले सकें)

  • +1 यह सुविधाजनक हो सकता है कि नियंत्रक मार्कअप के लिए एपीआई के प्रकार के रूप में कार्य करता है जैसे कि यदि किसी भी तरह से डेटा मॉडल की संरचना में परिवर्तन होता है तो आप (सिद्धांत में) एचटीएमएल आंशिक स्पर्श किए बिना नियंत्रक के एपीआई मैपिंग को अपडेट कर सकते हैं।

  • -1 हालांकि, सिद्धांत हमेशा अभ्यास नहीं करता है और वैसे भी जब मैं परिवर्तन के लिए बुलाया जाता है, तो मुझे आमतौर पर मार्कअप और नियंत्रक तर्क को संशोधित करना पड़ता है । इसलिए एपीआई लिखने का अतिरिक्त प्रयास इसका लाभ अस्वीकार करता है।

  • -1 इसके अलावा, यह दृष्टिकोण बहुत शुष्क नहीं है।

  • -1 यदि आप डेटा को ng-model बाध्य करना चाहते हैं तो आपका कोड भी कम DRY बन जाएगा क्योंकि आपको एक नया आरईएसटी कॉल करने के लिए नियंत्रक में $scope.scalar_values को फिर से पैकेज करना होगा।

  • -0.1 अतिरिक्त वॉचर बनाने के लिए एक छोटा प्रदर्शन हिट है। साथ ही, यदि मॉडल गुण उस मॉडल से जुड़े होते हैं जिसे किसी विशेष नियंत्रक में देखने की आवश्यकता नहीं होती है तो वे गहरे दर्शक के लिए अतिरिक्त ओवरहेड बनाएंगे।

  • -1 क्या होगा यदि एकाधिक नियंत्रकों को एक ही डेटा मॉडल की आवश्यकता हो? इसका मतलब है कि आपके पास प्रत्येक मॉडल परिवर्तन के साथ अपडेट करने के लिए एकाधिक API हैं।

$scope.timerData = Timer.data; अब के बारे में शक्तिशाली मोहक अधिकार शुरू करना शुरू कर रहा है ... चलिए उस आखिरी बिंदु में थोड़ा गहराई से गोता लगाते हैं ... हम किस तरह के मॉडल परिवर्तनों के बारे में बात कर रहे थे? बैक एंड (सर्वर) पर एक मॉडल? या एक मॉडल जो बनाया गया है और केवल सामने के अंत में रहता है? किसी भी मामले में, अनिवार्य रूप से डेटा मैपिंग एपीआई फ्रंट-एंड सर्विस लेयर , (एक कोणीय कारखाना या सेवा) में है। (ध्यान दें कि आपका पहला उदाहरण - मेरी वरीयता - सेवा परत में ऐसी एपीआई नहीं है, जो ठीक है क्योंकि यह काफी आसान है, इसकी आवश्यकता नहीं है।)

अंत में , सब कुछ decoupled नहीं है। और जहां तक ​​पूरी तरह से डेटा मॉडल से मार्कअप को डीकॉप्लिंग करते हैं, तो कमियां फायदे से अधिक होती हैं।

नियंत्रक, सामान्य रूप से $scope = injectable.data.scalar साथ भंग नहीं किया जाना चाहिए। इसके बजाय, उन्हें $scope = injectable.data साथ छिड़का जाना चाहिए, promise.then(..) , और $scope.complexClickAction = function() {..} s

डेटा-डिकूप्लिंग को प्राप्त करने के लिए वैकल्पिक दृष्टिकोण के रूप में और इस प्रकार व्यू-एन्सेप्ल्यूलेशन, मॉडल से दृश्य को कम करने के लिए यह वास्तव में एकमात्र जगह है जो निर्देश के साथ है । लेकिन यहां तक ​​कि, controller या link कार्यों में स्केलर मान $watch नहीं $watch । वह समय बचाएगा या कोड को और अधिक रखरखाव और न ही पठनीय बनाएगा। यह परीक्षण को आसान भी नहीं बनाएगा क्योंकि कोणीय में मजबूत परीक्षण आमतौर पर परिणामस्वरूप डीओएम का परीक्षण करते हैं । इसके बजाय, निर्देश में आपके डेटा एपीआई को ऑब्जेक्ट फॉर्म में मांगते हैं, और ng-bind द्वारा बनाए गए $watch र्स का उपयोग करके पक्षपात करते ng-bind

उदाहरण http://plnkr.co/edit/MVeU1GKRTN4bqA3h9Yio

<body ng-app="ServiceNotification">
    <div style="border-style:dotted" ng-controller="TimerCtrl1">
        TimerCtrl1<br/>
        Bad:<br/>
        Last Updated: {{lastUpdated}}<br/>
        Last Updated: {{calls}}<br/>
        Good:<br/>
        Last Updated: {{data.lastUpdated}}<br/>
        Last Updated: {{data.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.data = Timer.data;
            $scope.lastUpdated = Timer.data.lastUpdated;
            $scope.calls = Timer.data.calls;
        };

        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, 500);
            };
            updateTimer();

            return {
                data: data
            };
        });
    </script>
</body>

अद्यतन : अंततः मैं इस प्रश्न पर वापस आ गया हूं कि मुझे यह नहीं लगता कि कोई दृष्टिकोण "गलत" है। मूल रूप से मैंने लिखा था कि जोश डेविड मिलर का जवाब गलत था, लेकिन पूर्व-निरीक्षण में उनके अंक पूरी तरह मान्य हैं, खासकर चिंताओं को अलग करने के बारे में उनका मुद्दा।

चिंताओं को अलग करना (लेकिन स्पर्श से संबंधित), रक्षात्मक प्रतिलिपि के लिए एक और कारण है जिसे मैं विचार करने में असफल रहा। यह प्रश्न ज्यादातर सेवा से सीधे डेटा पढ़ने के साथ संबंधित है। लेकिन क्या होगा यदि आपकी टीम के डेवलपर का निर्णय है कि नियंत्रक को डेटा को प्रदर्शित करने से पहले कुछ छोटे तरीके से डेटा को बदलने की जरूरत है? (क्या नियंत्रकों को डेटा को बदलना चाहिए, एक और चर्चा है।) यदि वह ऑब्जेक्ट की प्रतिलिपि नहीं बनाती है तो वह अनजाने में किसी अन्य दृश्य घटक में रिग्रेशन का कारण बन सकती है जो एक ही डेटा का उपभोग करती है।

यह प्रश्न वास्तव में हाइलाइट्स सामान्य कोणीय अनुप्रयोग (और वास्तव में कोई जावास्क्रिप्ट एप्लिकेशन) की वास्तुकला की कमियां हैं: चिंताओं का तंग युग्मन, और ऑब्जेक्ट म्यूटेबिलिटी। मैं हाल ही में रिएक्ट और अपरिवर्तनीय डेटा संरचनाओं के साथ आर्किटेक्चरिंग एप्लिकेशन के साथ मोहक हो गया हूं। ऐसा करने से निम्नलिखित दो समस्याएं आश्चर्यजनक तरीके से हल हो जाती हैं:

  1. चिंताओं का पृथक्करण : एक घटक प्रोप के माध्यम से इसके सभी डेटा का उपभोग करता है और वैश्विक सिंगलेट्स (जैसे कोणीय सेवाओं) पर बहुत कम निर्भरता नहीं है, और दृश्य पदानुक्रम में इसके ऊपर क्या हुआ इसके बारे में कुछ भी नहीं जानता है।

  2. उत्परिवर्तन : सभी प्रोप अपरिवर्तनीय हैं जो डेटा उत्परिवर्तन को अनजाने के जोखिम को समाप्त करते हैं।

कोणीय 2.0 अब उपरोक्त दो बिंदुओं को प्राप्त करने के लिए प्रतिक्रिया से भारी उधार लेने के लिए ट्रैक पर है।





angularjs-controller