मैं कंसोल से AngularJS सेवा का परीक्षण कैसे कर सकता हूं?

Question

मेरे पास एक सेवा है:

angular.module('app').factory('ExampleService', function(){
  this.f1 = function(world){
    return 'Hello '+world;
  }
  return this;
})

मैं इसे जावास्क्रिप्ट कंसोल से परीक्षण करना चाहता हूं और f1()सेवा के कार्य को कॉल करना चाहता हूं ।

मैं उसे कैसे कर सकता हूँ?

Answer 1

TLDR: एक पंक्ति में वह कमांड जिसे आप देख रहे हैं:

angular.element(document.body).injector().get('serviceName')

---

विस्तृत विश्लेषण

AngularJS आपके घटकों, निर्देशों और अन्य सेवाओं में सेवाओं / कारखानों को इंजेक्ट करने के लिए निर्भरता इंजेक्शन (DI) का उपयोग करता है। तो सेवा प्राप्त करने के लिए आपको क्या करने की आवश्यकता है, सबसे पहले एंगुलरजेएस के इंजेक्टर को प्राप्त करना है (इंजेक्टर सभी निर्भरताओं को वायर करने और उन्हें घटकों को प्रदान करने के लिए जिम्मेदार है)।

अपने ऐप के इंजेक्टर को प्राप्त करने के लिए आपको इसे एक ऐसे तत्व से हथियाना होगा जो कोणीय संभाल रहा है। उदाहरण के लिए यदि आपका ऐप आपके द्वारा कॉल किए गए बॉडी एलिमेंट पर पंजीकृत हैinjector = angular.element(document.body).injector()

फिर से प्राप्त करके injectorआप फिर से जो भी सेवा चाहें प्राप्त कर सकते हैंinjector.get('ServiceName')

इस उत्तर में उस पर अधिक जानकारी: कोणीय से इंजेक्टर को पुनः प्राप्त नहीं किया जा सकता है
और यहाँ भी अधिक: कॉल कोड से AngularJS

---

$scopeएक विशेष तत्व प्राप्त करने के लिए एक और उपयोगी चाल । अपने डेवलपर टूल के DOM निरीक्षण टूल के साथ तत्व का चयन करें और फिर निम्न पंक्ति ( $0हमेशा चयनित तत्व है) चलाएं :
angular.element($0).scope()

Comments

मुझे यह काम करने के लिए भी करना पड़ा। BTW, angular.element('*[ng-app]').injector()सभी मामलों के लिए काम करना चाहिए।

— फ्रांसेक रोजास

यदि आपको त्रुटि 'चयनकर्ताओं को कार्यान्वित नहीं किया जाता है' तो एंगुलर.लीमेंट ('html') लागू होता है तो आप Chrome $ 0 सुविधा का उपयोग कर सकते हैं। Html एलिमेंट का चयन करें, कंसोल पर जाएँ और कोणीय रन ($ 0) .injector ()

— Marek

documentयह भी काम करता है:angular.element(document).injector().get('serviceName')

— तमलिन

FYI करें मुझे डॉक्युमेंट का इस्तेमाल करना पड़ा। क्रोम पर कोई भी

— केविन

FYI करें मैं $ स्थान सेवा का उपयोग करना चाहता था, लेकिन आखिरकार मुझे इसे स्कोप में लपेटने की आवश्यकता थी। मुझे पता है कि यह अच्छी तरह से प्रलेखित है, लेकिन इसने मेरा दिमाग खिसका दिया था। एक पंक्ति में angular.element (दस्तावेज़) .scope ()। $ Apply (angular.element (दस्तावेज) .injector) ()। Get ('$ location')। Path ('/ my / angular / url')

— acid_crucifix।

Answer 2

सबसे पहले, आपकी सेवा का एक संशोधित संस्करण।

ए )

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

app.factory('ExampleService',function(){
    return {
        f1 : function(world){
            return 'Hello' + world;
        }
    };
});

यह एक वस्तु देता है, यहाँ कुछ भी नया नहीं है।

अब कंसोल से इसे प्राप्त करने का तरीका है

बी)

var $inj = angular.injector(['app']);
var serv = $inj.get('ExampleService');
serv.f1("World");

सी )

जो चीजें आप पहले कर रहे थे, उनमें से एक यह मान लेना था कि app.factory आपको फ़ंक्शन या इसका एक नया संस्करण देता है। जो मामला न हो। एक निर्माणकर्ता प्राप्त करने के लिए आपको या तो करना होगा

app.factory('ExampleService',function(){
        return function(){
            this.f1 = function(world){
                return 'Hello' + world;
            }
        };
    });

यह एक ExampleService कंस्ट्रक्टर लौटाता है, जिसे आपको आगे एक 'नया' करना होगा।

या वैकल्पिक रूप से,

app.service('ExampleService',function(){
            this.f1 = function(world){
                return 'Hello' + world;
            };
    });

यह इंजेक्शन पर नई उदाहरण सेवा () देता है।

Comments

जब मैं करता हूं var $inj = angular.injector(['app']);तब कंसोल Error: Unknown provider: $filterProvider from appएक ऐप में और Error: Unknown provider: $controllerProvider from appदूसरे ऐप में फेंकता है ...

— JustGoscha

@JustGoscha आपका ऐप कैसे कॉन्फ़िगर किया गया है? यानी कैसे एक लाइन (जो दिखता है) var app = angular.module ('ऐप', []); आपके ऐप में जैसा दिखता है।

— गणराज २०'१३ को १६:१६

मैं इस सवाल को पूरी तरह से नहीं समझ रहा हूँ .. ऐसा लगता है जैसे आप कहते हैं angular.module('app',[]);और फिर विभिन्न फाइलों में सेवाएँ, नियंत्रक आदि हैं और वे सभी angular.module('app').factory('FeatureRegistry',function(){//code here});उदाहरण के लिए परिभाषित हैं

— JustGoscha

@JustGoscha यहाँ मैंने परीक्षण करने के लिए क्या किया है। मैं क्रोम में docs.angularjs.org/api गया। सांत्वना खोली। मेरे उत्तर के अनुभाग में कोड टाइप किया और फिर खंड b में कोड टाइप किया .. आपको हैलो वर्ल्ड देखना चाहिए .. क्या आप यह प्रयास कर सकते हैं?

— ज्ञानराज

Answer 3

@ JustGoscha का उत्तर हाजिर है, लेकिन जब मैं पहुंचना चाहता हूं, तो यह लिखना बहुत कुछ है, इसलिए मैंने इसे अपने ऐप के नीचे जोड़ दिया। js. फिर मुझे x = getSrv('$http')http सेवा प्राप्त करनी है।

// @if DEBUG
function getSrv(name, element) {
    element = element || '*[ng-app]';
    return angular.element(element).injector().get(name);
}
// @endif

यह इसे वैश्विक दायरे में जोड़ता है लेकिन केवल डिबग मोड में। मैंने इसे अंदर रखा @if DEBUGताकि मैं इसे उत्पादन कोड में समाप्त न करूं। मैं इस विधि का उपयोग प्राउडेशन बिल्ड से डिबग कोड को हटाने के लिए करता हूं।

Answer 4

Angularjs निर्भरता इंजेक्शन फ्रेमवर्क आपके नियंत्रकों के लिए ऐप मॉड्यूल की निर्भरता को इंजेक्ट करने के लिए जिम्मेदार है। यह उसके इंजेक्टर के माध्यम से संभव है।

आपको पहले एनजी-ऐप को पहचानना होगा और संबंधित इंजेक्टर प्राप्त करना होगा। नीचे दी गई क्वेरी DOM में आपके एनजी ऐप को खोजने और इंजेक्टर को पुनः प्राप्त करने के लिए काम करती है।

angular.element('*[ng-app]').injector()

क्रोम में, हालांकि, आप नीचे दिखाए गए अनुसार एनजी ऐप को लक्षित करने के लिए इंगित कर सकते हैं। और $0हैक और मुद्दे का उपयोग करेंangular.element($0).injector()

एक बार इंजेक्टर लगने के बाद, नीचे की तरह कोई भी निर्भरता वाली इंजेक्शन सेवा प्राप्त करें

injector = angular.element($0).injector();
injector.get('$mdToast');