कोणीयज निर्देशन विकास आसान है

AngularJS के निर्देश शांत हैं

AngularJS वेब अनुप्रयोगों के निर्माण के लिए एक रूपरेखा है, जो आपको काफी सरल रूप से जटिल एप्लिकेशन बनाने की अनुमति देता है। उनकी सबसे अच्छी विशेषताओं में से एक निर्देश बनाना है जो पुन: प्रयोज्य वेब घटक हैं। यह नए HTML टैग और विशेषताएँ बनाना संभव बनाता है जो डेटा परिवर्तनों के जवाब में सामग्री को गतिशील रूप से प्रदर्शित कर सकते हैं, और यदि आवश्यक हो तो डेटा को स्वयं अपडेट कर सकते हैं।
यह एक बहुत ही उच्च-प्रदर्शन दृष्टिकोण है क्योंकि यह आपको पुन: प्रयोज्य कोड पैकेजों में जटिल DOM इंटरैक्शन को लपेटने की अनुमति देता है।

शुरुआत में, निर्देशन बनाना भ्रामक लगता है।

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

निर्देश बनाने के लिए सिद्धांत

निर्देश केवल आपके जीवन को आसान बना देंगे यदि आप स्रोत कोड को पढ़ने और संशोधित किए बिना उनका उपयोग कर सकते हैं। इस मामले में, आप भूल सकते हैं कि वे कैसे काम करते हैं, लेकिन बस जानते हैं कि वे क्या कर रहे हैं।
यदि आपने पहले बैकबोन जैसी प्रस्तुति-उन्मुख रूपरेखाओं में से एक का उपयोग किया है, तो आप निर्देशों का उपयोग करके अपने एप्लिकेशन को छोटे टुकड़ों में विभाजित करना चाह सकते हैं। उदाहरण के लिए, यदि आप उपयोगकर्ताओं की सूची प्रदर्शित करना चाहते हैं, तो आप एक निर्देश बना सकते हैं, जो $scope.users । एक दृश्य में उन्हें प्रदर्शित करेगा:

 <user-list/> 

उपयोगकर्ता-सूची निर्देश काम करता है। ध्यान दें कि इसका उपयोग "दोहराना नहीं" ( DRY ) के सिद्धांत के अनुसार है! हालांकि, इसकी तुलना एनजी-रिपीट से करें , जो केवल पुनरावृत्ति को संभालता है। उनमें से कौन सा विभिन्न स्थानों में पुन: उपयोग किया जा सकता है? यदि आपको दो स्थानों पर उपयोगकर्ताओं को अलग-अलग प्रदर्शित करने की आवश्यकता है तो क्या होगा?
एक अच्छा निर्देशन एक काम करता है
ng-repeat user-list तुलना ng-repeat बेहतर है क्योंकि यह केवल एक कार्रवाई के लिए जिम्मेदार है: यह केवल एक निश्चित भाग को दोहराता है, इसलिए इसका उपयोग कई स्थितियों में किया जा सकता है। यह समझना आसान है कि वह क्या कर रही है। एक निर्देश बनाने के बजाय जो हर चीज के लिए जिम्मेदार है, उसे कई निर्देशों में तोड़ना बेहतर है जो विशिष्ट कार्य करेंगे, और उन्हें एक साथ उपयोग करेंगे।
एक अच्छा निर्देश अनुप्रयोग विशिष्ट है
निर्देश सभी अधिक उपयोगी हैं जितना कम वे आवेदन के बारे में धारणा बनाते हैं। एक निर्देश जो उपयोगकर्ता को निर्दिष्ट करने की अनुमति देता है कि कौन सी संपत्ति की निगरानी करना है, जैसे ng-model , उस निर्देश की तुलना में अधिक उपयोगी है जो $scope.users मानता है। एक नियम के रूप में, यदि आपके निर्देश का उपयोग विभिन्न अनुप्रयोगों में किया जाना चाहिए, तो उसे इस नियम का पालन करना चाहिए ताकि आप यह कह सकें कि यह अच्छी तरह से डिज़ाइन किया गया है, भले ही आप इसे प्रकाशित नहीं करने जा रहे हों।
आज के लिए पर्याप्त सिद्धांत है। आइए कुछ विशिष्ट उदाहरणों में गोता लगाएँ जो निर्देशों के साथ बातचीत करने के सामान्य तरीकों को प्रदर्शित करते हैं।

कैसे प्रदर्शित करें एंकर

पहली बात यह जानना है कि एक निर्देश कैसे बनाया जाए जो बाध्य संपत्ति के मूल्य को प्रदर्शित करेगा: क्योंकि यह डबल घुंघराले ब्रेस के साथ किया जाता है। उदाहरण के लिए, चलो एक निर्देश बनाते हैं जो एक फोटो और एक कैप्शन प्रदर्शित करेगा।
किसी भी निर्देश को डिजाइन करने में पहला कदम उन विशेषताओं के लिए नामों का चयन करना है जो आपके इंटरफ़ेस में इसका प्रतिनिधित्व करेंगे। मैंने छवि के स्रोत को इंगित करने के लिए photo-src साइन को चुना, और हस्ताक्षर करने के लिए caption । सावधान रहें कि पहले से ही अन्य निर्देशों जैसे ng-src द्वारा उपयोग किए जाने वाले नामों का उपयोग न करें, यदि आप नहीं जानते कि वे कैसे काम करते हैं।
दूसरे, आपको यह तय करने की आवश्यकता है कि क्या आप केवल विशेषताओं और वर्ग नामों का समर्थन करेंगे, या क्या आप तत्वों का भी समर्थन करेंगे। हमारे मामले में, हम चाहते हैं कि photo एक तत्व हो।

 <photo photo-src="{{photo.url}}" caption="Taken on: {{photo.date}}"/> 

कृपया ध्यान दें कि मैंने निर्देशन के लिए पूरी तरह से तस्वीर का उद्देश्य पारित नहीं किया है। यह समाधान आपको एक अलग डेटा संरचना के साथ काम करने के निर्देश को बेहतर रूप से अनुकूलित करने की अनुमति देता है।
बाध्य गुणों के मूल्यों को पढ़ने के लिए, attrs.$observe । इस मामले में, कॉलबैक फ़ंक्शन को हर बार बाध्य संपत्ति के मूल्य को बदल दिया जाएगा। तब हम DOM में परिवर्तन करने के लिए element का उपयोग करते हैं।

 app.directive('photo', function() { return { // ,      restrict: 'E', //  <photo>  html template: '<figure><img/><figcaption/></figure>', replace: true, //    DOM link: function($scope, element, attrs) { attrs.$observe('caption', function(value) { element.find('figcaption').text(value) }) //     «»  attrs.$observe('photoSrc', function(value) { element.find('img').attr('src', value) }) } } } }) 

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

 app.directive('photo', function() { return { restrict: 'E', templateUrl: 'photo.html', replace: true, //     attrs     scope: { caption: '@', photoSrc: '@' } } }) 

 <!-- photo.html --> <figure> <img ng-src="{{photoSrc}}"/> <figcaption>{{caption}}</figcaption> </figure> 

डेटा कैसे पढ़ें और लिखें

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

 <!--     --> <button toggle="preferences.showDetails">Show Details</button> 

सबसे पहले हम = scope में उपयोग करते हैं: scope बनाने के लिए। हमारे निर्देश में उपलब्ध करें। यद्यपि यह निर्देश के अंदर कहीं भी स्पष्ट रूप से निर्दिष्ट नहीं है, इस सिंटैक्स scope.toggle का उपयोग करके। scope.toggle उस गुण को पढ़ता है और लिखता है जिसे उपयोगकर्ता विशेषता में निर्दिष्ट करता है।

 app.directive('toggle', function() { return { scope: { toggle: '=', }, link: function($scope, element, attrs) { 

तब हम scope.$watch उपयोग करते हैं scope.$watch , जो हर बार अभिव्यक्ति में परिवर्तन के मूल्य को पारित किए गए फ़ंक्शन को निष्पादित करता है। हम सीएसएस वर्ग को active से जोड़ेंगे या हटाएंगे, बदलाव के लिए हैंडलर के अंदर।

  $scope.$watch("toggle", function(value) { element.toggleClass('active', value) }) 

अंत में, हम click इवेंट की सदस्यता लेते हैं, जहां हम दायरे को अपडेट करेंगे। हमें scope.$apply का उपयोग करने की आवश्यकता है scope.$apply हर बार परिवर्तन scope.$apply होता है जो कोणीय निष्पादन के संदर्भ में होता है।

  element.click(function() { $scope.$apply(function() { $scope.toggle = !$scope.toggle }) }) } } }) 

वर्किंग डेमो

घटनाओं का खुलासा कैसे करें

कुछ मामलों में, नियंत्रक को निर्देश के अंदर होने वाली घटनाओं पर प्रतिक्रिया देने की आवश्यकता होती है, उदाहरण के लिए, जैसे ng-click । चलो एक scroll निर्देश बनाते हैं जो एक फ़ंक्शन को कॉल कर सकता है जब उपयोगकर्ता किसी तत्व को स्क्रॉल करता है। इसके अलावा, हम स्क्रॉल ऑफ़सेट मान भी संभालते हैं।
...
बटन टॉगल की तरह, हम scroll विशेषता में निर्दिष्ट किसी भी फ़ंक्शन को हमारे निर्देश के दायरे में पास करते हैं।

 app.directive('scroll', function() { return { scope: { scroll: "&" }, link: function($scope, element, attrs) { 

हम जिस व्यवहार की आवश्यकता है उसे प्राप्त करने के लिए हम jQuery स्क्रॉल इवेंट का उपयोग करेंगे। यहां आपको scope.$apply को भी कॉल करने की आवश्यकता है scope.$apply , क्योंकि हालांकि हैंडलर कहा जाता है, इसे नियंत्रक के संदर्भ में नहीं कहा जाता है।

  element.scroll(function() { $scope.apply(function() { var offset = element.scrollTop() $scope.scroll({offset:offset}) }) }) } } }) 

कृपया ध्यान दें कि हम पहले पैरामीटर में ऑफ़सेट मान को पास नहीं करते हैं, हम उपलब्ध मापदंडों के हैश को पास करते हैं और उन्हें onScroll(offset) अभिव्यक्ति के अंदर उपलब्ध onScroll(offset) जो कि विशेषता के माध्यम से पारित किया गया था। यह सीधे मापदंडों को पारित करने की तुलना में बहुत अधिक लचीला दृष्टिकोण है, क्योंकि अन्य गुंजाइश पैरामीटर संबंधित कार्यों को पारित किया जा सकता है, उदाहरण के लिए, ng-repeat में वर्तमान तत्व।
वर्किंग डेमो

HTML सामग्री कैसे प्राप्त करें

निर्देशों में कोई भी HTML सामग्री हो सकती है, लेकिन जैसे ही आप कोई टेम्पलेट निर्दिष्ट करते हैं, उनकी सामग्री उसमें बदल जाती है।
आइए एक modal कंपोनेंट बनाएं: एक क्लोज बटन वाला पॉपअप, जिसके लिए आप HTML में निर्दिष्ट इसकी सामग्री को सहेजना चाहते हैं।

 <modal> <p>Some contents</p> <p>Put whatever you want in here</p> </modal> 

हमारे modal तत्व में एक से अधिक तत्व होते हैं। जब हम एक टेम्पलेट बनाते हैं, तो हम सभी प्राप्त सामग्री को इसमें सम्मिलित करते हैं, जहां आवश्यक हो, बस एक विशेष ng-transclude को div जोड़कर।

 <div class="modal"> <header> <button>Close</button> <h2>Modal</h2> </header> <div class="body" ng-transclude></div> </div> 

एक निर्देशन से एक टेम्पलेट तक सामग्री पास करना सक्षम करना बहुत आसान है। ऐसा करने के लिए, बस transclude: true सेट करें transclude: true :

 app.directive('modal', function() { return { restrict: 'E', templateUrl: 'modal.html', replace: true, transclude: true, } }) 

अधिक जटिल परिणाम प्राप्त करने के लिए, आप इस लेख के किसी भी तरीके को जोड़ सकते हैं।

घटनाओं का जवाब कैसे दें

कभी-कभी एक निश्चित गुंजाइश घटना होने पर आपके निर्देशन में एक फ़ंक्शन को कॉल करने की आवश्यकता हो सकती है। उदाहरण के लिए, यदि उपयोगकर्ता भागने की कुंजी दबाता है, तो आप एक खुली मोडल विंडो बंद करना चाह सकते हैं।
लगभग हमेशा, इसका मतलब है कि आप घटनाओं पर बहुत अधिक ध्यान देते हैं, हालांकि आपको डेटा प्रवाह के बारे में सोचना चाहिए। नियंत्रकों में न केवल डेटा होता है, वे दृश्य स्थिति भी होते हैं। windowShown में windowShown बूलियन वैरिएबल होना सामान्य बात है, जिसे आप ng-show का उपयोग करने के लिए बाँधते ng-show , या ऊपर बताए गए तरीके से अपने निर्देश पर बूलियन वैल्यू पास करते हैं।
ऐसे मामले हैं जब यह $scope.$on का उपयोग करने के लिए समझ में आता है $scope.$on एक निर्देश में। लेकिन सबसे पहले, राज्य परिवर्तनों के संदर्भ में समस्या के बारे में सोचने की कोशिश करें। कोणीय में, चीजों को बहुत आसान हो जाता है यदि आप घटनाओं के बजाय डेटा और स्थिति पर ध्यान केंद्रित करते हैं।

अतिरिक्त जानकारी

निर्देश बहुत कुछ कर सकते हैं। लेकिन इन सभी अतिरिक्त सुविधाओं को इस लेख में शामिल नहीं किया गया है। अधिक जानकारी के लिए कृपया निर्देश प्रलेखन पृष्ठ देखें।