AngularJS
सज्जाकार
खोज…
वाक्य - विन्यास
- डेकोरेटर (नाम, डेकोरेटर);
टिप्पणियों
डेकोरेटर वह फ़ंक्शन है जो किसी सेवा , कारखाने , निर्देश या फ़िल्टर को इसके उपयोग से पहले संशोधित करने की अनुमति देता है। डेकोरेटर का उपयोग सेवा के व्यवहार को ओवरराइड या संशोधित करने के लिए किया जाता है। डेकोरेटर फ़ंक्शन का वापसी मूल्य मूल सेवा, या एक नई सेवा हो सकती है, जो मूल सेवा को प्रतिस्थापित या रैप करती है और प्रतिनिधि बनाती है।
किसी भी सजा को कोणीय अनुप्रयोग के config चरण में $provide और $provide.decorator करना है।
डेकोरेटर फ़ंक्शन सेलेक्टर में चयनकर्ता से मेल खाने वाली सेवा तक पहुँच प्रदान करने के लिए इंजेक्ट किए
$delegateएक$delegateऑब्जेक्ट है। यह$delegateवह सेवा होगी जिसे आप सजा रहे हैं। डेकोरेटर को प्रदान किए गए फ़ंक्शन का रिटर्न वैल्यू सजाया जा रहा है, सेवा, निर्देश, या फिल्टर का स्थान लेगा।
किसी को केवल डेकोरेटर का उपयोग करने पर विचार करना चाहिए यदि कोई अन्य दृष्टिकोण उचित नहीं है या बहुत थकाऊ साबित होता है। यदि बड़े अनुप्रयोग समान सेवा का उपयोग कर रहे हैं, और एक भाग सेवा व्यवहार को बदल रहा है, तो प्रक्रिया में भ्रम और / या बग बनाना आसान है।
विशिष्ट उपयोग मामला तब होगा जब आपके पास तृतीय पक्ष निर्भरता होगी जिसे आप अपग्रेड नहीं कर सकते हैं, लेकिन इसे थोड़ा अलग तरीके से काम करने या इसे विस्तारित करने की आवश्यकता है।
सजाने सेवा, कारखाने हैं
नीचे सेवा डेकोरेटर का उदाहरण है, सेवा द्वारा वापस ली गई null तिथि को ओवरराइड करना।
angular.module('app', [])
.config(function($provide) {
$provide.decorator('myService', function($delegate) {
$delegate.getDate = function() { // override with actual date object
return new Date();
};
return $delegate;
});
})
.service('myService', function() {
this.getDate = function() {
return null; // w/o decoration we'll be returning null
};
})
.controller('myController', function(myService) {
var vm = this;
vm.date = myService.getDate();
});
<body ng-controller="myController as vm">
<div ng-bind="vm.date | date:'fullDate'"></div>
</body>
निर्देशन सजाने
निर्देशों को सेवाओं की तरह सजाया जा सकता है और हम इसकी किसी भी कार्यक्षमता को संशोधित या बदल सकते हैं। ध्यान दें कि निर्देश स्वयं $ डेलिगेट सरणी में स्थिति 0 पर पहुँचा है और डेकोरेटर में नाम पैरामीटर को Directive प्रत्यय (मामला संवेदनशील) शामिल होना चाहिए।
इसलिए, अगर निर्देश को myDate कहा जाता है, तो इसे $delegate[0] का उपयोग करके myDateDirective का उपयोग करके एक्सेस किया जा सकता है।
नीचे सरल उदाहरण है जहां निर्देशन वर्तमान समय दिखाता है। हम इसे एक सेकंड के अंतराल में वर्तमान समय को अपडेट करने के लिए सजाएंगे। सजावट के बिना यह हमेशा एक ही समय दिखाएगा।
<body>
<my-date></my-date>
</body>
angular.module('app', [])
.config(function($provide) {
$provide.decorator('myDateDirective', function($delegate, $interval) {
var directive = $delegate[0]; // access directive
directive.compile = function() { // modify compile fn
return function(scope) {
directive.link.apply(this, arguments);
$interval(function() {
scope.date = new Date(); // update date every second
}, 1000);
};
};
return $delegate;
});
})
.directive('myDate', function() {
return {
restrict: 'E',
template: '<span>Current time is {{ date | date:\'MM:ss\' }}</span>',
link: function(scope) {
scope.date = new Date(); // get current date
}
};
});
फ़िल्टर को सजाने
फ़िल्टर को सजाते समय, नाम पैरामीटर में Filter प्रत्यय (केस संवेदी) शामिल होना चाहिए। यदि फ़िल्टर को repeat कहा जाता है, तो डेकोरेटर पैरामीटर repeatFilter । नीचे हम कस्टम फ़िल्टर को सजाएंगे जो किसी भी दिए गए स्ट्रिंग को n बार दोहराता है ताकि परिणाम उलटा हो। आप कोणीय के बिल्ड-इन फ़िल्टर को भी उसी तरह से सजा सकते हैं, हालांकि इसकी अनुशंसा नहीं की जाती है क्योंकि यह फ्रेमवर्क की कार्यक्षमता को प्रभावित कर सकता है।
<body>
<div ng-bind="'i can haz cheeseburger ' | repeat:2"></div>
</body>
angular.module('app', [])
.config(function($provide) {
$provide.decorator('repeatFilter', function($delegate) {
return function reverse(input, count) {
// reverse repeated string
return ($delegate(input, count)).split('').reverse().join('');
};
});
})
.filter('repeat', function() {
return function(input, count) {
// repeat string n times
return (input || '').repeat(count || 1);
};
});
