कोणीय जेएस: निर्देश बनाम नियंत्रक - कहां डालने के लिए तर्क?

Question

मैं कोणीय के लिए काफी नया हूं और वास्तव में सीखने की कोशिश करता हूं कि मेरे कोड को व्यवस्थित कैसे किया जाए, इसलिए भविष्य के सहकर्मियों को इसके आसपास अपना रास्ता मिल सकेगा।

एक नियम मुझे पता है कि "यदि यह डोम में हेरफेर करता है, तो उसे निर्देश में डाल दें", जिसका मैं पालन करता हूं।

लेकिन अभी भी ऐसे समय हैं जहां मुझे यकीन नहीं है कि मेरी विधियों को कहां रखा जाए, क्योंकि मैं उन्हें मुख्य ऐप नियंत्रक में रख सकता हूं, निर्देशक के भीतर "नियंत्रक" विकल्प के रूप में या नियंत्रक के भीतर भी निर्देश (विकल्प "लिंक")।

फ़िल्टर और सेवाओं के साथ यह मेरे लिए बहुत स्पष्ट है, लेकिन नियंत्रकों और निर्देशों के साथ लाइन बहुत धुंधली हो जाती है। मुझे पहले से ही एहसास हुआ है कि यहां तक ​​कि एक छोटे से ऐप के साथ मैंने यहां कुछ कोड भी फैलाया है और यह पहले से ही भ्रमित है, यहां तक ​​कि खुद को भी। तो मैं अपने कोड को व्यवस्थित करने पर कुछ टिप्स प्राप्त करना चाहता हूं।

तो मुझे लगता है कि मेरा मुख्य प्रश्न है:
1) क्या अंगूठे का एक अच्छा नियम है यह जानने के लिए कि कोड कहां रखा जाए?

या यदि यह बहुत सार है तो यहां कुछ उदाहरण दिए गए हैं:
2) मेरे पास एक टेम्पलेट के साथ निर्देश है जिसे मैं केवल अपने ऐप के भीतर उपयोग करता हूं। जब मैं तत्व पर क्लिक करता हूं तो कुछ होना चाहिए। मैं पहले से ही लिंक किए गए फ़ंक्शन के भीतर एक क्लिक ईवेंट को बाध्य करने पर एनजी-क्लिक निर्देश का उपयोग करने के लिए बेहतर जानता हूं।
लेकिन मुझे एनजी-क्लिक में दी गई विधि को कहां परिभाषित करना चाहिए?

• ए) ऐप का मुख्य नियंत्रक।
• बी) निर्देश का "लिंक" फ़ंक्शन।
• सी) निर्देश में एक नियंत्रक जोड़ें ("नियंत्रक" विकल्प का उपयोग करके) और इसे वहां परिभाषित करें।

3) 2 का जवाब क्या होगा यदि मैं कहीं और निर्देश का पुन: उपयोग करने की योजना बना रहा हूं?

4) विभिन्न परिदृश्य:
मेरे पास एक बटन है और जब क्लिक किया गया है और खींच लिया गया है तो इसे पूरी तरह से असंबंधित तत्व को स्थानांतरित करना चाहिए।
मैं ...

• ए) एक निर्देश और प्रभाव टेम्पलेट & व्यवहार एक पारित कर दिया विशेषता के आधार पर बनाना चाहिए?
• बी) दो निर्देश बनाएं (हैंडल के लिए एक, लक्ष्य तत्व के लिए एक)
  यदि ऐसा है, तो फिर से यह सवाल उठता है कि ड्रैगिंग को संभालने के तरीकों को कहां रखा जाए?

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

आपके समय के लिए धन्यवाद।

Answer 1

1) क्या अंगूठे का एक अच्छा नियम है यह जानने के लिए कि कोड कहां रखा जाए?

यहां पर बहुत सी चीजें खेलेंगी; और मुझे यकीन नहीं है कि एक 'निर्देश बनाम नियंत्रक' लड़ाई चल रही है। वे मेरे लिए काफी अलग लगते हैं। यदि आप नहीं जानते थे, तो निर्देशक अपने स्वयं के नियंत्रक हो सकते हैं।

मैं एचटीएमएल (व्यू) और जावास्क्रिप्ट कोड (कंट्रोलर) सहित एक एकल, विशिष्ट, encapsulated कोड के सेट के रूप में निर्देश देखता हूं। मैं निर्देशों का उपयोग करता हूं जब मैं कुछ 'encapsulated' घटक के रूप में पुन: उपयोग करना चाहता हूं।

यदि मेरे पास बस थोड़ा सा जावास्क्रिप्ट कोड है जिसे मैं पुन: उपयोग करना चाहता हूं; मैं एक AngularJS सेवा में डाल दूंगा जो मैं किसी भी HTML के बिना जावास्क्रिप्ट कोड का संग्रह के रूप में देखता हूं।

मेरे पास एक टेम्पलेट के साथ निर्देश है जिसका मैं केवल अपने ऐप के भीतर उपयोग करता हूं। कुछ तत्व होना चाहिए, जब मैं तत्व पर क्लिक करता हूं। मुझे पहले से ही पता है कि लिंक किए गए फ़ंक्शन के भीतर एक क्लिक ईवेंट बाध्यकारी पर एनजी-क्लिक निर्देश का उपयोग करना बेहतर है। लेकिन मुझे एनजी-क्लिक में आपूर्ति की गई विधि को परिभाषित करना चाहिए?

मैं निर्देशक के अलग-अलग दायरे के हिस्से के रूप में हैंडलर को परिभाषित करता हूं; इस तरह कुछ:

scope: 
{    
    onButtonClick: '&onButtonClick' 
} 

निर्देशक के लिंक या नियंत्रक के हिस्से के रूप में डिफ़ॉल्ट व्यवहार को परिभाषित करें।

link: function ($scope, element, attrs) { 
    $scope.myDefaultButtonClick = function(){ 
    // do stuff 
    } 

     this.onInit = function(){ 
      if(!$scope.onButtonClick){ 
       $scope.onButtonClick = $scope.myDefaultButtonClick; 
      } 
     } 
     this.onInit(); 
} 

आपकी जावास्क्रिप्ट में; आप एक तर्क के रूप में पारित फ़ंक्शन को कॉल कर सकते हैं:

$scope.onButtonClick(); 

और आप अपने HTML टेम्पलेट में भी ऐसा ही कर सकते हैं।

<img src="button.png" ng-click="onButtonClick()"> 

3) 2 का जवाब) अलग अगर मैं निर्देश कहीं और पुन: उपयोग करने की योजना बना रहे हो?

यदि मैं पुन: उपयोग करने की योजना नहीं बनाता हूं; मैं शायद निर्देश का उपयोग नहीं करता।

I have a Button and when clicked and dragged it should move a completely unrelated Element. 
Should I... 

    A) Create one directive and influence template & behavior based on a passed attribute? 
    B) Create two directives (one for the handle, one for the target Element) 
    If so, it again poses the question of where to put the methods to handle the dragging? 

मैं आइटम ए को चुना होगा; उस तत्व में गुजरना जिसे निर्देश के लिए तर्क के रूप में इस्तेमाल किया जाना चाहिए। हालांकि, यह निर्भर करता है कि मैं कार्यक्षमता के इस टुकड़े की उपयोगिता के बारे में कितना ख्याल रखता हूं।

जो कुछ भी मैं कहता हूं उसे व्यक्तिपरक माना जाना चाहिए।

Answer 2

सबसे पहले, महान सवाल। मुझे लगता है कि प्रत्येक नए-साथ-कोणीय डेवलपर सभी दिए गए घटकों (नियंत्रक, निर्देश, सेवा, फ़िल्टर इत्यादि) के साथ अंतर के साथ संघर्ष करता है।

की बुनियादी औपचारिक परिभाषा साथ शुरू करते हैं:

निर्देशों एक DOM एलीमेंट बताया कि DOM एलीमेंट का एक निर्दिष्ट व्यवहार संलग्न करने के लिए AngularJS के एचटीएमएल संकलक पर मार्कर कर रहे हैं।

और दूसरी तरफ

नियंत्रक एक जावास्क्रिप्ट निर्माता समारोह है कि कोणीय स्कोप

परिभाषित व्यवहार बढ़ाने के लिए प्रयोग किया जाता है कुछ नियम-ऑफ-द अंगूठे के माध्यम से हमें मार्गदर्शन करता है ।

ऊपर अपने प्रश्नों के लिए तो:

1. सरल शब्दों में, हम उपयोगकर्ता नियंत्रकों सभी महान क्षमताओं एक नियंत्रक लाता है के साथ HTML टेम्पलेट (दो तरह से में एक क्षेत्र (गुंजाइश) का प्रबंधन करने के बाध्यकारी, स्कॉप्ड व्यवहार, सेवाएं इंजेक्शन इत्यादि) और हम अधिकांश परिदृश्यों में जब हम किसी मौजूदा HTML तत्व या कस्टम आउट का उपयोग करना चाहते हैं, तो निर्देशों का उपयोग करें - जब हम पुन: उपयोग करने के बारे में सोचते हैं।
2. जो कि एनजी-क्लिक के संदर्भ में निर्भर करता है। आइए मान लें कि आपके पास एक सांख्यिक इनपुट के लिए अपना कस्टमाइज्ड निर्देश है जिसमें आपके निर्देशन कॉन्फ़िगरेशन में परिभाषित एक अनुकूलित डिज़ाइन और व्यवहार है। और आप इसे एक ऐसे रूप में उपयोग करते हैं जो वैकल्पिक मानों के साथ एक मॉडल को पॉप करने के लिए एनजी-क्लिक मानें और इसे एप्लिकेशन में किसी भिन्न स्थान पर उपयोग करें और ng-click कुछ और करेगा। इस मामले में फ़ंक्शन को एक स्कोप होना चाहिए। फ्यूशन। लेकिन मान लें कि दोनों स्थान और हर दूसरे बिल्कुल वही करेंगे, यह फ़ंक्शन को निर्देशक दायरे में ले जाता है।
3. ऊपर उत्तर दिया गया :)
4. आपके प्रत्येक विकल्प ऐसा करेंगे, जहां "राय" लेती है और कम नियम-थंब मौजूद हैं। क्यूं कर? क्योंकि दोनों तरीके काम करेंगे जब प्रत्येक के पास यह पेशेवर और विपक्ष है। परिदृश्य में मुझे अंगूठे का नियम मिल सकता है कि यदि दोनों तत्व निर्देश टेम्पलेट का हिस्सा हैं, तो मैं 'व्यवहार' (ड्रैगिंग फ़ंक्शन) निर्देशक दायरे का हिस्सा बनने की अपेक्षा करता हूं।

गुड लक