Intro

Hoje o post será bem simples, extremamente rápido, porém algo que as pessoas me perguntam com muita frequência no mundo do AngularJS:
“Como acessar a instância de uma factory ou service diretamente do console?”.

PS: Os exemplos estarão em ES2015, então talvez seja necessário verificar a compatibilidade do browser. Apenas troque let por var e => por function que terá a compatibilidade para todos os browsers. 🙂

What!? Why!?

Caso não tenha passado por tal necessidade, o motivo desta ação pode ficar meio obscuro. Então pense nas seguintes situações:

1 – Mantemos os dados do usuário em uma factory, pois como as mesmas são singleton, sempre iremos acessar o mesmos dados na aplicação inteira. Com isso, gostariamos de verificar o estado destes dados em um ponto específico da aplicação, mas apenas para uma consulta rápida.

2 – Temos uma factory qual serve como interação para um loader, possuí métodos para iniciar e parar o mesmo. Gostaríamos de iniciar tal interação de forma controlada, então nada melhor que chamar os métodos diretamente do console.

Iremos seguir com a segunda situação.

Abordagem por escopo

Ter uma ferramente para tal fim quando se trata de diretivas e/ou providers detentores de escopos ($scope) é algo bem comum, pois assim temos acesso ao estado do escope.
Ferramentas como o Batarang fazem isto perfeitamente.

O porém é que estas ferramentas se baseiam no DOM para construir a árvore de scopes.
O AngularJS provê as classes ng-scope e ng-isolate-scope para que as ferramentas identifiquem os elementos detentores de escopo e com uma instrução simples podemos ter o estado dos mesmos:

[markdown]
“`javascript
let elements = angular.element(‘.ng-scope’).toArray();
elements.forEach((el) => { console.log( angular.element(el).scope() ) });
“`
[/markdown]

Como nosso foco é acessar recurso que não se encontra no DOM, precisamos ter outra abordagem.

Solução – Injector

Aos que conhecem o AngularJS um pouco melhor, sabem que o responsável pela injeção de dependência de todos os recursos é o $injector.

Como sabemos que a instância de factories e/ou services são únicas, só precisamos acessa-las via injector. O que muitos não sabem é que há uma maneira bem simples de acessa-lo a partir do console.

Primeiramente devemos conhecer o elemento raiz da aplicação, aquele qual vai o ng-app ou recebe o bootstrap do AngularJs. Sabendo isto, podemos considerar este e todos os elementos filhos possuem acesso ao injector:

[markdown]
“`javascript
let injector = angular.element(document).injector();
“`
[/markdown]

Executando a linha acima temos acesso a todas as funcionalidades do injector. Utilizaremos o método get para acessar nosso loader que chamaremos de redLoader.

[markdown]
“`javascript
let injector = angular.element(document).injector();
let loader = injector.get(‘redLoader’);
loader.start();
“`
[/markdown]

A interação com o loader acontece normalmente via console. Assim podemos executar testes rapidamente, sem mexer no código e sem ter que recarregar a aplicação pra ver a alteração.

Uma outra situação interessante é verificar se um provider existe utilizando o método has, pois assim podemos entender melhor carregamento dinâmico ou breaking changes de terceiros.

[markdown]
“`javascript
let injector = angular.element(document).injector();
injector.has(‘redLoader’);
-> true
“`
[/markdown]

That’s all folks

É isso aí galera! Qualquer dúvida podem me mandar no twitter ou no github, até o próximo post! 🙂