AngularJS
डिबगिंग

मार्कअप में बुनियादी डिबगिंग

स्कोप परीक्षण और मॉडल का उत्पादन

<div ng-app="demoApp" ng-controller="mainController as ctrl">
    {{$id}}
    <ul>
        <li ng-repeat="item in ctrl.items">
            {{$id}}<br/>
            {{item.text}}
        </li>
    </ul>
    {{$id}}
    <pre>
       {{ctrl.items | json : 2}}
    </pre>
</div>


angular.module('demoApp', [])
.controller('mainController', MainController);

function MainController() {
    var vm = this;
    vm.items = [{
        id: 0,
        text: 'first'
    },
    {
        id: 1,
        text: 'second'
    },
    {
        id: 2,
        text: 'third'
    }];
}

कभी-कभी यह देखने में मदद मिल सकती है कि स्कूपिंग मुद्दों को ठीक करने के लिए कोई नया स्कोप है या नहीं। $scope.$id का उपयोग आपके मार्कअप में हर जगह एक अभिव्यक्ति में किया जा सकता है, यह देखने के लिए कि क्या कोई नया स्कोप है।

उदाहरण में आप देख सकते हैं कि उल-टैग के बाहर एक ही गुंजाइश ($ id = 2) है और ng-repeat अंदर प्रत्येक पुनरावृत्ति के लिए नए चाइल्ड स्कोप हैं।

पूर्व-टैग में मॉडल का आउटपुट आपके मॉडल के वर्तमान डेटा को देखने के लिए उपयोगी है। json फ़िल्टर एक अच्छा दिखने वाला स्वरूपित आउटपुट बनाता है। प्री-टैग का उपयोग किया जाता है क्योंकि उस टैग के अंदर कोई भी नया-वर्ण character \n सही रूप से प्रदर्शित होगा।

डेमो

एनजी-निरीक्षण क्रोम एक्सटेंशन का उपयोग करना

एनजी-निरीक्षण एंगुलरजेएस अनुप्रयोगों को डीबग करने के लिए एक हल्के वजन वाला क्रोम एक्सटेंशन है।

जब नोड को तत्वों के पैनल से चुना जाता है, तो गुंजाइश से संबंधित जानकारी एनजी-निरीक्षण पैनल में प्रदर्शित होती है।

scope/isolateScope की त्वरित पहुँच के लिए कुछ वैश्विक चर का scope/isolateScope ।

$s      -- scope of the selected node
$is     -- isolateScope of the selected node
$el     -- jQuery element reference of the selected node (requiers jQuery)
$events -- events present on the selected node (requires jQuery)

सेवा / कारखानों के लिए आसान पहुँच प्रदान करता है।

नाम से किसी सेवा / कारखाने का उदाहरण प्राप्त करने के लिए $get() का उपयोग करें।

आवेदन के प्रदर्शन को नो.ऑफ स्कोप, आइसोलेट्सकोप, वॉचर्स और श्रोताओं को एप्लीकेशन पर गिनकर मॉनिटर किया जा सकता है।

स्कोप, आइसोलेट्स, चौकीदार और श्रोताओं की गिनती प्राप्त करने के लिए $count() का उपयोग करें।

नोट: यह एक्सटेंशन केवल तभी काम करेगा जब debugInfo सक्षम हो।

यहाँ एनजी निरीक्षण डाउनलोड करें

तत्व का दायरा प्राप्त करना

एंगुलर ऐप में सब कुछ स्कोप के आसपास चला जाता है, अगर हम एलीमेंट स्कोप पा सकते हैं तो एंगुलर ऐप को डीबग करना आसान है। तत्व के दायरे का उपयोग कैसे करें:

angular.element(myDomElement).scope();
e.g.
angular.element(document.getElementById('yourElementId')).scope()  //accessing by ID

नियंत्रक का दायरा प्राप्त करना: -

 angular.element('[ng-controller=ctrl]').scope()

कंसोल से एक DOM एलिमेंट को एक्सेस करने का एक और आसान तरीका (जैसा कि jm बताया गया है) 'एलिमेंट्स' टैब में उस पर क्लिक करना है, और यह अपने आप $ 0 के रूप में स्टोर हो जाता है।

angular.element($0).scope();