Quando estamos escrevendo aplicativos AngularJS, é muito desafiador obter dados (dados) e serviços ocultos no aplicativo através dos consoles JavaScript de Chrome, Firefox e IE. Aqui estão algumas dicas simples que podem nos ajudar a usar o console JavaScript para monitorar e controlar um aplicativo angular em execução, facilitando o teste, modificar ou até escrever aplicativos angulares em tempo real.
1: Obtenha escopos (escopo)
Podemos usar uma linha de código JS para obter qualquer escopo (ou até escopos isolados):
Copie o código da seguinte forma:> Angular.Element (TargetNode) .Scope ()
-> ChildScope {$ id: "005", isto: ChildsCope, $$ ouvintes: objeto, $$ ouvidos: objeto, $ pai: escopo…}
Ou obtém escopos isolados:
Copie o código da seguinte forma:> angular.Element (TargetNode) .isolatescope ()
-> Escopo {$ id: "009", $$ Childtail: ChildsCope, $$ Childhead: ChildsCope, $$ Preventibling: ChildsCope, $$ NextSibling: Scope…}
O TargetNode aqui se refere ao nó HTML (nó HTML). Você pode usar facilmente document.QuerySelector () para obtê -lo.
2: Monitore a árvore do escopo (árvore do escopo)
Para melhor depurar nosso aplicativo, às vezes precisamos verificar o escopo (escopo) da página. Neste momento, precisamos usar o AngularJS
Baratang e NG-Inspetor são duas extensões de navegador cromo para nos ajudar a ver o escopo em tempo real. E essas duas extensões têm outros recursos muito úteis.
(1) .angularJS Baratang
(2) .ng-inspetor
3: Serviços de rastreamento (serviços)
Podemos usar a função injetora que define o elemento NGAPP para pegar qualquer serviço (serviço) ou obter indiretamente o serviço (serviço) através de qualquer elemento com a classe Ng-scope.
Copie o código da seguinte forma:> angular.Element (document.QuerySelector ('html')). Injetor (). Get ('myService')
-> Objeto {Desfazer: função, refazer: função, _pushaction: function, newDocument: function, init: function…}
// ou um pouco mais genérico
> angular.Element (Document.QuerySelector ('. ng-scope')). Injetor (). Get ('MyService')
Em seguida, podemos usar o serviço relacionado, como fizemos depois de injetado no programa.
4: Obtenha o controlador da diretiva
Existem diretivas (instruções) que definem certas funções (geralmente comuns) como um controlador. Para obter um exemplo de controlador com uma diretiva especificada do console, precisamos apenas usar a função controller ().
Copie o código da seguinte forma:> Angular.Element ('My-Page'). Controller ()
-> construtor {}
O último não é comumente usado, mas é uma técnica mais avançada.
5: Recursos de console do Chrome (console)
O Chrome possui muitos comandos de atalho muito úteis para depurar aplicativos da Web no Console (Console). Aqui estão alguns dos comandos mais úteis para o desenvolvimento angular:
$ 0 - $ 4: Obtenha os últimos 5 elementos DOM na janela Inspotor (monitor). Este método de atalho pode nos ajudar a pegar os escopos (escopo) do elemento selecionado: Angular.Element ($ 0) .Scope ()
$ (seletor) e $$ (seletor): ele pode substituir convenientemente o queryselector () e o queryselectorall.
Obrigado @zgohr por esta dica!
Resumir
Com essas dicas simples, podemos obter dados em qualquer escopo, monitorar a hierarquia do escopo, injetar serviços e controle de diretivas.
Então, da próxima vez, quando você deseja fazer um ajuste fino, verificar o código ou controlar um aplicativo AngularJS do console, espero que você possa se lembrar dessas dicas como eu e usá -las mais.
Para visualizar mais a sintaxe do AngularJS, você pode seguir a versão em inglês do Manual de Referência AngularJS, e espero que todos apoiem mais wulin.com.