AngularJS
अवयव
खोज…
पैरामीटर
| पैरामीटर | विवरण |
|---|---|
| = | दो-तरफ़ा डेटा बाइंडिंग का उपयोग करने के लिए। इसका मतलब यह है कि यदि आप अपने घटक दायरे में उस चर को अपडेट करते हैं, तो परिवर्तन माता-पिता के दायरे पर दिखाई देगा। |
| < | वन-वे बाइंडिंग जब हम सिर्फ एक पेरेंट स्कोप से वैल्यू पढ़ना चाहते हैं और उसे अपडेट नहीं करते हैं। |
| @ | स्ट्रिंग पैरामीटर। |
| और | कॉलबैक के मामले में आपके घटक को अपने मूल दायरे में कुछ उत्पादन करने की आवश्यकता होती है। |
| - | - |
| जीवन चक्र हुक | विवरण (angular.version> = 1.5.3 की आवश्यकता है) |
| $ onInit () | एक तत्व पर सभी नियंत्रकों के निर्माण के बाद प्रत्येक नियंत्रक पर कॉल किया गया और उनके बाइंडिंग को इनिशियलाइज़ किया गया। अपने कंट्रोलर के लिए इनिशियलाइज़ेशन कोड डालने के लिए यह एक अच्छी जगह है। |
| $ onChanges (changesObj) | जब भी वन-वे बाइंडिंग अपडेट की जाती है। changesObj एक हैश है जिसकी कुंजियाँ बदले गए गुणों के नाम हैं, और मान फॉर्म { currentValue, previousValue, isFirstChange() } एक वस्तु हैं। |
| $ OnDestroy () | कंट्रोलर पर कॉल किया जाता है जब इसका स्कोप नष्ट हो जाता है। बाहरी संसाधनों, घड़ियों और घटना संचालकों को जारी करने के लिए इस हुक का उपयोग करें। |
| $ postLink () | इस नियंत्रक तत्व और उसके बच्चों को जोड़ने के बाद कॉल किया गया। इस हुक को AngAfterViewInit और ngAfterContentInit हुकों के अनुरूप माना जा सकता है। |
| $ doCheck () | पाचन चक्र के प्रत्येक मोड़ पर कहा जाता है। परिवर्तनों का पता लगाने और उन पर कार्रवाई करने का अवसर प्रदान करता है। आपके द्वारा किए गए परिवर्तनों के जवाब में आप जो भी कार्य करना चाहते हैं, वह इस हुक से लागू किया जाना चाहिए; इसे लागू करने पर कोई प्रभाव नहीं पड़ता है जब $ onChanges कहा जाता है। |
टिप्पणियों
घटक एक विशेष प्रकार का निर्देश है जो सरल विन्यास का उपयोग करता है जो घटक-आधारित अनुप्रयोग संरचना के लिए उपयुक्त है। घटक को कोणीय 1.5 में पेश किया गया था, इस खंड के उदाहरण पुराने AngularJS संस्करणों के साथ काम नहीं करेंगे ।
कंपोनेंट्स के बारे में एक पूरा डेवलपर गाइड https://docs.angularjs.org/guide/component पर उपलब्ध है
बुनियादी अवयव और जीवन चक्र हुक
एक घटक क्या है?
- एक घटक मूल रूप से एक निर्देश है जो एक सरल विन्यास का उपयोग करता है और यह एक घटक-आधारित वास्तुकला के लिए उपयुक्त है, जो कि कोणीय 2 के बारे में है। एक विजेट के रूप में एक घटक के बारे में सोचो: HTML कोड का एक टुकड़ा जिसे आप अपने वेब एप्लिकेशन में कई अलग-अलग स्थानों में पुन: उपयोग कर सकते हैं।
अंग
angular.module('myApp', [])
.component('helloWorld', {
template: '<span>Hello World!</span>'
});
मार्कअप
<div ng-app="myApp">
<hello-world> </hello-world>
</div>
घटक में बाहरी डेटा का उपयोग करना:
हम अपने घटक को नाम देने के लिए एक पैरामीटर जोड़ सकते हैं, जिसका उपयोग निम्नानुसार किया जाएगा:
angular.module("myApp", [])
.component("helloWorld",{
template: '<span>Hello {{$ctrl.name}}!</span>',
bindings: { name: '@' }
});
मार्कअप
<div ng-app="myApp">
<hello-world name="'John'" > </hello-world>
</div>
घटकों में नियंत्रकों का उपयोग करना
आइए एक नज़र डालें कि इसमें नियंत्रक कैसे जोड़ा जाए।
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.myName = 'Alain';
}
});
मार्कअप
<div ng-app="myApp">
<hello-world name="John"> </hello-world>
</div>
कंपोनेंट को पास किए गए पैरामीटर, इसके $onInit फंक्शन को Angular कहे जाने से ठीक पहले कंट्रोलर के दायरे में उपलब्ध हैं। इस उदाहरण पर विचार करें:
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
controller: function(){
this.$onInit = function() {
this.myName = "Mac" + this.name;
}
}
});
ऊपर से टेम्पलेट में, यह "हैलो जॉन, आई एम मैकजॉन!" प्रस्तुत करेगा।
ध्यान दें कि यदि कोई निर्दिष्ट नहीं है तो $ctrl controllerAs लिए कोणीय डिफ़ॉल्ट मान है।
एक वस्तु के रूप में "आवश्यकता" का उपयोग करना
कुछ उदाहरणों में आपको अपने घटक के अंदर मूल घटक से डेटा एक्सेस करने की आवश्यकता हो सकती है।
यह निर्दिष्ट करके प्राप्त किया जा सकता है कि हमारे घटक को उस मूल घटक की आवश्यकता है, आवश्यकता हमें आवश्यक घटक नियंत्रक का संदर्भ देगी, जो तब हमारे नियंत्रक में उपयोग किया जा सकता है जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:
ध्यान दें कि आवश्यक नियंत्रक $ onInit हुक के बाद ही तैयार होने की गारंटी है।
angular.module("myApp", [])
.component("helloWorld",{
template: "Hello {{$ctrl.name}}, I'm {{$ctrl.myName}}!",
bindings: { name: '@' },
require: {
parent: '^parentComponent'
},
controller: function () {
// here this.parent might not be initiated yet
this.$onInit = function() {
// after $onInit, use this.parent to access required controller
this.parent.foo();
}
}
});
हालांकि, ध्यान रखें कि यह बच्चे और माता-पिता के बीच एक तंग युग्मन बनाता है।
अवयव कोणीय जेएस में
कोणीयजेएस में घटकों को एक कस्टम निर्देशन के रूप में कल्पना की जा सकती है (<html> यह एक HTML निर्देश में, और कुछ इस तरह से एक कस्टम निर्देश <anyTHING> होगा)। एक घटक में एक दृश्य और एक नियंत्रक होता है। नियंत्रक में व्यावसायिक तर्क होता है जिसे एक दृश्य के साथ बांधा जाता है, जिसे उपयोगकर्ता देखता है। घटक एक कोणीय निर्देश से भिन्न होता है क्योंकि इसमें कम कॉन्फ़िगरेशन होता है। एक कोणीय घटक को इस तरह परिभाषित किया जा सकता है।
angular.module("myApp",[]).component("customer", {})
घटकों को कोणीय मॉड्यूल पर परिभाषित किया गया है। उनमें दो तर्क होते हैं, एक घटक का नाम है और दूसरा एक वस्तु है जिसमें मुख्य मूल्य युग्म है, जो यह दर्शाता है कि कौन सा दृश्य और कौन सा नियंत्रक इस तरह का उपयोग करने जा रहा है।
angular.module("myApp",[]).component("customer", {
templateUrl : "customer.html", // your view here
controller: customerController, //your controller here
controllerAs: "cust" //alternate name for your controller
})
"myApp" उस ऐप का नाम है जिसे हम बना रहे हैं और ग्राहक हमारे घटक का नाम है। अब इसे मुख्य html फ़ाइल में कॉल करने के लिए हम इसे इस तरह से रखेंगे
<customer></customer>
अब यह निर्देश आपके द्वारा निर्दिष्ट किए गए दृश्य और आपके तर्क में आपके द्वारा लिखे गए व्यावसायिक तर्क से बदल दिया जाएगा।
नोट: याद रखें घटक दूसरे तर्क के रूप में एक वस्तु लेता है जबकि निर्देश कारखाने के कार्य को तर्क के रूप में लेता है।