Wenn wir AngularJS -Anwendungen schreiben, ist es sehr schwierig, Daten (Daten) und Dienste zu erhalten, die in der Anwendung über die JavaScript -Konsolen von Chrome, Firefox und dh versteckt sind. Hier sind einige einfache Tipps, die uns helfen können, die JavaScript -Konsole zu verwenden, um eine laufende Winkelanwendung zu überwachen und zu steuern, wodurch das Testen, Ändern oder Schreiben von Winkelanwendungen in Echtzeit erleichtert wird.
1: Holen Sie sich Scopes (Umfang)
Wir können eine Zeile des JS -Codes verwenden, um jeden Umfang (oder sogar isolierte Bereiche) zu erhalten:
Kopieren Sie den Code wie folgt:> angular.element (targetnode) .scope ()
-> ChildScope {$ id: "005", This: ChildScope, $$ Hörer: Objekt, $$ ListenerCount: Objekt, $ Elternteil: Scope…}
Oder isolierte Bereiche erhalten:
Kopieren Sie den Code wie folgt:> angular.element (targetnode) .isolateScope ()
-> Scope {$ id: "009", $$ ChildTail: ChildScope, $$ Childhead: ChildScope, $$ PrevSibling: ChildScope, $$ Nextsibling: Scope…}
Der TargetNode bezieht sich hier auf den HTML -Knoten (HTML -Knoten). Sie können document.querySelector () problemlos verwenden, um es zu erhalten.
2: Zielfernrohrbaum (Bereichsbaum) überwachen
Um unsere Anwendung besser zu debuggen, müssen wir manchmal den SCOPE -Struktor (Scope) auf der Seite überprüfen. Zu diesem Zeitpunkt müssen wir AngularJs verwenden
Baratang und NG-Inspektor sind zwei Chrom-Browser-Erweiterungen, die uns helfen, den Umfang in Echtzeit anzusehen. Und diese beiden Erweiterungen haben einige andere sehr nützliche Funktionen.
(1) .angularjs baratang
(2) .NG-Inspektor
3: Crawl Services (Dienste)
Wir können die Injektorfunktion verwenden, die das NGApp-Element definiert, um einen Dienst (Service) zu erfassen oder indirekt den Dienst (Service) über ein beliebiges Element mit der NG-SCOPE-Klasse zu erhalten.
Kopieren Sie den Code wie folgt:> Angular.element (document.querySelector ('html')). Injector (). Get ('MyService'))
-> Objekt {rückgängig: Funktion, Redo: Funktion, _pushaction: Funktion, Neudokument: Funktion, Init: Funktion…}
// oder etwas generischer
> Angular.Element (document.querySelector ('. ng-scope')). Injector (). Get ('myService')
Als nächstes können wir den zugehörigen Service genauso nutzen, wie wir es nach der Injektion des Programms getan haben.
4: Holen Sie sich Controller aus der Richtlinie
Es gibt Richtlinien (Anweisungen), die bestimmte (normalerweise gemeinsame) Funktionen als Controller definieren. Um ein Controller -Beispiel mit einer angegebenen Anweisung aus der Konsole zu erhalten, müssen wir nur die Funktion Controller () verwenden.
Kopieren Sie den Code wie folgt:> Angular.element ('My-Pages'). Controller ()
-> Konstruktor {}
Der letzte wird nicht häufig verwendet, ist aber eine fortschrittlichere Technik.
5: Chromkonsolenfunktionen (Konsolen)
Chrome verfügt über viele sehr nützliche Verknüpfungsbefehle zum Debuggen von Webanwendungen in Console (Konsole). Hier sind einige der hilfreichsten Befehle für die Winkelentwicklung:
$ 0 - $ 4: Holen Sie sich die letzten 5 DOM -Elemente im Inspotorfenster (Monitor). Diese Verknüpfungsmethode kann uns helfen, die Bereiche (Umfang) des ausgewählten Elements zu greifen: Angular.element ($ 0) .Scope ()
$ (Selector) und $$ (Selektor): Es kann bequemer QuerySelector () und QuerySelectorAll ersetzen.
Danke @zgohr für diesen Tipp!
Zusammenfassen
Mit diesen einfachen Tipps können wir Daten in jeder Umgebung, in jeder Richtlinie der Zielfernrohrhierarchie, der Injektionsdienste und der Steuerungsrichtlinie erhalten.
Wenn Sie beim nächsten Mal eine Feinabstimmung durchführen, Code überprüfen oder eine AngularJS -Anwendung von der Konsole steuern möchten, hoffe ich, dass Sie sich an diese Tipps wie ich erinnern und sie mehr verwenden können.
Um weitere AngularJS -Syntax anzuzeigen, können Sie folgen: AngularJS Reference Manual English Version, und ich hoffe, jeder wird wulin.com mehr unterstützen.