Accessing an Angular Service from the Console

AngularJS is an extensive JavaScript-based open-source front-end web application framework widely used across the internet. Web apps can be developed in a relatively short timescale, however it can often be difficult to access data and services hidden within the application.

Note: Most of these methods require that debugging information is available. See the bottom section for methods of doing this

Accessing the Scope

The scope/isolatedScope of a page or a specific node can be accessed via:

angular.element(node).scope();
angular.element(node).isolatedScope();

Accessing Services

A reference to an Angular Service can be accessed through the injector function associated with an element where ngApp was defined, or generically through any element with the ng-scope class:

angular.element(document).injector().get('serviceName');

Accessing Controllers

Directives sometimes define a controller, this can be accessed via:

angular.element(node).controller();

Debugging Information

If the methods above don’t work, it is likely that the site you are trying to access is in production mode and debug info has been turned off. This can be reversed using:

angular.reloadWithDebugInfo();

This will reload the page with debug info turned on. On inspection of the AngularJS source code, the same result can be achieved by setting the window.name value to:

window.name = 'NG_ENABLE_DEBUG_INFO!';

This must be set before the AngularJS app has loaded, as a check is made to the window.name value on load. Thus for a Firefox extension or a GreaseMonkey script, this must occur at document-start.