AngularJS => नियंत्रकों

वाक्य - विन्यास

<htmlElement एनजी-कंट्रोलर = "कंट्रोलरनाम"> ... </ htmlElement>
<स्क्रिप्ट> ऐप.कंट्रोलर ('कंट्रोलरनाम', कंट्रोलरफंक्शन); </ Script>

आपका पहला नियंत्रक

एक नियंत्रक एक मूल संरचना है जिसका उपयोग कोणीय में गुंजाइश को बनाए रखने और एक पृष्ठ के भीतर कुछ कार्यों को संभालने के लिए किया जाता है। प्रत्येक नियंत्रक एक HTML दृश्य के साथ युग्मित है।

नीचे एक कोणीय ऐप के लिए एक बुनियादी बॉयलरप्लेट है:

<!DOCTYPE html>

<html lang="en" ng-app='MyFirstApp'>
    <head>
        <title>My First App</title>

        <!-- angular source -->
        <script src="https://code.angularjs.org/1.5.3/angular.min.js"></script>
        
        <!-- Your custom controller code -->
        <script src="js/controllers.js"></script>
    </head>
    <body>
        <div ng-controller="MyController as mc">
            <h1>{{ mc.title }}</h1>
            <p>{{ mc.description }}</p>
            <button ng-click="mc.clicked()">
                Click Me!
            </button>
        </div>
    </body>
</html>

यहाँ ध्यान देने योग्य बातें हैं:

<html ng-app='MyFirstApp'>

ng-app साथ ऐप नाम सेट करना आपको एप्लिकेशन को एक बाहरी जावास्क्रिप्ट फ़ाइल में एक्सेस करने देता है, जो नीचे कवर किया जाएगा।

<script src="js/controllers.js"></script>

हमें एक जावास्क्रिप्ट फ़ाइल चाहिए जहाँ आप अपने नियंत्रकों और उनके कार्यों / डेटा को परिभाषित करेंगे।

<div ng-controller="MyController as mc">

ng-controller विशेषता उस डोम तत्व और सभी तत्वों के लिए नियंत्रक निर्धारित करती है जो इसके नीचे बच्चे (पुनरावर्ती) हैं।

आपके पास एक ही नियंत्रक (इस मामले में, MyController ) के कई प्रकार हो सकते हैं ... as mc , हम नियंत्रक के इस उदाहरण को एक उपनाम दे रहे हैं।

<h1>{{ mc.title }}</h1>

{{ ... }} संकेतन एक कोणीय अभिव्यक्ति है। इस स्थिति में, यह जो भी mc.title का मान है, उस <h1> तत्व का आंतरिक पाठ सेट करेगा।

नोट: कोणीय दोहरे तरीके के डेटा बाइंडिंग को नियोजित करता है, जिसका अर्थ है कि भले ही आप mc.title मान को कैसे अपडेट करते हैं, यह नियंत्रक और पृष्ठ दोनों में परिलक्षित होगा।

यह भी ध्यान दें कि कोणीय अभिव्यक्तियों को एक नियंत्रक का संदर्भ देने की आवश्यकता नहीं है। एक कोणीय अभिव्यक्ति {{ 1 + 2 }} या {{ "Hello " + "World" }} जितनी सरल हो सकती है।

<button ng-click="mc.clicked()">

ng-click एक कोणीय निर्देश है, इस मामले में MyController उदाहरण के clicked() फ़ंक्शन को ट्रिगर करने के लिए बटन के लिए क्लिक इवेंट को MyController ।

उन बातों को ध्यान में रखते हुए, चलो MyController नियंत्रक के कार्यान्वयन को लिखते हैं। ऊपर दिए गए उदाहरण के साथ, आप इस कोड को js/controller.js . js/controller.js में लिखेंगे।

सबसे पहले, आपको अपने जावास्क्रिप्ट में कोणीय ऐप को इंस्टेंट करना होगा।

var app = angular.module("MyFirstApp", []);

ध्यान दें कि हम जिस नाम से यहाँ से गुजरते हैं, वह वही नाम है जो आपने अपने HTML में ng-app निर्देश के साथ सेट किया था।

अब जब हमारे पास ऐप ऑब्जेक्ट है, तो हम नियंत्रक बनाने के लिए इसका उपयोग कर सकते हैं।

app.controller('MyController', function(){
    var ctrl = this;

    ctrl.title = "My First Angular App";
    ctrl.description = "This is my first Angular app!";

    ctrl.clicked = function(){
        alert("MyController.clicked()");
    };
});

नोट: ऐसी किसी भी चीज़ के लिए जिसे हम कंट्रोलर इंस्टेंस का हिस्सा बनाना चाहते हैं, हम this कीवर्ड का उपयोग करते हैं।

यह एक साधारण नियंत्रक बनाने के लिए आवश्यक है।

नियंत्रक बनाना

angular
    .module('app')
    .controller('SampleController', SampleController)

SampleController.$inject = ['$log', '$scope'];
function SampleController($log, $scope){
    $log.debug('*****SampleController******');
    
    /* Your code below */
}

नोट: .$inject यह सुनिश्चित करेगा कि आपके आश्रितों को न्यूनतम करने के बाद हाथापाई नहीं होगी। इसके अलावा, सुनिश्चित करें कि यह नामित फ़ंक्शन के क्रम में है।

नियंत्रकों का निर्माण, न्यूनतम सुरक्षित

आपके नियंत्रक निर्माण को न्यूनतमीकरण से बचाने के लिए कुछ अलग तरीके हैं।

पहले को इनलाइन एरे एनोटेशन कहा जाता है। यह निम्नलिखित की तरह दिखता है:

var app = angular.module('app');
app.controller('sampleController', ['$scope', '$http', function(a, b){
    //logic here
}]);

नियंत्रक विधि का दूसरा पैरामीटर निर्भरता की एक सरणी को स्वीकार कर सकता है। आप देख सकते हैं मैं परिभाषित किया है $scope और $http जो नियंत्रक समारोह है, जिसमें के मापदंडों के अनुरूप होना चाहिए a हो जाएगा $scope है, और b होगा $http । ध्यान दें कि सरणी में अंतिम आइटम आपका नियंत्रक फ़ंक्शन होना चाहिए।

दूसरा विकल्प $inject संपत्ति का उपयोग कर रहा है। यह निम्नलिखित की तरह दिखता है:

var app = angular.module('app');
app.controller('sampleController', sampleController);
sampleController.$inject = ['$scope', '$http'];
function sampleController(a, b) {
    //logic here
}

यह इनलाइन सरणी एनोटेशन के रूप में एक ही बात करता है, लेकिन उन लोगों के लिए एक अलग स्टाइल प्रदान करता है जो दूसरे पर एक विकल्प पसंद करते हैं।

इंजेक्शन की निर्भरता का क्रम महत्वपूर्ण है

सरणी प्रपत्र का उपयोग करके निर्भरता को इंजेक्ट करते समय, सुनिश्चित करें कि निर्भरता की सूची नियंत्रक फ़ंक्शन को पारित तर्कों की इसी सूची से मेल खाती है।

ध्यान दें कि निम्नलिखित उदाहरण में, $scope और $http उलट हैं। इससे कोड में समस्या होगी।

// Intentional Bug: injected dependencies are reversed which will cause a problem
app.controller('sampleController', ['$scope', '$http',function($http, $scope) {
    $http.get('sample.json');
}]);

कोणीय जेएस में नियंत्रक का उपयोग करना

कोणीय $scope में नियंत्रक और दृश्य के बीच गोंद है जो हमारे सभी डेटा बाइंडिंग आवश्यकताओं के साथ मदद करता है। नियंत्रक के रूप में नियंत्रक और दृश्य को बांधने का एक और तरीका है और अधिकतर उपयोग करने की सिफारिश की जाती है। मूल रूप से ये दो नियंत्रक निर्माण हैं जो कोणीय (यानी $ गुंजाइश और नियंत्रक के रूप में) हैं।

नियंत्रक के उपयोग के विभिन्न तरीके निम्न हैं -

नियंत्रक देखें सिंटैक्स

<div ng-controller="CustomerController as customer">
    {{ customer.name }}
</div>

नियंत्रक नियंत्रक नियंत्रक

function CustomerController() {
    this.name = {};
    this.sendMessage = function() { };
}

vm के साथ नियंत्रक

function CustomerController() {
    /*jshint validthis: true */
    var vm = this;
    vm.name = {};
    vm.sendMessage = function() { };
}

controllerAs $scope से अधिक मात्रा में चीनी है। आप अभी भी व्यू से बंध सकते हैं और अभी भी $scope विधियों तक पहुँच सकते हैं। controllerAs का उपयोग करना, कोणीय कोर टीम द्वारा सुझाए गए सर्वोत्तम तरीकों में से एक है। इसके कई कारण हैं, उनमें से कुछ हैं -

$scope नियंत्रक से सदस्यों को एक मध्यस्थ वस्तु के माध्यम से दृश्य में उजागर कर रहा है। this.* सेट करके this.* , हम एक्सपोजर से देखने के लिए जो हम चाहते हैं, बस उसे उजागर कर सकते हैं। यह इसका उपयोग करने के मानक जावास्क्रिप्ट तरीके का भी पालन करता है।
controllerAs सिंटैक्स का उपयोग करते हुए, हमारे पास अधिक पठनीय कोड है और पैतृक संपत्ति को $parent सिंटैक्स का उपयोग करने के बजाय मूल नियंत्रक के उपनाम नाम का उपयोग करके एक्सेस किया जा सकता है।
यह दृश्य में "डॉटेड" ऑब्जेक्ट के लिए बाइंडिंग के उपयोग को बढ़ावा देता है (जैसे नाम के बजाय customer.name), जो अधिक प्रासंगिक, पढ़ने में आसान है, और "डॉटिंग" के बिना हो सकने वाले किसी भी संदर्भ मुद्दों से बचा जाता है।
नेस्टेड नियंत्रकों के साथ व्यूज में $parent कॉल का उपयोग करने से बचने में मदद करता है।
controllerAs सिंटैक्स का उपयोग करते समय इसके लिए कैप्चर वैरिएबल का उपयोग करें। vm जैसे एक सुसंगत चर नाम चुनें, जो ViewModel के लिए खड़ा है। क्योंकि, this कीवर्ड प्रासंगिक है और किसी कंट्रोलर के अंदर किसी फ़ंक्शन के दौरान उपयोग किए जाने पर इसका संदर्भ बदल सकता है। इस संदर्भ को कैप्चर करने से इस समस्या का सामना करने से बचा जाता है।

नोट: controllerAs सिंटैक्स का उपयोग कर वर्तमान नियंत्रक के संदर्भ में वर्तमान नियंत्रक को जोड़ता है, इसलिए यह फ़ील्ड के रूप में उपलब्ध है

<div ng-controller="Controller as vm>...</div>

vm $scope.vm . vm रूप में उपलब्ध है।

न्यूनतम-सुरक्षित कोणीय नियंत्रक बनाना

न्यूनतम-सुरक्षित कोणीय नियंत्रक बनाने के लिए, आप controller फ़ंक्शन मापदंडों को बदल देंगे।

module.controller फ़ंक्शन में दूसरा तर्क एक सरणी पास किया जाना चाहिए, जहां अंतिम पैरामीटर नियंत्रक फ़ंक्शन है , और इससे पहले प्रत्येक पैरामीटर प्रत्येक इंजेक्शन मूल्य का नाम है।

यह सामान्य प्रतिमान से अलग है; इंजेक्शन तर्कों के साथ नियंत्रक कार्य करता है।

दिया हुआ:

var app = angular.module('myApp');

नियंत्रक को इस तरह दिखना चाहिए:

app.controller('ctrlInject', 
    [
        /* Injected Parameters */
        '$Injectable1', 
        '$Injectable2', 
        /* Controller Function */
        function($injectable1Instance, $injectable2Instance) {
            /* Controller Content */
        }
    ]
);

नोट: इंजेक्ट किए गए मापदंडों के नामों का मिलान करने की आवश्यकता नहीं है, लेकिन वे क्रम में बाध्य होंगे।

यह इस तरह से कुछ के लिए छोटा होगा:

var a=angular.module('myApp');a.controller('ctrlInject',['$Injectable1','$Injectable2',function(b,c){/* Controller Content */}]);

Minification प्रक्रिया के प्रत्येक उदाहरण का स्थान ले लेगा app के साथ a , के प्रत्येक उदाहरण $Injectable1Instance साथ b के प्रत्येक उदाहरण है, और $Injectable2Instance साथ c ।

नेस्ट कंट्रोलर

नेस्टिंग कंट्रोलर $scope को भी चेन करते हैं। नेस्टेड कंट्रोलर में $scope वैरिएबल बदलने से पेरेंट कंट्रोलर में समान $scope वैरिएबल बदल जाता है।

.controller('parentController', function ($scope) {
    $scope.parentVariable = "I'm the parent";
});

.controller('childController', function ($scope) {
    $scope.childVariable = "I'm the child";

    $scope.childFunction = function () {
        $scope.parentVariable = "I'm overriding you";
    };
});

अब चलो, नेस्टेड दोनों को संभालने की कोशिश करें।

<body ng-controller="parentController">
    What controller am I? {{parentVariable}}
    <div ng-controller="childController">
        What controller am I? {{childVariable}}
        <button ng-click="childFunction()"> Click me to override! </button>
    </div>
</body>

नेस्टिंग कंट्रोलर्स के पास इसके फायदे हो सकते हैं, लेकिन ऐसा करते समय एक बात का ध्यान रखना चाहिए। ngController निर्देश को कॉल करना नियंत्रक का एक नया उदाहरण बनाता है - जो अक्सर भ्रम और अप्रत्याशित परिणाम पैदा कर सकता है।

Modified text is an extract of the original Stack Overflow Documentation

के तहत लाइसेंस प्राप्त है CC BY-SA 3.0

से संबद्ध नहीं है Stack Overflow

AngularJS
नियंत्रकों

खोज…