2013-07-02 5 views
7

मैं कोणीय के लिए बहुत नया हूं, इसलिए उम्मीद है कि मुझे यह पूछने के लिए पर्याप्त पता है कि उचित डिजाइन प्रश्न की तरह क्या लगता है।सक्रिय रिकॉर्ड या डेटा मैपर पैटर्न?

मैं कोणीय के माध्यम से कुछ डेटा चार्ट कर रहा हूं, और $ संसाधन का उपयोग कर रहा हूं। प्रोजेक्ट में कोणीय लाने से पहले मैंने नमूना जेसन डेटा से चार्ट ऑब्जेक्ट्स बनाने के लिए चार्ट फ़ैक्टरी फ़ंक्शन बनाया था, मैंने अभी दृश्य में चिपकाया था।

अब जब कि मैं कोणीय उपयोग कर रहा हूँ, यह 'चार्ट' संसाधन, सक्रिय रिकॉर्ड शैली में चार्टिंग कार्यों डाल करने के लिए इच्छा होती है, तो यह है कि मैं इस एक बात यह है कि, आकर्षित कर सकते हैं बचाने के लिए, अद्यतन, आदि

है

जबकि उस पैटर्न का लाभ सादगी है, तो दोष व्यवहार के साथ दृढ़ता को जोड़ रहा है। उदाहरण के लिए, यदि मैं चार्ट सेटिंग्स को स्थानीय संग्रहण में सहेजना चाहता हूं तो यह बहुत अजीब होगा।

पहले से ही मेरे करियर में पर्याप्त समय से एआर द्वारा काटा जाने के बाद, मैं अपने चार्ट ऑब्जेक्ट को छोड़कर डीएम के साथ जाना चाहता हूं, और नियंत्रक को मेरे चार्ट में संसाधन से डेटा पास करना है।

हालांकि! एंजुलरज के निर्भरता इंजेक्शन की मेरी आलसी समझ से पता चलता है कि मैं एक संसाधन बनाने में सक्षम हो सकता हूं या ऐसा कुछ जो एक सामान्य दृढ़ता इंटरफ़ेस स्वीकार कर सकता है - क्या सही शब्द 'स्कोप' है?

उदाहरण एआर रणनीति:

App.factory('Chart', [ 
    '$resource', function($resource) { 
    var chart = $resource('/api/charts/:id', { 
     id: '@id' 
    }); 

    chart.draw = function() { ... } 

    return chart 
    } 
]); 

App.controller('ChartsCtrl', [ 
    '$scope', 'Chart', function($scope, Chart) { 
    $scope.charts = Chart.query(function() { 
     $.each($scope.charts, function(i, c) { c.draw() }) 
    }) 
    } 
]) 

उदाहरण डीएम रणनीति:

App.chart = function(resource) { 
    return { draw: function() { ... } } 
} 

App.factory('ChartResource', [ 
    '$resource', function($resource) { 
    return $resource('/api/charts/:id', { 
     id: '@id' 
    }) 
    } 
]) 

App.controller('ChartsCtrl', [ 
    '$scope', 'ChartResource', function($scope, ChartResource) { 
    $scope.charts = $.map(ChartResource.query(), function(i, resource) { 
     chart = App.chart(resource) 
     chart.draw() 
     return chart 
    } 
    } 
]) 

मुझे लगता है कि वहाँ एक तीसरा रास्ता है, हालांकि, कि मैं नहीं दिख रहा है क्योंकि मैं काफी कैसे grok नहीं है लाभ उठाने के लिए डीआई।

दूसरे शब्दों में, swappable दृढ़ता रणनीतियों के साथ एक वस्तु बनाने के लिए AngularJS तरीका क्या है?

+0

यह और अधिक दिखाई देना चाहिए के रूप में यह एक आम समस्या है जब गंभीर AngularJS अनुप्रयोगों को डिजाइन। – Danita

+0

मैं इस बारे में सोच रहा हूं कि चार्ट रिसोर्स चार्ट पर निर्भर करेगा, और कॉल में कॉलबैक जोड़ देगा जो प्राप्त डेटा लेगा और इससे एक नया चार्ट उदाहरण देगा।इस तरह एक नियंत्रक या तो चार्ट रिसोर्स या लोकल स्टोरेज चार्ट (या एक सेवा जो स्थानीय स्टोरेज चार्ट को कॉल करता है और चार्टरसोर्स को फॉलबैक के रूप में उपयोग करता है \ जब समय अमान्य हो जाता है) को कॉल कर सकता है। तुम क्या सोचते हो? – haimlit

उत्तर

3

डेटामैपर रणनीति वास्तव में निर्भरता इंजेक्शन का एक रूप है। आप चार्ट कन्स्ट्रक्टर को वांछित दृढ़ता कार्यान्वयन पारित कर रहे हैं, और आप प्रति-new आधार पर एक अलग-अलग पास कर सकते हैं। गैर-डीआई तरीका आपके सक्रिय रिकार्ड-शैली उदाहरण के रूप में दृढ़ता कार्यान्वयन को हार्ड-कोड करना होगा।

डेटामैपर Angular में DI नहीं है। शब्द की जेएस-विशिष्ट भावना। कोणीय की DI वास्तव में आपको रन-टाइम पर कार्यान्वयन को स्वैप करने नहीं देती है। हालांकि, आप इसे प्राप्त करने के लिए आधिकारिक ngMock मॉड्यूल का उपयोग कर सकते हैं। ngMock परीक्षण के लिए प्रयोग किया जाना चाहिए, इसलिए यह शायद उस परिदृश्य के बाहर एक भयानक विचार नहीं है।

इस तरह की चीज़ के लिए एक कोणीय। जेएस-विशिष्ट सम्मेलन प्रतीत नहीं होता है। वास्तव में, कोणीय। जेएस में वास्तव में कई सम्मेलन नहीं हैं।

कन्स्ट्रक्टर में कार्यान्वयन में पारित होने के बजाय, आप वैकल्पिक रूप से किसी भी समय दृढ़ता तंत्र को बदलने के लिए एक अलग विधि प्रदान कर सकते हैं। उदाहरण के लिए, उन्हें स्थानीय रूप से संग्रहीत करने के लिए प्रारंभिक संजाल आधारित पुनः प्राप्ति के लिए ChartResource उपयोग करने के लिए है, तो IndexedDB पर अदला-बदली:

// ChartResourceIndexedDB: same API as $resource but uses local IndexedDB 
app.factory('ChartResourceIndexedDB', /* .. */); 

app.controller('ChartsCtrl', [ 
    '$scope', 'ChartResource', 'ChartResourceIndexedDB', 
    function($scope, ChartResource, ChartResourceIndexedDB) { 
    $scope.charts = $.map(ChartResource.query(), function(i, resource) { 
     chart = App.chart(resource) 
     chart.draw(); 
     chart.setPersistence(ChartResourceIndexedDB); 
     chart.save(); 
     return chart 
    } 
    } 
]); 
संबंधित मुद्दे