আমি কীভাবে কনসোল থেকে একটি AngularJS পরিষেবা পরীক্ষা করতে পারি?


395

আমার মত একটি পরিষেবা আছে:

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

আমি এটি জাভাস্ক্রিপ্ট কনসোল থেকে পরীক্ষা করতে এবং f1()পরিষেবার ফাংশনটিতে কল করতে চাই ।

আমি এটা কিভাবে করবো?

উত্তর:


713

টিএলডিআর: আপনি যে কমান্ডটি সন্ধান করছেন তা এক লাইনে :

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

গভীর ডুব

AngularJS আপনার উপাদানগুলি, নির্দেশাবলী এবং অন্যান্য পরিষেবায় পরিষেবা / কারখানাগুলি ইনজেক্ট করতে নির্ভরশীল ইনজেকশন (ডিআই) ব্যবহার করে । তাই কি আপনি একটি সেবা পেতে যা করতে হবে পেতে হয় প্রবেশক প্রথম AngularJS এর (প্রবেশক সব নির্ভরতা আপ তারের সংযোজন এবং তাদের উপাদানের প্রদানের জন্য দায়ী)।

আপনার অ্যাপ্লিকেশনটির ইনজেক্টর পেতে আপনার এটি কৌনিকটি পরিচালনা করছে এমন একটি উপাদান থেকে নেওয়া উচিত। উদাহরণস্বরূপ যদি আপনার অ্যাপ্লিকেশনটি আপনি কল করেন এমন শরীরের উপাদানটিতে নিবন্ধিত হয়injector = angular.element(document.body).injector()

পুনরুদ্ধার করা থেকে আপনি নিজের পছন্দমতো injectorপরিষেবা পেতে পারেনinjector.get('ServiceName')

এই উত্তরে সে সম্পর্কে আরও তথ্য: কৌনিক থেকে ইনজেক্টর পুনরুদ্ধার করতে পারে না
আরও আরও এখানে: লিগ্যাসি কোড থেকে অ্যাঙ্গুলারজেএসকে কল করুন


$scopeএকটি নির্দিষ্ট উপাদানটি পেতে আরেকটি দরকারী কৌশল । আপনার বিকাশকারী সরঞ্জামগুলির DOM পরিদর্শন সরঞ্জামের সাহায্যে উপাদানটি নির্বাচন করুন এবং তারপরে নিম্নলিখিত লাইনটি চালান ( $0সর্বদা নির্বাচিত উপাদান):
angular.element($0).scope()


70
এটি কাজ করতে আমাকে এটিও করতে হয়েছিল। বিটিডাব্লু, angular.element('*[ng-app]').injector()সমস্ত ক্ষেত্রে কাজ করা উচিত।
ফ্রান্সেস্ক রোসাস

4
যদি আপনি ত্রুটি পান 'নির্বাচকগুলি কার্যকর করা হয়নি' কৌনিক.ইলেট ('এইচটিএমএল') চালায় তবে আপনি Chrome $ 0 বৈশিষ্ট্যটি ব্যবহার করতে পারেন। HTML উপাদান নির্বাচন করুন, কনসোল এবং রান angular.element ($ 0) .injector () ফিরে যেতে
Marek

9
documentএছাড়াও কাজ করে:angular.element(document).injector().get('serviceName')
তমলিন

1
এফওয়াইআই আমাকে ক্রোম
কেভিন

5
এফওয়াইআই আমি service লোকেশন পরিষেবাটি ব্যবহার করতে চেয়েছিলাম, তবে শেষ পর্যন্ত আমার এটি স্কোপ.এপ্লাইতে মোড়ানো দরকার। আমি জানি এটি ভালভাবে নথিভুক্ত, তবে এটি আমার মন কেড়ে নিয়েছিল। এক লাইনে কৌণিক.এলিমেন্ট (নথি) .স্কোপ ()। $ প্রয়োগ করুন (কৌণিক.এলিমেন্ট (নথি) .আইনজেক্টর ()। Get ('$ অবস্থান')। পাথ ('/ আমার / কৌণিক / url'))
এসিড_ক্রিফিক্স

25

প্রথমত, আপনার পরিষেবার একটি পরিবর্তিত সংস্করণ।

ক)

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('ExampleService',function(){
        return function(){
            this.f1 = function(world){
                return 'Hello' + world;
            }
        };
    });

এটি একটি উদাহরণসেবা কনস্ট্রাক্টরকে রিটার্ন দেয় যা পরবর্তী আপনাকে 'নতুন' করতে হবে।

বা বিকল্পভাবে,

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

এটি নতুন ইনজেকশন সার্ভিস () ইনজেকশনে দেয়।


3
আমি যখন করি var $inj = angular.injector(['app']);তখন কনসোলটি একটি Error: Unknown provider: $filterProvider from appঅ্যাপে এবং Error: Unknown provider: $controllerProvider from appঅন্য একটি অ্যাপ্লিকেশনটিতে একটি ছুড়ে ফেলে ...
JustGoscha

@ JustGoscha আপনার অ্যাপটি কীভাবে কনফিগার করা হয়েছে? উদাহরণস্বরূপ, কীভাবে একটি রেখা (যা দেখতে দেখতে) var অ্যাপ্লিকেশন = কৌনিক.মডিউল ('অ্যাপ', []) করে; আপনার অ্যাপ্লিকেশন মত চেহারা।
গণরাজ

আমি প্রশ্নটি পুরোপুরি বুঝতে পারছি না ... এটি আপনি যেমন বলছেন ঠিক তেমন দেখাচ্ছে angular.module('app',[]);এবং তারপরে বিভিন্ন ফাইলগুলিতে পরিষেবা, নিয়ন্ত্রণকারী ইত্যাদি রয়েছে এবং সেগুলি angular.module('app').factory('FeatureRegistry',function(){//code here});উদাহরণস্বরূপ সংজ্ঞায়িত করা হয়েছে
JustGoscha

@ JustGoscha এই যা যা পরীক্ষার জন্য করেছি তা এখানে। আমি ক্রোসে ডকস.আঙ্গুলারজেএস.আর.পি.আই.তে গিয়েছিলাম । কনসোল খুলেছে। আমার উত্তরের একটি অংশে কোডটি টাইপ করুন এবং তারপরে খ বিভাগে কোডটি টাইপ করুন .. আপনার হ্যালো ওয়ার্ল্ডটি দেখা উচিত .. আপনি কি এটি চেষ্টা করতে পারেন?
গণরাজ

14

@ জাস্টগোসচের উত্তর স্পট রয়েছে, তবে আমি অ্যাক্সেস চাইলে এটি অনেকটা টাইপ করতে হয়, তাই আমি এটিকে আমার অ্যাপ.জেএস এর নীচে যুক্ত করেছি। তারপরে আমাকে যা টাইপ x = getSrv('$http')করতে হবে তা হ'ল এইচটিপি পরিষেবা পেতে।

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

এটি বৈশ্বিক সুযোগে এটি যুক্ত করে তবে কেবল ডিবাগ মোডে। আমি এটিকে @if DEBUGএমনভাবে রেখেছি যাতে প্রোডাকশন কোডে এটি শেষ না হয়। আমি প্রৌডাকশন বিল্ডগুলি থেকে ডিবাগ কোড সরানোর জন্য এই পদ্ধতিটি ব্যবহার করি।


4

অ্যাঙ্গুলারজ ডিপেন্ডেন্সি ইনজেকশন ফ্রেমওয়ার্ক আপনার অ্যাপ্লিকেশন মডিউলের নির্ভরতাগুলি আপনার নিয়ামকদের কাছে ইনজেকশনের জন্য দায়ী। এটি তার ইনজেক্টরের মাধ্যমে সম্ভব।

আপনাকে প্রথমে এনজি-অ্যাপটি সনাক্ত করতে হবে এবং যুক্ত ইনজেক্টরটি পেতে হবে। নীচের ক্যোয়ারী আপনার এনজি-অ্যাপটি ডিওমে খুঁজে পেতে এবং ইনজেক্টরটি পুনরুদ্ধারে কাজ করে।

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

ক্রোমে, তবে, আপনি নীচের মতো এনজি-অ্যাপকে লক্ষ্য করতে পারেন। এবং $0হ্যাক এবং ইস্যু ব্যবহার করুনangular.element($0).injector()

আপনার একবার ইনজেক্টর হয়ে গেলে নীচের মতো কোনও নির্ভরতা ইনজেকশন পরিষেবা পান

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

এখানে চিত্র বর্ণনা লিখুন

আমাদের সাইট ব্যবহার করে, আপনি স্বীকার করেছেন যে আপনি আমাদের কুকি নীতি এবং গোপনীয়তা নীতিটি পড়েছেন এবং বুঝতে পেরেছেন ।
Licensed under cc by-sa 3.0 with attribution required.