AngularJS में निर्देश

निर्देश AngularJS की एक प्रमुख विशेषता है। निर्देशों का उपयोग करके, आप मौजूदा HTML तत्वों में नया व्यवहार जोड़ सकते हैं, आप नए घटक बना सकते हैं। मौजूदा HTML तत्वों में नए व्यवहार को जोड़ने वाले निर्देशों के उदाहरण इनपुट , सेलेक्ट , टेक्सारिया में एनकोमॉडल , आवश्यक आदि के साथ हैं। सूचीबद्ध निर्देश मुख्य रूप से AngularJS में सत्यापन से संबंधित हैं। लेकिन मान्यता का विषय एक अलग लेख के योग्य है।

निर्देशों का उपयोग किया जा सकता है और आपके आवेदन के प्रतिरूपकता को बढ़ाने के लिए उपयोग किया जाना चाहिए, पुन: उपयोग के लिए घटकों में अलग-अलग कार्यक्षमता को उजागर करें।

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

इस लेख में मैं कुछ उदाहरणों के साथ अपने स्वयं के निर्देशन की प्रक्रिया पर विचार करने का प्रयास करूंगा।



निर्देश बनाने का एक अच्छा उदाहरण एंगुलरयूआई टीम की रिपॉजिटरी है । इस टीम में गैर-Google डेवलपर्स शामिल हैं, जिन्होंने मेलिंग सूची और स्टैकओवरफ़्लो पर बहुत अच्छा काम किया है। जहां तक ​​मैं बता सकता हूं, वे उपयोग के अधिकांश मामलों को कवर करने वाली सेटिंग्स के साथ उत्पादन-तैयार घटक बनाते हैं। मेरे पास एक रिपॉजिटरी भी है जिसमें मैं अपनी कुछ उपलब्धियों को पोस्ट करता हूं। लेकिन मेरा दृष्टिकोण थोड़ा अलग है। मैं विशिष्ट उपयोग के मामलों के लिए निर्देशन करना पसंद करता हूं। AngularJS बहुत संक्षिप्त है। कम कोड => बेहतर पठनीयता => बनाए रखने और बदलने में आसान। फिर सेटिंग के एक समूह के साथ "राक्षसी" घटक क्यों बनाएं? इसलिए, इन निर्देशों को विशिष्ट आवश्यकताओं के लिए अपना खुद का बनाने के लिए एक प्रारंभिक बिंदु के रूप में विचार करें। अधिक उदाहरणों के लिए, आप ngmodules.org पर जा सकते हैं, शायद यह AngularJS के लिए विभिन्न घटकों की एक सूची बन सकती है।

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

टूलटिप आवरण निर्देशक ट्विटर बूटस्ट्रैप से

डायरेक्टिव सोर्स कोड | सोर्स कोड डेमो | डेमो

angular.module("ExperimentsModule", []) .directive("tbTooltip", function(){ return function(scope, element, iAttrs) { iAttrs.$observe('title', function(value) { element.removeData('tooltip'); element.tooltip(); }); } }); 

यह कुछ इस तरह से इस्तेमाल किया जाएगा:

 <span class="label label-warning" tb-tooltip title="You should pay order before {{order.cancelDateTime | date:'dd.MM.yyyy HH:mm'}}" > {{order.cancelDateTime | date:'dd.MM.yyyy HH:mm'}} </span> 

इस उदाहरण में, एक नया ExperimentsModule । इसकी कोई निर्भरता नहीं है (निर्भरता की खाली सूची) - इससे पहले कोई मॉड्यूल लोड नहीं किया जाना चाहिए। इस मॉड्यूल में tbTooltip निर्देश बनाया जाता है। क्रिएशन डायरेक्शंस को हमेशा लोअरकेमसेल का उपयोग करके नाम दिया गया है उपयोग करते समय, निर्देश को निचले मामले में विभाजक के रूप में विशेष वर्णों में से एक का उपयोग करके नाम दिया जाना चाहिए : , - , या _ । वैकल्पिक रूप से, आप वैध कोड प्राप्त करने के लिए x- या data- उपसर्गों का उपयोग कर सकते हैं। उदाहरण: tb:tooltip , tb-tooltip , tb_tooltip , x-tb-tooltip और data-tb-tooltip ।

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

पोस्टलिंक फ़ंक्शन क्या है? जब निर्देश को एक विशिष्ट DOM तत्व के लिए निष्पादित किया जाता है, तो इसके संचालन में 3 चरण होते हैं:

• संकलन: चरण जिसके दौरान यह उस तत्व के टेम्पलेट DOM संरचना को बदलना संभव है जिस पर निर्देश लागू होता है। टेम्प्लेट संरचना का अर्थ या तो पृष्ठ के HTML कोड में वर्णित आंतरिक संरचना या कॉन्फ़िगरेशन ऑब्जेक्ट के टेम्पलेट या टेम्पलेट यूआरएल फ़ील्ड द्वारा निर्दिष्ट टेम्पलेट है। निम्नलिखित उदाहरण एक संकलन समारोह पर आधारित एक निर्देश है;
• प्रीलिंक: वह चरण जो सभी बच्चों को बाध्य करने से पहले निष्पादित किया जाता है। यह डोम के किसी भी परिवर्तन को करने के लिए अनुशंसित नहीं है;
• पोस्टलिंक: वह चरण जो सभी बच्चों के बाध्य होने के बाद निष्पादित किया जाता है। सबसे अधिक इस्तेमाल किया जाने वाला चरण। यहां सभी आवश्यक DOM परिवर्तनों को करने, ईवेंट हैंडलर संलग्न करने आदि की सिफारिश की गई है।

पदानुक्रमित संरचना के लिए चरणों का क्रम यहां स्पष्ट रूप से दिखाया गया है ।

इस उदाहरण में, दो और प्रमुख बिंदु बने हुए हैं।

1. उपयोग की प्रक्रिया में यह आवश्यक है कि शीर्षक विशेषता में न केवल स्थिर पाठ हो सकता है, बल्कि यह भी कि डेटा के प्रक्षेप (प्रतिस्थापन) का समर्थन किया गया था। iAttrs.$observe('title', function(value) { ... }) कोड इसके लिए ज़िम्मेदार है iAttrs.$observe('title', function(value) { ... }) एक बार प्रक्षेप पूरा हो जाने के बाद, अर्थात अंतिम पाठ स्ट्रिंग प्राप्त हुआ है, या जब प्रक्षेप में शामिल कोई भी डेटा बदल गया है, तो ट्विटर बूटस्ट्रैप टूलिप घटक का उपयोग करके परिवर्तन लागू करें।
2. दूसरा बिंदु शायद अभी भी बहुत महत्वपूर्ण नहीं है और एंगुलरजेएस से संबंधित नहीं है, लेकिन टूलटिप घटक के तर्क की चिंता है। पहले से बनाए गए टूलटिप में परिवर्तन लागू करने के लिए, आपको पुराने डेटा को मिटाना होगा। जो कोड element.removeData('tooltip'); साथ किया जाता है element.removeData('tooltip');

निर्देश को उजागर करने वाला कोड

डायरेक्टिव सोर्स कोड | सोर्स कोड डेमो | डेमो

 .directive('uiSource', function () { return { restrict: 'EA', compile: function (elem) { var escape = function(content) { return content .replace(/\&/g, '&') .replace(/\</g, '<') .replace(/\>/g, '>') .replace(/"/g, '"'); }; var pre = angular.element('<pre class="prettyprint linenums"></pre>'); pre.append(prettyPrintOne(escape(elem.html().slice(1)), undefined, true)); elem.replaceWith(pre); } }; }); 

का उपयोग करें:

 <ui-source> <ui-source> <div> <label>Name:</label> <input type="text" ng-model="yourName" placeholder="Enter a name here"> <hr> <h1>Hello {{yourName}}!</h1> </div> </ui-source> </ui-source> 

Google-code-prettify का उपयोग करके कोड को हाइलाइट करने का निर्देश।

यह आवश्यक है कि इस निर्देश की आंतरिक सामग्री को संकलित नहीं किया गया है और लिंक नहीं किया गया है, लेकिन बस google-code-prettify को संसाधित किया गया है।

यह निर्देश कॉन्फ़िगरेशन ऑब्जेक्ट के माध्यम से पहले ही लागू किया जा चुका है। निर्देश रेखा पर विचार करें।

  restrict: 'EA', 

निर्देश का उपयोग एक तत्व के रूप में और एक विशेषता के रूप में किया जा सकता है। सामान्य तौर पर, अनुप्रयोगों को 'ईएसीएम' के रूप में एन्कोड किया जाता है। आप एक निर्देश बना सकते हैं जिसका उपयोग तत्व 'ई', एक विशेषता 'ए', एक वर्ग 'सी', एक टिप्पणी 'एम' के रूप में किया जा सकता है।

  terminal: true, 

इसका अर्थ है कि जिस प्राथमिकता पर यह निर्देश घोषित किया गया है, वह निष्पादन की अंतिम प्राथमिकता होगी। यानी केवल ऊपर और उसी के साथ प्राथमिकता वाले निर्देशों को लागू किया जाएगा। सभी निर्देशों को उसी प्राथमिकता के साथ निष्पादित किया जाएगा, जैसा कि एक प्राथमिकता के ढांचे के भीतर, निर्देशों को लागू करने की प्रक्रिया को परिभाषित नहीं किया गया है।

  compile: function (elem) { ... } 

संकलन चरण में, हम तत्व की सामग्री को निकालते हैं, विशेष वर्णों को संसाधित करते हैं, उन्हें mnemonics के साथ प्रतिस्थापित करते हैं, परिणाम को Google-कोड-प्रीटीटाइज के साथ संसाधित करते हैं, इसे सभी को पूर्व टैग के साथ फ्रेम करते हैं और मूल तत्व को परिणामी के साथ प्रतिस्थापित करते हैं।

यहां निर्देशों के लिए कुछ और दिलचस्प विकल्प हैं जो संकलन कदम को शामिल करते हैं: एनजी-अगर , एक विशेषता में ट्रांसक्लूड करें । टिप्पणियों में अधिक उदाहरण छोड़ें, मैं पोस्ट में जोड़ूंगा।

uiPagination

डायरेक्टिव सोर्स कोड | सोर्स कोड डेमो | डेमो

कोड काफी लंबा है, इसलिए मैंने इसे यहां सम्मिलित नहीं किया है।

का उपयोग करें:

  <ui-pagination cur="pagination.cur" total="pagination.total" display="9"></ui-pagination> 

एक दृश्य घटक के साथ क्लासिक निर्देश।

यहाँ एक प्रमुख विशेषता एक अलग दायरे का उपयोग है।

 scope: { cur: '=', total: '=', display: '@' }, 

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

इस मामले में, वक्र और कुल एक ही नाम की विशेषताओं के माध्यम से द्वि-दिशात्मक रूप से उस दायरे से जुड़े होंगे जिसमें निर्देश का उपयोग किया जाता है, और प्रदर्शन को उसी दायरे से उसी नाम की विशेषता के माध्यम से अपडेट प्राप्त होगा।

केवल एक चीज जो मैं नोट करना चाहूंगा: यदि कोई निर्देश NgModelController के सक्रिय उपयोग के साथ बनाया गया है, तो, सबसे अधिक संभावना है, एक अलग-अलग गुंजाइश का उपयोग नहीं करना बेहतर होगा (इसके साथ कुछ समस्याएं हैं), लेकिन एक नया बच्चा गुंजाइश, scope: true माध्यम से घोषित scope: true । सच्चाई यह है कि एनजी-मॉडल में ऑब्जेक्ट की संपत्ति ( ng-model="curPage" ) निर्दिष्ट करना आवश्यक होगा, न कि केवल एक चर ( ng-model="curPage" )। लेकिन बस चर और यह एनजी-मॉडल ( सबूत के लिए उपयोग करने के लिए अनुशंसित नहीं है, मिचको हेवरी द्वारा टिप्पणी देखें)।

uiGrid

डायरेक्टिव सोर्स कोड | सोर्स कोड डेमो | डेमो

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

का उपयोग करें:

 $scope.data = [ { column1: 'aaa', column2: '333', column3: 'aaa', column4: 'sdf' }, { column1: 'bbb', column2: '222', column3: 'zzz', column4: 'sdf' }, { column1: 'ccc', column2: '111', column3: 'ddd', column4: 'sdf' } ] <ui-grid source="data"> <column name="column1"></column> <column name="column2" sortable="true"></column> <column name="column3" sortable="true"></column> </ui-grid> 

यहां प्रमुख बिंदु नियंत्रक के माध्यम से निर्देशों की बातचीत है। यह इस कोड की require: '^uiGrid' मूल तत्वों पर आवश्यक नियंत्रक के लिए एक खोज प्रदान करता है और इसे link: function (scope, element, attrs, uiGridCtrl) { ... } करने के लिए पास करता है link: function (scope, element, attrs, uiGridCtrl) { ... } ।

निष्कर्ष

लेख बल्कि बड़ा निकला, लेकिन मैंने इसमें सब कुछ नहीं माना। डेवलपर गाइड पढ़ें - उनके पास एक अच्छा और विस्तृत है। Google+ पर समुदाय से जुड़ें - वहां पदों का कोई हिमस्खलन नहीं है, लेकिन दिलचस्प बिंदु काफी बार आते हैं।