स्रोत
$scope objectऔर का उपयोग कर एक नियंत्रक बनाने के बीच अंतर“controller as”वाक्य रचना और वीएम
$ गुंजाइश ऑब्जेक्ट का उपयोग करके एक नियंत्रक बनाना
आमतौर पर हम $ गुंजाइश ऑब्जेक्ट का उपयोग करके एक नियंत्रक बनाते हैं जैसा कि नीचे दी गई सूची में दिखाया गया है:
myApp.controller("AddController", function ($scope) {
$scope.number1;
$scope.number2;
$scope.result;
$scope.add = function () {
$scope.result = $scope.number1 + $scope.number2;
}
});
ऊपर हम $ गुंजाइश ऑब्जेक्ट नियंत्रक और दृश्य का उपयोग करते हुए, तीन चर और एक व्यवहार के साथ AddController बना रहे हैं, जो एक दूसरे से बात करते हैं। $ गुंजाइश ऑब्जेक्ट का उपयोग डेटा और व्यवहार को दृश्य में पास करने के लिए किया जाता है। यह व्यू और कंट्रोलर को एक साथ जोड़ देता है।
आवश्यक रूप से $ गुंजाइश वस्तु निम्नलिखित कार्य करती है:
कंट्रोलर से दृश्य में डेटा पास करें
नियंत्रक से दृश्य तक व्यवहार पास करें
नियंत्रक को देखता है और एक साथ देखता है
$ गुंजाइश ऑब्जेक्ट संशोधित हो जाता है जब एक दृश्य बदलता है और एक दृश्य संशोधित हो जाता है जब $ गुंजाइश ऑब्जेक्ट के गुण बदल जाते हैं
हम डेटा और व्यवहार को दृश्य में पास करने के लिए $ स्कोप ऑब्जेक्ट के गुणों को संलग्न करते हैं। नियंत्रक में $ गुंजाइश ऑब्जेक्ट का उपयोग करने से पहले, हमें इसे नियंत्रक फ़ंक्शन में निर्भरता के रूप में पारित करने की आवश्यकता है।
वाक्यविन्यास और vm के रूप में "नियंत्रक" का उपयोग करना
हम उपर्युक्त नियंत्रक को सिंटैक्स और vm वेरिएबल के रूप में नीचे लिस्ट में दिखाए अनुसार फिर से लिख सकते हैं:
myApp.controller("AddVMController", function () {
var vm = this;
vm.number1 = undefined;
vm.number2=undefined;
vm.result =undefined;
vm.add = function () {
vm.result = vm.number1 + vm.number2;
}
});
अनिवार्य रूप से हम इसे एक वैरिएबल vm को असाइन कर रहे हैं और फिर एक प्रॉपर्टी और व्यवहार उस पर अटैच कर रहे हैं। व्यू पर हम कंट्रोलर के रूप में कंट्रोलर का उपयोग करके AddVmController का उपयोग कर सकते हैं। यह नीचे दी गई सूची में दिखाया गया है:
<div ng-controller="AddVMController as vm">
<input ng-model="vm.number1" type="number" />
<input ng-model="vm.number2" type="number" />
<button class="btn btn-default" ng-click="vm.add()">Add</button>
<h3>{{vm.result}}</h3>
</div>
हम वाक्यविन्यास के रूप में नियंत्रक में "vm" से दूसरे नाम का उपयोग कर सकते हैं। हुड के तहत, AngularJS $ स्कोप ऑब्जेक्ट बनाता है और गुण और व्यवहार संलग्न करता है। हालाँकि नियंत्रक को सिंटैक्स के रूप में उपयोग करने से, कोड नियंत्रक पर बहुत साफ होता है और दृश्य पर केवल उपनाम नाम दिखाई देता है।
नियंत्रक के रूप में नियंत्रक का उपयोग करने के लिए यहां कुछ चरण दिए गए हैं:
$ गुंजाइश वस्तु के बिना एक नियंत्रक बनाएँ।
इसे स्थानीय चर पर असाइन करें। मैंने vm के रूप में परिवर्तनीय नाम को प्राथमिकता दी है, आप अपनी पसंद का कोई भी नाम चुन सकते हैं।
Vm वैरिएबल में डेटा और व्यवहार संलग्न करें।
दृश्य पर, नियंत्रक को सिंटैक्स के रूप में उपयोग करके नियंत्रक को एक अन्य नाम दें।
आप उपनाम को कोई भी नाम दे सकते हैं। जब तक मैं नेस्टेड नियंत्रकों के साथ काम नहीं कर रहा हूं, मैं वीएम का उपयोग करना पसंद करता हूं।
नियंत्रक बनाने में, $ स्कोप ऑब्जेक्ट दृष्टिकोण या सिंटैक्स के रूप में नियंत्रक का उपयोग करने के कोई प्रत्यक्ष लाभ या नुकसान नहीं हैं। यह विशुद्ध रूप से पसंद की बात है, हालांकि, सिंटैक्स के रूप में नियंत्रक का उपयोग करना नियंत्रक के जावास्क्रिप्ट कोड को अधिक पठनीय बनाता है और इस संदर्भ से संबंधित किसी भी मुद्दे को रोकता है।
$ स्कोप ऑब्जेक्ट दृष्टिकोण में नेस्टेड नियंत्रक
नीचे दी गई सूची में दिखाए गए अनुसार हमारे पास दो नियंत्रक हैं:
myApp.controller("ParentController", function ($scope) {
$scope.name = "DJ";
$scope.age = 32;
});
myApp.controller("ChildController", function ($scope) {
$scope.age = 22;
$scope.country = "India";
});
संपत्ति "आयु" दोनों नियंत्रकों के अंदर है, और इन दोनों नियंत्रकों को नीचे सूचीबद्ध सूची में दिखाए अनुसार घोंसला बनाया जा सकता है:
<div ng-controller="ParentController">
<h2>Name :{{name}} </h2>
<h3>Age:{{age}}</h3>
<div ng-controller="ChildController">
<h2>Parent Name :{{name}} </h2>
<h3>Parent Age:{{$parent.age}}</h3>
<h3>Child Age:{{age}}</h3>
<h3>Country:{{country}}</h3>
</div>
</div>
जैसा कि आप देखते हैं, पेरेंट कंट्रोलर की आयु संपत्ति तक पहुंचने के लिए हम $ पेरेंट का उपयोग कर रहे हैं। प्रसंग पृथक्करण यहाँ बहुत स्पष्ट नहीं है। लेकिन नियंत्रक को सिंटैक्स के रूप में उपयोग करते हुए, हम नेस्टेड नियंत्रकों के साथ अधिक सुरुचिपूर्ण तरीके से काम कर सकते हैं। मान लें कि हमारे पास नीचे दी गई सूची में दिखाए अनुसार नियंत्रक हैं:
myApp.controller("ParentVMController", function () {
var vm = this;
vm.name = "DJ";
vm.age = 32;
});
myApp.controller("ChildVMController", function () {
var vm = this;
vm.age = 22;
vm.country = "India";
});
नीचे दिए लिस्टिंग में दिखाए गए अनुसार इन दो नियंत्रकों को नेस्ट किया जा सकता है:
<div ng-controller="ParentVMController as parent">
<h2>Name :{{parent.name}} </h2>
<h3>Age:{{parent.age}}</h3>
<div ng-controller="ChildVMController as child">
<h2>Parent Name :{{parent.name}} </h2>
<h3>Parent Age:{{parent.age}}</h3>
<h3>Child Age:{{child.age}}</h3>
<h3>Country:{{child.country}}</h3>
</div>
</div>
सिंटैक्स के रूप में नियंत्रक में, हमारे पास अधिक पठनीय कोड है और पैतृक संपत्ति को $ पेरेंट सिंटैक्स का उपयोग करने के बजाय मूल नियंत्रक के अन्य नाम का उपयोग करके एक्सेस किया जा सकता है।
मैं इस पोस्ट को यह कहकर समाप्त करूंगा कि यह पूरी तरह से आपकी पसंद है कि क्या आप सिंटैक्स या $ स्कोप ऑब्जेक्ट के रूप में नियंत्रक का उपयोग करना चाहते हैं। इसका कोई बड़ा फायदा या नुकसान नहीं है, बस यह है कि संदर्भ पर आपके पास जो सिंटैक्स है, उस पर नियंत्रण आपके पास काम करने के लिए थोड़ा आसान है, यह देखने पर नेस्टेड नियंत्रकों में स्पष्ट अलगाव है।
