When we are writing AngularJS applications, it is very challenging to obtain data (Data) and services hidden in the application through the JavaScript consoles of Chrome, Firefox, and IE. Here are some simple tips that can help us use the Javascript console to monitor and control a running Angular application, making it easier to test, modify, or even write Angular applications in real time.
1: Get Scopes (scope)
We can use a line of JS code to get any Scope (or even isolated scopes):
Copy the code as follows:> angular.element(targetNode).scope()
-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}
Or get isolated scopes:
Copy the code as follows:> angular.element(targetNode).isolateScope()
-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}
The targetNode here refers to HTML Node (HTML node). You can easily use document.querySelector() to get it.
2: Monitor Scope Tree (scope tree)
In order to better debug our application, sometimes we need to check the Scope (scope) structor on the page. At this time, we need to use AngularJS
Baratang and ng-inspector are two Chrome browser extensions to help us view Scope in real time. And, these two extensions have some other very useful features.
(1).AngularJS Baratang
(2).ng-inspector
3: Crawl Services (Services)
We can use the injector function that defines the ngApp element to grab any Service (service) or indirectly obtain Service (service) through any element with ng-scope class.
Copy the code as follows:> 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')
Next we can use the related Service just like we did after injected in the program.
4: Get controller from directive
There are directives (instructions) that define certain (usually common) functions as a controller. To get a controller example with a specified directive from the console, we only need to use the controller() function.
Copy the code as follows:> angular.element('my-pages').controller()
-> Constructor {}
The last one is not commonly used but is a more advanced technique.
5: Chrome Console (Console) Features
Chrome has many very useful shortcut commands for debugging web applications in console (console). Here are some of the most helpful commands for Angular development:
$0 - $4: Get the last 5 DOM elements in the inspotor window (monitor). This shortcut method can help us to grab the scopes (scope) of the selected element: angular.element($0).scope()
$(selector) and $$(selector): It can conveniently replace querySelector() and querySelectorAll.
Thanks @zgohr for this tip!
Summarize
With these simple tips, we can get data in any scope, monitor scope hierarchy, inject services, and control directives.
So next time, when you want to do some fine tuning, check code, or control an AngularJS application from the console, I hope you can remember these tips like me and use them more.
To view more AngularJS syntax, you can follow: AngularJS reference manual English version, and I hope everyone will support Wulin.com more.