Angular.js नियंत्रक मापदंडों को समझना


80

मैं सिर्फ Angular.js सीखना शुरू कर रहा हूं और मैं Angular Home पेज पर "वायर अप अ बैकएंड" उदाहरण में project.js देख रहा हूं ।

मैं नियंत्रक कार्यों में मापदंडों के बारे में उलझन में हूँ:

function ListCtrl($scope, Projects) {
  ... 
}   

function CreateCtrl($scope, $location, $timeout, Projects) {
  ... 
}

function EditCtrl($scope, $location, $routeParams, angularFire, fbURL) {
   angularFire(fbURL + $routeParams.projectId, $scope, 'remote', {}).
   then(function() {
     ...
   });
}  

ये नियंत्रक फ़ंक्शंस मार्गप्रोवाइडर में कहलाते हैं, लेकिन कोई भी पैरामीटर नहीं दिया जाता है।

$routeProvider.
  when('/', {controller:ListCtrl, templateUrl:'list.html'}).
  when('/edit/:projectId', {controller:EditCtrl, templateUrl:'detail.html'}).
  when('/new', {controller:CreateCtrl, templateUrl:'detail.html'}).
  otherwise({redirectTo:'/'});
});

केवल एक चीज मैं अब तक संभवतः बताते हैं कि क्या हो रहा है मिल सकता है "नियंत्रकों इंजेक्शन सेवाओं में" है, जो बताते हैं $location, $timeout, लेकिन विधि पैरामीटर नहीं angularFireऔर fbURL

मेरे विशिष्ट प्रश्न हैं:

  1. नियंत्रक पैरामीटर क्या हो सकते हैं?

  2. नियंत्रक कार्यों को उनके मापदंडों के साथ कहाँ कहा जाता है? या मापदंडों को नहीं बुलाया जाता है, लेकिन नियंत्रक के साथ सिर्फ सामान जुड़ा होता है, जहां एसोसिएशन बहुत सारे Angular.js जादू के साथ होता है (यदि हां, तो क्या मैं जीथब पर स्रोत कोड देख सकता हूं)?

  3. कहाँ angularFireपरिभाषित किया गया है?

  4. कैसे fbURLजुड़े पैरामीटर में है:

    angular.module('project', ['firebase']).
        value('fbURL', 'https://angularjs-projects.firebaseio.com/').
        factory ...
    
  5. क्या कोई ऐसी जगह है जहाँ मैं सभी सेवाओं को देख सकता हूँ, जैसे $locationऔर $timeoutकि, Angular.js प्रदान करता है? (मैंने सूची खोजने की कोशिश की लेकिन असफल रहा।)



1
4. जैसा कि आप समझते हैं, नियंत्रक के मापदंडों को कोणीय द्वारा नियंत्रित किया जा रहा है। कोणीय सभी पंजीकृत सेवाओं में दिखेगा और पैरामीटर के निर्दिष्ट नाम के साथ एक मैच खोजने की कोशिश करेगा और तदनुसार सेवा को इंजेक्ट करेगा!
jpmorin

3. जब आपने अपने प्रोजेक्ट मॉड्यूल को परिभाषित किया, तो आपने फायरबेस मॉड्यूल निर्भरता को भी शामिल किया। फायरबेस मॉड्यूल के अंदर, पिछले fbURL की तरह कोणीयफायर सेवा होनी चाहिए।
jpmorin

1
2. यहां एक नियंत्रक को परिभाषित करने का उचित तरीका है: angular.module('project').controller('EditCtrl', ['$scope', '$location', '$routeParams', 'angularFire', 'fbURL', function($scope, $location, $routeParams, angularFire, fbURL) { ... } ]);इस तरह, आप पहले उन सेवाओं का नाम निर्धारित करते हैं जिन्हें आप इंजेक्ट करना चाहते हैं, और फिर आप उन सेवाओं को एक अलग नाम देते हैं यदि आप चाहें। वास्तव में, यह अनिवार्य है यदि आप अपने कोणीय कोड को बाद में कम करना चाहते हैं (चूंकि कम से कम चर का नाम बदल जाएगा, तो कोणीय को अभी भी सेवाओं के नाम खोजने में सक्षम होने की आवश्यकता है)।
jpmorin

1
@jpmorin बस एक उत्तर के रूप में अपनी टिप्पणी जोड़ें, वे सब सही हैं।
टोक्सीक

जवाबों:


152
  • नियंत्रक पैरामीटर क्या हो सकते हैं?

    नियंत्रक पैरामीटर निर्भरताएं हैं , जिन्हें एंगुलरजेएस इंजेक्टर सेवा द्वारा इंजेक्ट किया जाता है। वे कुछ भी हो सकते हैं। लेकिन वे आमतौर पर ऐसी सेवाएं हैं जिनका उपयोग नियंत्रक के अंदर किया जाएगा।

  • नियंत्रक कार्यों को उनके मापदंडों के साथ कहाँ कहा जाता है?

    नियंत्रकों, साथ ही निर्देश, फिल्टर, सेवाओं और बहुत सी अन्य चीजें एंगुलरजेएस में कार्य हैं । लेकिन इन कार्यों को कब और कैसे कहा जाता है , इसकी रूपरेखा बहुत सारी है ।

    जिसे आप संबंधित सामान कहते हैं उसका एक नाम है: निर्भरता , जैसा कि ऊपर उल्लेख किया गया है। जिसे आप जादू कहते हैं वह कार्रवाई में एंगुलरजेएस निर्भरता इंजेक्शन तंत्र है।

    जब इन कार्यों (नियंत्रकों और अन्य) को इंजेक्टर द्वारा बुलाया जाता है, तो यह पैरामीटर नाम (उदाहरण के लिए: $scopeया $httpया angularFire) पढ़ता है और उस नाम के साथ एक पंजीकृत सेवा की खोज करता है, जिसे तब फ़ंक्शन कहा जाता है जब पैरामीटर के रूप में प्रदान किया जाता है।

    यह आसान है। आपके पास इंजेक्टर के लिए अपनी "निर्भरता" (इंजेक्टर द्वारा प्रबंधित पैरामीटर) के बारे में निर्देश देने के कई तरीके हैं।

    जब आप बस अपने कार्य को घोषित करते हैं function myCtrl($scope) {}, तो इंजेक्टर $scopeपैरामीटर नाम से सेवा को खोजने में सक्षम होगा । लेकिन यदि आप जावास्क्रिप्ट कोड को छोटा करते हैं, तो इंजेक्टर सेवा को खोजने में सक्षम नहीं होगा, क्योंकि पैरामीटर नाम को एक छोटे स्ट्रिंग में संशोधित किया जाएगा, जैसे "ए" या "एक्स"। इस समस्या से बचने के लिए, सरणी संकेतन का उपयोग करते हुए सेवा नाम निर्दिष्ट करना संभव है । इस स्थिति में, आप अपने कार्य को इस तरह घोषित करेंगे:myCtrl = ['$scope', function($scope) {}]

    आपको AngularJS दुनिया में बहुत सारे सरणी संकेतन उपयोग दिखाई देंगे । अब आप इसे समझना शुरू करते हैं। तुम भी इंजेक्षन सकता है $scopeऔर angularFireऔर उनके साथ का उपयोग अन्य नामों अपने समारोह में (नाम बदल रहा है की सिफारिश नहीं - इस उदाहरण यहाँ प्रयोजनों के सीखने के लिए आता है): ['$scope', 'angularFire', function(skop, af) {}]- इस तरह से, समारोह के अंदर आप "SKOP" और angularFire के रूप में के रूप में $ गुंजाइश उपयोग कर सकते हैं "ए एफ"। आदेश सरणी में सेवाओं के मापदंडों के आदेश से मेल खाता है।

एक और उदाहरण:

var myController = ['$scope', '$resource', '$timeout',
    function($scope, $resource, $timeout) {
        // this controller uses $scope, $resource and $timeout
        // the parameters are the dependencies to be injected
        // by AngularJS dependency injection mechanism
    }
];
  • कोणीयफायर को कहां परिभाषित किया गया है?

    में firebase मॉड्यूल

    जैसा कि आप पहले से ही जानते हैं, इंजेक्टर किसी भी चीज को तब तक इंजेक्ट करेगा, जब तक कि उसके रिकॉर्ड में "चीज" नाम पंजीकृत और उपलब्ध न हो। यदि उस नाम के साथ "सेवा" है , तो वह इसे प्रदान करने में सक्षम है ।

    फिर, इस name => stuffसूची को कैसे बनाया जाता है जो इंजेक्टर उपयोग करता है?

    मॉड्यूल जवाब है। एक मॉड्यूल की सूची से थोड़ा अधिक है name => stuff। यह एक मॉड्यूल में है जहाँ आप सेवाओं, कारखानों, फ़िल्टर, निर्देशों और अन्य को पंजीकृत करते हैं।

    आधिकारिक दस्तावेज पर मॉड्यूल के तरीकों को ध्यान से देखें ... उनमें से लगभग सभी को पैरामीटर के रूप में प्राप्त होता है: नाम और कुछ " सामान " (जहां "सामान" लगभग हमेशा एक फ़ंक्शन होता है , या तो एक नियंत्रक, या एक कारखाने, या एक निर्देश को परिभाषित करता है) ) है। यह सब "सामान" है जो उनके निर्दिष्ट नाम के माध्यम से इंजेक्शन योग्य हो जाएगा ।

    AngularJS सेवाएं "$ टाइमआउट", "$ http" और अन्य डिफ़ॉल्ट रूप से उपलब्ध हैं क्योंकि एनजी मॉड्यूल फ्रेमवर्क द्वारा पहले से ही लोड है।

    अतिरिक्त सेवाओं के लिए, आपको मॉड्यूल को लोड / आवश्यक करना होगा । यही कारण है कि क्या आप के साथ क्या ngRouter , firebase , आदि ... लोड हो रहा है द्वारा मॉड्यूल , इसके पंजीकृत सामान हैं इंजेक्शन के लिए उपलब्ध में अपने मॉड्यूल / ऐप्स।

आइए चरण-दर-चरण उदाहरण देखें:

// An empty module:
var module = angular.module('myModule', []);

// Now, adding an "injectable" constant: 
module.constant('niceStuff', { blip: 'blop', blup: 307 });

// We could add a service:
module.service('entityManager', ['$http', function($http){  }]);

// and so on... if I wanted to use "$resource" instead of "$http"
// in the entityManager service above...
// ...I would need to require the ngResource when creating the module above,
// like this: var module = angular.module('myModule', ['ngResource']);
// because "$resource" is not available by default

// NOW, anywhere else, since the code above already ran
// I can use those NAMES as dependencies like this:

// We are creating another module now:
var koolModule = angular.module('km', ['myModule']);
// Note that I am requiring the previous module through its registered name

// Now, anything I've declared in that module
// - just like "ng" (by default) and "firebase" (required) does -
// is available for "injection"!!!

koolModule.controller('koolController',
    ['niceStuff', 'entityManager', function(niceStuff, entityManager) {
        console.log(niceStuff.blip);      // 'blop'
        console.log(niceStuff.blup + 10); // 317
    }]
);

यह है कि कैसे angularFire की तरह फायरबेस सामान, उपलब्ध हो जाता है! हमने क्या किया है? सबसे पहले, हमने "myModule" बनाया, और NAMED सामान को इसमें पंजीकृत किया। बाद में, हमें अपने "कूलमॉड्यूल" के लिए "myModule" की आवश्यकता थी - और वे NAMES पहले से ही इंजेक्टर name => stuffसूची में उपलब्ध थे ।

  • कैसे जुड़े पैरामीटर में fbURL है

    जैसा कि हमने अभी देखा है, अधिकांश मॉड्यूल विधियां केवल चीजों को पंजीकृत कर रही हैं - चीजों को नाम दे रही हैं ताकि उन्हें बाद में इन नामों के माध्यम से इंजेक्शन और / या उपयोग किया जा सके ।

    जब module.value('fbURL', 'https://angularjs-projects.firebaseio.com/')कहा जाता है, तो fbURL (और निर्दिष्ट मान) को name => stuffसूची में पंजीकृत किया जाता है ... इस मामले में, नाम "fbURL" है, और मूल्य / सामग्री URL स्ट्रिंग है - लेकिन यह कुछ भी हो सकता है!

  • क्या ऐसी कोई जगह है जहाँ मैं सभी सेवाएँ देख सकता हूँ, जैसे $ स्थान और $ समयबाह्य, जो Angular.js प्रदान करता है?

    हां, एपीआई संदर्भ: http://docs.angularjs.org/api/

    मॉड्यूल द्वारा बाईं ओर के नेविगेशन को कैसे व्यवस्थित किया जाता है, इस पर ध्यान दें ! सबसे पहले, एनजी मॉड्यूल, टन के साथ निर्देश, सेवाओं, फिल्टर, आदि। फिर, नीचे, अन्य मॉड्यूल (ngRoute, ngResource, ngMock, और इतने पर), प्रत्येक अपनी सेवाओं, fitlers या निर्देशों से युक्त ...

इन विचारों को साझा करने के अवसर के लिए धन्यवाद। मुझे उन्हें लिखना अच्छा लगा।


4
धन्यवाद! क्या और क्यों की अच्छी व्याख्या।
केविन शी

4
एक नामांकित पैरामीटर की उपस्थिति के आधार पर विशुद्ध रूप से व्यवहार व्यवहार अनपेक्षित से परे है और बिल्कुल घृणास्पद है, लेकिन महान जवाब के लिए धन्यवाद।
जरमोद 12/15

1
@jarmod मेरे विचार बिल्कुल - यह "phonecat" AngularJS ट्यूटोरियल के माध्यम से जाने के लिए चकित कर रहा है, पहले इस पोस्ट को देखे बिना!
भिक्षु

1
"यह आसान है।" NOPE।
जे। डिमो

2
बहुत बढ़िया व्याख्या। कुछ ट्यूटोरियल में बहुत सी चीजें दी गई हैं। "बस इसे इस तरह टाइप करें और यह काम करता है।" मुझे यह जानने की जरूरत है कि कैसे और क्यों और इसने इसका बहुत उत्तर दिया। आपका समय देने के लिए आपका बहुत बहुत धन्यवाद!
जॉन कार्रेल

1

पहले इस ढांचे को चुनने वाले महान काम। यह सर्वोत्तम हैं। उन चर जिन्हें आप $ साइन के साथ देखते हैं वे इंजेक्ट किए जाते हैं और मानक ढांचे का हिस्सा हैं। ये सेवाएं आपके जीवन को इतना आसान बना देंगी। नियंत्रकों के बारे में सोचने का सबसे अच्छा तरीका वे स्क्रिप्ट शीट हैं। वे कोड को अलग करने में मदद करते हैं। तरीकों के रूप में उनके बारे में मत सोचो। वे चर जिन्हें आप $ टाइमआउट और $ स्कोप के रूप में देखते हैं, वे सेवाएँ हैं जो आपके काम आने वाली चीज़ों के काम आएंगी। ढांचे के लिए सभी दस्तावेज http://docs.angularjs.org/api/ पर हैं, लेकिन मैं इस ट्यूटोरियल http://docs.angularjs.org/tutorial/ से शुरू करूंगा ।

एंगुलरफायर फ्रेमवर्क का हिस्सा नहीं है। यह एक और सेवा है जो एक शक्तिशाली वास्तविक समय वितरित नेटवर्क बनाने के लिए रूपरेखा का लाभ उठाती है। जब आप angularfirejs को लोड करते हैं तो यह उस सेवा के साथ आता है जिसे तब आपके द्वारा देखे गए पैरामीटर के रूप में इंजेक्ट किया जाता है।

आपके दूसरे प्रश्न का उत्तर देने के लिए, आपके द्वारा पास किए गए पैरामीटर इतने लंबे हो सकते हैं जब तक आप एक संबंधित सेवा बनाते हैं। कृपया नियंत्रकों के लिए अपना पैरामीटर बनाने के लिए इसे देखें: http://docs.angularjs.org/guide/dev_guide.services.creating_services

fbURL केवल एक चर है जिसे आप बना सकते हैं और आपके द्वारा अपने प्रश्न में रखा गया कोड बस इसे बनाने का निर्देश है।

Angularjs उस प्रकार का ढांचा नहीं है जिसे आप देखकर सीख सकते हैं कि यह क्या प्रदान करता है। बस, क्योंकि यह यह सब प्रदान करता है। सब कुछ आप संभवतः एक महान ऐप बनाने के लिए ला सकते हैं। इसके बजाय आपको Google से पूछना चाहिए कि कोणीय के साथ अपनी समस्या को कैसे हल किया जाए।

यूट्यूब पर वीडियो भी देखें। आपको कुछ बेहतरीन मिलेंगे।


1

टोक्साक टिप्पणी के अनुसार, यहाँ उत्तर के रूप में टिप्पणियाँ हैं

  1. नियंत्रक पैरामीटर क्या हो सकते हैं?

    यह ज्यादातर सेवाओं, कारखानों, मूल्यों, स्थिरांक आदि हो सकता है ... जिसे आपने रूट परिभाषा पर हल करने से पहले या कहीं पर परिभाषित किया है।

  2. नियंत्रक कार्यों को उनके मापदंडों के साथ कहाँ कहा जाता है?

    नियंत्रक को परिभाषित करने का उचित तरीका यहां दिया गया है:

    angular.module('project').controller('EditCtrl', [
        '$scope', 
        '$location', 
        '$routeParams', 
        'angularFire', 
        'fbURL', 
        function($scope, $location, $routeParams, angularFire, fbURL) { 
            ... 
        } 
    ]); 
    

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

  3. कोणीयफायर को कहां परिभाषित किया गया है?

    जब आपने अपने प्रोजेक्ट मॉड्यूल को परिभाषित किया, तो आपने फायरबेस मॉड्यूल निर्भरता को भी शामिल किया। फायरबेस मॉड्यूल के अंदर, पिछले fbURL की तरह कोणीयफायर सेवा होनी चाहिए।

  4. FbURL को पैरामीटर से कैसे जोड़ा जाता है

    जैसा कि आप समझते हैं, नियंत्रक के मापदंडों को कोणीय द्वारा नियंत्रित किया जा रहा है। कोणीय सभी पंजीकृत सेवाओं में दिखेगा और पैरामीटर के निर्दिष्ट नाम के साथ एक मैच खोजने की कोशिश करेगा और तदनुसार सेवा को इंजेक्ट करेगा!

  5. क्या ऐसी कोई जगह है जहाँ मैं सभी सेवाएँ देख सकता हूँ, जैसे $ स्थान और $ समयबाह्य, जो Angular.js प्रदान करता है?

    एंगुलर में शामिल सभी सेवाओं, फिल्टरों, निर्देशों की सूची के लिए, एपीआई पर एक नज़र डालें: http://docs.angularjs.org/api


1

नियंत्रक कार्यों को उनके मापदंडों के साथ कहाँ कहा जाता है?

नियंत्रक कार्यों को तुरंत एनकोट्रॉलर निर्देश के साथ त्वरित किया जाता है या यदि आपने मार्ग निर्माण के दौरान नियंत्रक का उपयोग किया है $routeProvider। AngularJS यह आपके लिए स्पष्ट रूप से करता है और उन मापदंडों को इंजेक्ट करता है जिन्हें आपने अपने नियंत्रक पर प्रयोग करके परिभाषित किया है DI

DI मापदंडों के नाम (या कुछ समय के आदेश) से मेल करके काम करता है। तो $scopeकरंट स्कोप $httpमिलेगा, http सर्विस मिलेगी

हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.