AngularJSアプリケーションを書いているとき、Chrome、Firefox、IEのJavaScriptコンソールを通じてアプリケーションに隠されたデータ(データ)とサービスを取得することは非常に困難です。 JavaScriptコンソールを使用して実行中の角度アプリケーションを監視および制御し、角度アプリケーションをリアルタイムで簡単にテスト、変更、または書き込みできるようにするのに役立つ簡単なヒントを以下に示します。
1:スコープを取得(スコープ)
JSコードの行を使用して、スコープ(または分離されたスコープ)を取得できます。
次のようにコードをコピーします:> angular.element(targetnode).scope()
- > ChildScope {$ id: "005"、this:childscope、$$ listeners:object、$$ ristenercount:object、$ parent:scope…}
または孤立したスコープを取得します:
コードを次のようにコピーします:> angular.element(ターゲットノード).isolatescope()
- > scope {$ id: "009"、$$ childtail:childscope、$$ childhead:childscope、$$ prevsibling:childscope、$$ nextsibling:scope…}
ここのターゲットノードは、HTMLノード(HTMLノード)を指します。 document.queryselector()を簡単に使用して取得できます。
2:スコープツリー(スコープツリー)を監視する
アプリケーションをより適切にデバッグするには、ページ上のスコープ(スコープ)構造体を確認する必要がある場合があります。現時点では、Angularjsを使用する必要があります
BaratangとNg-Inspectorは、リアルタイムで範囲を表示するのに役立つ2つのChromeブラウザー拡張機能です。また、これらの2つの拡張機能には、他の非常に便利な機能があります。
(1).Angularjs Baratang
(2).ng-inspector
3:クロールサービス(サービス)
NGAPP要素を定義するインジェクター関数を使用して、任意のサービス(サービス)を取得するか、NG-SCOPEクラスの要素を介してサービス(サービス)を間接的に取得できます。
コードを次のようにコピーします:> angular.element(document.queryselector( 'html'))。injector()。get( 'myservice')
- > object {undo:function、redo:function、_pushaction:function、newdocument:function、init:function…}
//または少し一般的な
> angular.element(document.queryselector('。ng-scope '))。injector()。get(' myservice ')
次に、プログラムに注入した後に行ったように、関連サービスを使用できます。
4:指令からコントローラーを取得します
特定の(通常は一般的な)関数をコントローラーとして定義する指令(命令)があります。コンソールから指定されたディレクティブを使用してコントローラーの例を取得するには、Controller()関数を使用する必要があります。
コードを次のようにコピーします:> angular.element( 'my-pages')。
- >コンストラクター{}
最後のものは一般的に使用されていませんが、より高度な手法です。
5:Chrome Console(コンソール)機能
Chromeには、コンソール(コンソール)でWebアプリケーションをデバッグするための非常に便利なショートカットコマンドがたくさんあります。角度発達のための最も役立つコマンドのいくつかは次のとおりです。
$ 0- $ 4:Inspotorウィンドウ(モニター)で最後の5つのDOM要素を取得します。このショートカット方法は、選択した要素のスコープ(スコープ)をつかむのに役立ちます:angular.element($ 0).scope()
$(selector)および$$(selector):QuerySelector()とQuerySelectorallを便利に置き換えることができます。
このヒントをありがとう@zgohr!
要約します
これらの簡単なヒントを使用すると、任意の範囲でデータを取得し、スコープ階層を監視し、サービスを注入し、制御指令を制御できます。
次回、微調整、コードを確認する、またはコンソールからAngularJSアプリケーションを制御する場合は、私のようなこれらのヒントを覚えていて、もっと使用できることを願っています。
より多くのAngularJS構文を表示するには、次のようにフォローできます。AngularJSリファレンスマニュアル英語バージョン、そして誰もがwulin.comをもっとサポートすることを願っています。