當我們在編寫AngularJS 的應用時，通過Chrome, Firefox, 和IE 的JavaScript 控制台來獲取隱藏在應用之中的數據(Data)和服務(Service) 是一件非常具有挑戰性的工作。下面列出了一些簡單的小竅門，可以幫助我們使用Javascript 控制台來監視和控制一個正在運行的Angular 應用，使其更加容易測試、修改甚至是實時的編寫Angular 應用。
1: 獲取Scopes (作用域)
我們可以使用一行JS 代碼來獲取任何的Scope (甚至是isolated scopes) :
複製代碼代碼如下:> angular.element(targetNode).scope()
-> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}
或者獲取isolated scopes:
複製代碼代碼如下:> angular.element(targetNode).isolateScope()
-> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}
這裡面的targetNode 指的是HTML Node(HTML節點)。你可以很容易的使用document.querySelector() 來獲取。
2: 監視Scope Tree (作用域樹)
為了更好的調試我們的應用，有些時候我們需要查看頁面上的Scope (作用域) 的結構師怎樣的。這時候我們就需要使用AngularJS
Baratang 和ng-inspector 這兩個Chrome 瀏覽器擴展來幫助我們實時查看Scope (作用域) 的情況。並且，這兩個擴展還有一些其他非常有用的功能。
(1).AngularJS Baratang
(2).ng-inspector
3: 抓取Services (服務)
我們可以使用定義了ngApp 元素的injector 函數來抓取任何Service (服務) 或者間接的通過任何帶有ng-scope class 的元素來獲取Service (服務)。
複製代碼代碼如下:> 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')
接下來我們就可以使用相關的Service 就像我們在程序中injected（注入）過之後那樣使用。
4: 從directive 中獲取controller
有一些directives (指令) 會將一些特定（通常是可以共用的）功能定義成為一個控制器。為了從控制台中獲取一個指定directive (指令) 的controller (控制器) 示例, 我們只需要使用controller() 函數。
複製代碼代碼如下:> angular.element('my-pages').controller()
-> Constructor {}
最後一個不常用但是屬於更高級的技巧。
5: Chrome Console(控制台) 特性
Chrome 有很多在console (控制台) 中用於調試網頁應用的非常好用的快捷命令。下面是對Angular 開發最有幫助的一些命令：
$0 - $4: 在instpector window (監控器) 中獲取最後的5 個DOM 元素。這個快捷方法可以非常方便的幫助我們來抓取選定元素的scopes (作用域) : angular.element($0).scope()
$(selector) 和$$(selector): 可以方便的替代querySelector() 和querySelectorAll。
感謝@zgohr 提供的這個小竅門!
總結
通過這些簡單的小竅門，我們可以獲取任意scope (作用域) 中的數據、監控scope (作用域) 的層級、注入services (服務) 並且控制directives (指令)。
所以下次，當你想要做一些微調、檢查代碼或者從控制台來控制一個AngularJS 應用，我希望你能夠像我一樣記起這些小竅門並多加使用。
查看更多AngularJS的語法，大家可以關注：AngularJS 參考手冊英文版，也希望大家多多支持武林網。