Cuando estamos escribiendo aplicaciones AngularJS, es muy difícil obtener datos (datos) y servicios ocultos en la aplicación a través de las consolas JavaScript de Chrome, Firefox e IE. Aquí hay algunos consejos simples que pueden ayudarnos a usar la consola JavaScript para monitorear y controlar una aplicación angular en ejecución, lo que facilita la prueba, modifica o incluso escribe aplicaciones angulares en tiempo real.
1: Obtenga alcances (alcance)
Podemos usar una línea de código JS para obtener cualquier alcance (o incluso alcances aislados):
Copie el código de la siguiente manera:> Angular.Element (TargetNode) .Scope ()
-> Childscope {$ id: "005", esto: childscope, $$ oyentes: objeto, $$ Listenercount: Object, $ Parent: Alcope ...}
O obtener alcances aislados:
Copie el código de la siguiente manera:> Angular.Element (TargetNode) .IsolatesCope ()
-> Scope {$ id: "009", $$ ChildTail: Childscope, $$ Childhead: Childscope, $$ Prevsible: Childscope, $$ NEXTSIBLE: ALCANCE ...}
El TargetNode aquí se refiere al nodo HTML (nodo HTML). Puede usar fácilmente document.QuerySelector () para obtenerlo.
2: Monitorear el ámbito del alcance (Árbol de alcance)
Para depurar mejor nuestra aplicación, a veces necesitamos verificar el estructural de alcance (alcance) en la página. En este momento, necesitamos usar angularjs
Baratang y Ng-Inspector son dos extensiones de navegador Chrome para ayudarnos a ver el alcance en tiempo real. Y, estas dos extensiones tienen algunas otras características muy útiles.
(1) .Angularjs Baratang
(2) .ng-inspector
3: Servicios de rastreo (servicios)
Podemos usar la función del inyector que define el elemento NGAPP para obtener cualquier servicio (servicio) o obtener indirectamente el servicio (servicio) a través de cualquier elemento con la clase NG-SCOPE.
Copie el código de la siguiente manera:> Angular.Element (document.QuerySelector ('html')). Inyector (). Get ('myService')
-> objeto {deshacer: función, rehacer: function, _pushaction: function, newDocument: function, init: function…}
// o un poco más genérico
> angular.element (document.queryselector ('. ng-scope')). inyector (). get ('myService')
A continuación, podemos usar el servicio relacionado tal como lo hicimos después de inyectarse en el programa.
4: Obtenga el controlador de la directiva
Hay directivas (instrucciones) que definen ciertas funciones (generalmente comunes) como controlador. Para obtener un ejemplo de controlador con una directiva especificada de la consola, solo necesitamos usar la función Controller ().
Copie el código de la siguiente manera:> Angular.Element ('My-Pages'). Controller ()
-> constructor {}
El último no se usa comúnmente, pero es una técnica más avanzada.
5: Características de la consola de Chrome (consola)
Chrome tiene muchos comandos de acceso directo muy útiles para depurar aplicaciones web en la consola (consola). Estos son algunos de los comandos más útiles para el desarrollo angular:
$ 0 - $ 4: Obtenga los últimos 5 elementos DOM en la ventana del inspotor (monitor). Este método de acceso directo puede ayudarnos a obtener los ámbitos (alcance) del elemento seleccionado: angular.element ($ 0) .Scope ()
$ (selector) y $$ (selector): puede reemplazar convenientemente QuerySelector () y QuerySelectorall.
¡Gracias @zgohr por este consejo!
Resumir
Con estos simples consejos, podemos obtener datos en cualquier alcance, monitorear la jerarquía del alcance, los servicios de inyección y las directivas de control.
Entonces, la próxima vez, cuando desee hacer un ajuste fino, verificar el código o controlar una aplicación AngularJS desde la consola, espero que pueda recordar estos consejos como yo y usarlos más.
Para ver más sintaxis AngularJS, puede seguir: Manual de referencia AngularJS Versión en inglés, y espero que todos apoyen más a Wulin.com.