web-dev-qa-db-ja.com

コンソールからAngularJSサービスをテストする方法を教えてください。

私は次のようなサービスがあります。

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

私はJavaScriptコンソールからそれをテストして、サービスの関数f1()を呼び出したいです。

どうやってやるの？

angularjsangularjs-service
383
JustGoscha

TLDR：1行に探しているコマンド。

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

ディープダイブ

AngularJSは依存性注入（DI）を使用して、サービス、ファクトリをコンポーネント、ディレクティブ、その他のサービスに注入します。したがって、サービスを受けるために必要なことは、最初にAngularJSのインジェクタを取得することです（インジェクタはすべての依存関係を関連付けてコンポーネントに提供する責任があります）。

アプリのインジェクタを取得するには、angleが処理している要素から取得する必要があります。たとえば、アプリがbody要素に登録されている場合は、injector = angular.element(document.body).injector()を呼び出します。

取得したinjectorからinjector.get('ServiceName')を使えば好きなサービスを手に入れることができます。

この答えでそれについての詳細情報： 角度からインジェクタを取得することはできません
さらにここに： レガシーコードからAngularJSを呼び出す

特定の要素の$scopeを取得するためのもう1つの便利なトリックです。開発者ツールのDOM検査ツールで要素を選択してから、次の行を実行します（$0が常に選択された要素です）。
angular.element($0).scope()

684
JustGoscha

まず第一に、あなたのサービスの修正版です。

a）

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

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

これはオブジェクトを返します。ここで新しいことは何もありません。

これをコンソールから取得する方法は次のとおりです。

b）

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

c）

以前に行っていたことの1つは、app.factoryがユーザーに関数自体またはそれの新しいバージョンを返すと想定することでした。そうではありません。コンストラクタを取得するには、どちらかをしなければなりません

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

これはExampleServiceコンストラクタを返します。このコンストラクタは次に 'new'を実行する必要があります。

あるいは、

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

これはインジェクション時に新しいExampleService（）を返します。

23
ganaraj

@ JustGoschaの答えはその場で出ていますが、アクセスしたいときには入力するのが大変なので、これを私のapp.jsの最後に追加しました。それから私がタイプしなければならないのはhttpサービスを得るためにx = getSrv('$http')だけです。

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

グローバルスコープに追加されますが、デバッグモードの場合のみです。本番コードで終わらないように、@if DEBUGの中に入れました。 このメソッドを使用して、生成ビルドからデバッグコードを削除します。

12
boatcoder

Angularjs Dependency Injectionフレームワークは、あなたのアプリモジュールの依存関係をあなたのコントローラに注入する責任があります。これはインジェクターを通して可能です。

あなたは最初にng-appを識別し、関連するインジェクタを入手する必要があります。以下のクエリはDOMであなたのng-appを見つけてインジェクタを取得するために働きます。

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

ただし、クロムでは、以下に示すようにターゲットng-appを指すことができます。そして$0ハックを使ってangular.element($0).injector()を発行する

インジェクタを入手したら、以下のように依存性注入サービスを受けます。

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

enter image description here

3
Faiz Mohamed Haneef