एक निर्देश सबसे अच्छा है (एक नियम-के-अंगूठे के रूप में) जब यह छोटा होता है (कोड-वार), (संभावित रूप से) फिर से प्रयोग करने योग्य होता है, और कार्यक्षमता के मामले में इसका दायरा सीमित होता है। एक निर्देश बनाना जिसमें यूआई शामिल है और एक सेवा पर निर्भर करता है (कि मैं बैकएंड से कनेक्शन संभालता हूं), न केवल इसे 2 कार्यात्मक भूमिकाएं देता है, अर्थात्:
- विजेट के लिए डेटा के प्रदर्शन / प्रवेश के लिए यूआई को नियंत्रित करना।
- बैकएंड पर सबमिट करना (सेवा के माध्यम से)।
लेकिन इसे कम पुन: प्रयोग करने योग्य भी बनाया जा सकता है, क्योंकि आप इसे फिर से किसी अन्य सेवा के साथ, या एक अलग यूआई के साथ (कम से कम आसानी से नहीं) कर सकते हैं।
ये निर्णय लेते समय , मैं अक्सर अंतर्निहित HTML तत्वों से तुलना करता हूं: उदाहरण के लिए <input>, <textarea>या <form>: वे किसी भी विशिष्ट बैकएंड से पूरी तरह से स्वतंत्र हैं। एचटीएमएल 5 ने <input>तत्व को कुछ अतिरिक्त प्रकार दिए हैं, उदाहरण के लिए date, जो अभी भी बैकएंड से स्वतंत्र है, और जहां वास्तव में डेटा जाता है या इसका उपयोग कैसे किया जाता है। वे विशुद्ध रूप से इंटरफ़ेस तत्व हैं। आपके कस्टम विजेट, निर्देशों का उपयोग करके बनाया गया है, मुझे लगता है कि यदि संभव हो तो उसी पैटर्न का पालन करना चाहिए।
हालाँकि, यह कहानी का अंत नहीं है। अंतर्निहित HTML तत्वों के साथ सादृश्य से परे, आप पुन: प्रयोज्य निर्देश बना सकते हैं जो दोनों कॉल सेवाओं, और विशुद्ध रूप से यूआई निर्देश का उपयोग करते हैं, जैसे यह एक का उपयोग कर सकता है <textarea>। आप निम्नानुसार कुछ HTML का उपयोग करना चाहते हैं:
<document document-url="'documents/3345.html'">
<document-data></document-data>
<comments></comments>
<comment-entry></comment-entry>
</document>
commentEntryनिर्देश को कोड करने के लिए , आप एक बहुत छोटा निर्देश बना सकते हैं जिसमें बस नियंत्रक होता है जो एक यूआई-विजेट के साथ एक सेवा को जोड़ता है। कुछ इस तरह:
app.directive('commentEntry', function (myService) {
return {
restrict: 'E',
template: '<comment-widget on-save="save(data)" on-cancel="cancel()"></comment-widget>',
require: '^document',
link: function (scope, iElement, iAttrs, documentController) {
// Allow the controller here to access the document controller
scope.documentController = documentController;
},
controller: function ($scope) {
$scope.save = function (data) {
// Assuming the document controller exposes a function "getUrl"
var url = $scope.documentController.getUrl();
myService.saveComments(url, data).then(function (result) {
// Do something
});
};
}
};
});
इसे चरम पर ले जाने के लिए, आपको कभी भी ng-controllerHTML में एक मैनुअल विशेषता की आवश्यकता नहीं हो सकती है : आप इसे सभी निर्देशों का उपयोग करके कर सकते हैं, जब तक कि प्रत्येक में सीधे "UI" भूमिका या एक स्पष्ट "डेटा" भूमिका हो।
एक नकारात्मक पहलू है जिसका मुझे उल्लेख करना चाहिए: यह एप्लिकेशन को अधिक "चलती भागों" देता है, जो थोड़ा जटिलता जोड़ता है। हालांकि, यदि प्रत्येक भाग की स्पष्ट भूमिका है, और अच्छी तरह से (इकाई + E2E परीक्षण किया गया है), तो मैं तर्क करूंगा कि यह इसके लायक है और दीर्घकालिक में एक समग्र लाभ है।