Bir AngularJS hizmetini konsoldan nasıl test edebilirim?


395

Şunun gibi bir hizmetim var:

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

Ben istiyorum JavaScript konsolundan test ve işlevi çağırmak f1()hizmet.

Bunu nasıl yapabilirim?

Yanıtlar:


713

TLDR: Bir satırda aradığınız komut:

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

Derin dalış

AngularJS, hizmetleri / fabrikaları bileşenlerinize, direktiflerinize ve diğer hizmetlerinize enjekte etmek için Bağımlılık Enjeksiyonu (DI) kullanır . Bu nedenle, bir servis almak için yapmanız gereken şey önce AngularJS enjektörünü almaktır (enjektör tüm bağımlılıkları kablolamaktan ve bileşenlere sağlamaktan sorumludur).

Uygulamanızın enjektörünü almak için , açısal işleyen bir öğeden tutmanız gerekir. Örneğin, uygulamanız aradığınız gövde öğesinde kayıtlıysainjector = angular.element(document.body).injector()

Alınandan injectordaha sonra istediğiniz hizmeti alabilirsinizinjector.get('ServiceName')

Bu yanıtta daha fazla bilgi: Enjektör açısaldan alınamıyor
Ve daha da fazlası: Eski koddan AngularJS'yi arayın


$scopeBelirli bir unsuru elde etmek için bir başka yararlı numara . Geliştirici araçlarınızın DOM inceleme aracıyla öğeyi seçin ve ardından aşağıdaki satırı çalıştırın ( $0her zaman seçilen öğedir):
angular.element($0).scope()


70
Bunu yapmak için de yapmam gerekiyordu. BTW, angular.element('*[ng-app]').injector()tüm durumlar için çalışmalıdır.
Francesc Rosas

4
Angular.element ('html') yürütülürken 'seçiciler uygulanmadı' hatası alırsanız Chrome $ 0 özelliğini kullanabilirsiniz. Html öğesini seçin, konsola gidin ve angular.element (0 $) çalıştırın .injector ()
Marek

9
documentayrıca çalışıyor:angular.element(document).injector().get('serviceName')
Tamlyn

1
FYI Belgeyi kullanmak zorunda kaldım. Krom üzerindeki herkes
Kevin

5
FYI $ konum hizmetini kullanmak istedim, ama sonunda bunu scope.apply içine sarmak gerekiyordu. Bunun iyi belgelendiğini biliyorum, ama aklımdan çıkmıştı. Bir satırda angular.element (document) .scope (). $ Apply (angular.element (document) .injector (). Get ('$ location'). Yol ('/ my / angular / url'))
acid_crucifix

25

Her şeyden önce, hizmetinizin değiştirilmiş bir sürümü.

a)

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

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

Bu bir nesneyi döndürür, burada yeni bir şey yoktur.

Şimdi bunu konsoldan almanın yolu

b)

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

c)

Daha önce yaptığınız şeylerden biri, app.factory'nin size işlevin kendisini veya yeni bir sürümünü döndürdüğünü varsaymaktı. Bu durum böyle değil. Bir kurucu edinmek için ya

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

Bu, daha sonra 'yeni' yapmak zorunda kalacağınız bir SampleService yapıcısını döndürür.

Veya alternatif olarak,

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

Bu, enjeksiyonda yeni bir SampleService () döndürür.


3
ne zaman var $inj = angular.injector(['app']);o zaman konsol Error: Unknown provider: $filterProvider from appbir uygulama ve Error: Unknown provider: $controllerProvider from appbaşka bir uygulama atar ...
JustGoscha

@JustGoscha Uygulamanız nasıl yapılandırılır? yani bir çizgi (görünüşe göre) nasıl olur app = angular.module ('app', []); uygulamanızdaki gibi görünür.
Mart'ta

Soruyu tam olarak anlamıyorum .. aynen söylediğiniz gibi görünüyor angular.module('app',[]);ve sonra farklı dosyalarda hizmetler, kontrolörler vb. angular.module('app').factory('FeatureRegistry',function(){//code here});
Var

@JustGoscha İşte test etmek için yaptım. Chrome'da docs.angularjs.org/api adresine gittim . Konsolu açtı. Cevabımın a bölümüne kodu yazdıktan sonra b bölümüne kodu yazdınız. Merhaba Dünya'yı görmelisiniz .. Bunu deneyebilir misiniz?
ganaraj

14

@ JustGoscha'nın cevabı açık, ancak erişim istediğimde yazacak çok şey var, bu yüzden bunu uygulamamın altına ekledim. Sonra yazmam gereken tek şey x = getSrv('$http')http servisini almak.

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

Genel kapsamı ancak hata ayıklama modunda ekler. @if DEBUGÜretim koduna girmemek için içine koydum . Ben gururlu yapıları hata ayıklama kodu kaldırmak için bu yöntemi kullanın.


4

Angularjs Bağımlılık Enjeksiyonu çerçevesi, uygulama modülünüzün bağımlılıklarını denetleyicilerinize enjekte etmekten sorumludur. Bu, enjektörü ile mümkündür.

Önce ng uygulamasını tanımlamanız ve ilişkili enjektörü almanız gerekir. Aşağıdaki sorgu ng-uygulamanızı DOM'de bulmak ve enjektörü almak için çalışır.

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

Bununla birlikte, kromda hedef ng uygulamasını aşağıda gösterildiği gibi gösterebilirsiniz. ve $0kesmek ve sorunu kullanınangular.element($0).injector()

Enjektör aldıktan sonra, herhangi bir bağımlılık enjekte servisini aşağıdaki gibi alın

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

resim açıklamasını buraya girin

Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.