When writing AngularJS apps, it can be challenging to retrieve Data and services hidden in the app using the Javascript console of Chrome, Firefox, and IE. Here are some simple tips to help monitor and control a running Angular application using the Javascript console, making it easier to test, modify, and even write Angular applications in real time.

1: Get Scopes (Scopes)

We can use a line of JS code to fetch any Scope (even isolated scopes) :

> angular.element(targetNode).scope() -> ChildScope {$id: "005", this: ChildScope, ? listeners: Object, ? ListenerCount: Object, $parent: Scope... }Copy the code

Or get isolated scopes:

> angular.element(targetNode).isolateScope() -> Scope {$id: "009", ? childTail: ChildScope, ? childHead: ChildScope, ? prevSibling: ChildScope, ? NextSibling: Scope... }Copy the code

TargetNode refers to HTML Node(HTML Node). You can easily get it using document.querySelector().

2: Monitor Scope Tree

To better debug our application, sometimes we need to look at the Scope architect on the page. The Chrome extensions AngularJS Baratang and Ng-inspector help you see the Scope in real time. Also, these two extensions have some other very useful features.

  • AngularJS Baratang

  • ng-inspector

3: Fetch Services

We can use the Injector function that defined the ngApp element to grab any Service or indirectly get a Service from any element with the Ng-Scope class.

> angular.element(document.querySelector('html')).injector().get('MyService') -> Object {undo: function, redo: Function, _pushAction: function, newDocument: function, init: function... } // Or slightly more generic > angular.element(document.querySelector('.ng-scope')).injector().get('MyService')Copy the code

We could then use the relevant Service as we had injected in our program.

4: Obtain controller from directive

There are directives that define some specific (and often shared) functions as a controller. To get an example of a controller that specifies directive from the console, we need only use the controller() function.

> angular.element('my-pages').controller()
-> Constructor {}
Copy the code

The last one is a less common but more advanced technique.

5: Chrome Console feature

Chrome has a number of handy shortcuts for debugging web applications in the console. Here are some of the most useful commands for Angular development:

  • $0 – $4: Get the last five DOM elements in instpector Window. This shortcut can be very handy for grabbing the scopes of selected elements: angular.element($0).scope()

  • $(the selector), and? (Selector): a convenient alternative to querySelector() and querySelectorAll.

Thanks to @Zgohr for this tip!

conclusion

By these simple directives we obtain data in any scope, monitor the scope hierarchy, inject services, and control directives. Caching

So the next time you want to do some tweaking, checking code, or controlling an AngularJS app from the console, I hope you remember these tips and use them as much as I did.

Article source: ionicframework.com/blog/angula… . Please indicate the source of reprint.