Lorsque nous écrivons des applications AngularJS, il est très difficile d'obtenir des données (données) et des services cachés dans l'application via les consoles JavaScript de Chrome, Firefox et IE. Voici quelques conseils simples qui peuvent nous aider à utiliser la console JavaScript pour surveiller et contrôler une application angulaire en cours, ce qui facilite le test, la modification ou même la rédaction d'applications angulaires en temps réel.
1: Get Scopes (lunette)
Nous pouvons utiliser une ligne de code JS pour obtenir n'importe quelle portée (ou même des lunettes isolées):
Copiez le code comme suit:> angular.element (cibleNode) .scope ()
-> ChildScope {$ id: "005", This: ChildScope, $$ Écouteurs: objet, $$ écouteur: objet, $ parent: Scope…}
Ou obtenez des lunettes isolées:
Copiez le code comme suit:> angular.element (cibleNode) .isolatescope ()
-> Scope {$ id: "009", $$ Childtail: ChildScope, $$ Childhead: ChildScope, $$ Prévsibling: ChildScope, $$ NEXTSIBLING: Scope…}
Le Node Target Node ici fait référence au nœud HTML (nœud HTML). Vous pouvez facilement utiliser Document.QuerySelector () pour l'obtenir.
2: Moniteur Scope Tree (Scope Tree)
Afin de mieux déboguer notre application, nous devons parfois vérifier la structure de portée (portée) sur la page. Pour le moment, nous devons utiliser AngularJS
Baratang et Ng-Inspecteur sont deux extensions de navigateur Chrome pour nous aider à visualiser la portée en temps réel. Et, ces deux extensions ont d'autres fonctionnalités très utiles.
(1) .Angularjs Baratang
(2) .NG-inspecteur
3: SERVICES CRAWLS (SERVICES)
Nous pouvons utiliser la fonction d'injecteur qui définit l'élément NGApp pour saisir n'importe quel service (service) ou obtenir indirectement le service (service) via n'importe quel élément avec la classe NG-Scope.
Copiez le code comme suit:> angular.element (document.QuerySelector ('html')). Injector (). Get ('myService')
-> Objet {UNDO: Fonction, Redo: Fonction, _pushaction: Fonction, newDocument: Fonction, init: Fonction…}
// ou légèrement plus générique
> angular.element (document.QuerySelect
Ensuite, nous pouvons utiliser le service connexe comme nous l'avons fait après injection dans le programme.
4: Obtenez le contrôleur de la directive
Il existe des directives (instructions) qui définissent certaines fonctions (généralement communes) en tant que contrôleur. Pour obtenir un exemple de contrôleur avec une directive spécifiée à partir de la console, nous n'avons qu'à utiliser la fonction Controller ().
Copiez le code comme suit:> angular.element ('my-pages'). Controller ()
-> Constructeur {}
Le dernier n'est pas couramment utilisé mais est une technique plus avancée.
5: Console Chrome (console)
Chrome possède de nombreuses commandes de raccourci très utiles pour le débogage des applications Web dans la console (console). Voici quelques-unes des commandes les plus utiles pour le développement angulaire:
0 $ - 4 $: Obtenez les 5 derniers éléments DOM dans la fenêtre Inspotor (moniteur). Cette méthode de raccourci peut nous aider à saisir les lunettes (portée) de l'élément sélectionné: Angular.Element (0 $) .scope ()
$ (sélecteur) et $$ (sélecteur): il peut facilement remplacer QueySelector () et QueySelectorall.
Merci @zgohr pour cette astuce!
Résumer
Avec ces conseils simples, nous pouvons obtenir des données dans n'importe quelle portée, surveiller la hiérarchie de la portée, injecter des services et des directives de contrôle.
Donc, la prochaine fois, lorsque vous voulez faire du réglage fin, vérifier le code ou contrôler une application AngularJS à partir de la console, j'espère que vous vous souvenez de ces conseils comme moi et les utilisez davantage.
Pour voir plus de syntaxe AngularJS, vous pouvez suivre: AngularJS Reference Manual English Version, et j'espère que tout le monde prendra en charge Wulin.com plus.