這期內(nèi)容當(dāng)中小編將會給大家?guī)碛嘘P(guān)如何通過終端調(diào)試 AngularJS 應(yīng)用，文章內(nèi)容豐富且以專業(yè)的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

創(chuàng)新互聯(lián)是專業(yè)的東營網(wǎng)站建設(shè)公司，東營接單;提供網(wǎng)站建設(shè)、成都網(wǎng)站建設(shè),網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行東營網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊,希望更多企業(yè)前來合作!

當(dāng)我們構(gòu)建AngularJS應(yīng)用時，通過瀏覽器（如Chrome，F(xiàn)irefox和IE）的JavaScript控制臺訪問應(yīng)用中隱藏的數(shù)據(jù)和服務(wù)總會有些困難。下面是一些簡單的技巧可以幫助我們通過Javascript控制臺來查看或者控制正在運行的Angular應(yīng)用，使得應(yīng)用可以比較容易進(jìn)行測試，修改，甚至實時的修改我們的Angular應(yīng)用：

1： 訪問作用域

通過一行簡單的JS程序訪問頁面中任何作用域（甚至是隔離的作用域?。?/p>

> angular.element(targetNode).scope()  -> ChildScope {$id: "005", this: ChildScope, $$listeners: Object, $$listenerCount: Object, $parent: Scope…}

對于隔離作用域：

> angular.element(targetNode).isolateScope()  -> Scope {$id: "009", $$childTail: ChildScope, $$childHead: ChildScope, $$prevSibling: ChildScope, $$nextSibling: Scope…}

這里用`targetNode`作為HTML節(jié)點的引用。你可以非常輕松的通過`document.querySelector()`來創(chuàng)建一個`targetNode`

2：查看作用域樹

有些時候，我們需要查看頁面中作用域?qū)哟蝸碛行У恼{(diào)試我們的應(yīng)用。AngularJS Batarang正是我們需要的一款Chrome瀏覽器的擴(kuò)展，可以展示當(dāng)前作用域?qū)哟?，并具有其他非常有用的特性?/p>

3： 抓取任何服務(wù)

無論ngApp在哪里定義，我們都可以使用注入器功能來抓取任何的服務(wù)的引用（如果使用angular的bootstrap方法，則可以手動抓取$rootElement）：

> angular.element('html').injector().get('MyService')  -> Object {undo: function, redo: function, _pushAction: function, newDocument: function, init: function…}

然后我們就可以對該服務(wù)進(jìn)行調(diào)用，就像我們可以將服務(wù)注入一樣。

4: 訪問控制器使用指令

一些指令定義了一個擁有某些額外（通常是分享）功能的控制器。為了從控制臺訪問一個給定指令的控制器實例，只需使用 controller() 方法：

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

***一種做法更高級并且不常用。

5: Chrome 控制臺特性

Chrome瀏覽器的控制臺有一堆不錯的捷徑 來調(diào)試瀏覽器應(yīng)用。這是一些Angular開發(fā)中***的做法：

• $0-$4: 訪問最近在查看窗口中進(jìn)行選取的 5 個DOM元素。選擇抓取的范圍非常方便。

• $(selector)和$$(selector): 分別是querySelector() 和 querySelectorAll的一個快速的替代

通過幾個簡單的技巧，我們可以訪問頁面任何作用域中的數(shù)據(jù)，查看作用域?qū)哟谓Y(jié)構(gòu)，注入服務(wù)和控制指令。

所以下一次，如果你想稍微進(jìn)行調(diào)整，檢查自己的工作或者通過控制臺控制AngularJS一個用，我希望你能記住這些命令，并且能做到像我一樣覺得他們非常實用！

上述就是小編為大家分享的如何通過終端調(diào)試 AngularJS 應(yīng)用了，如果剛好有類似的疑惑，不妨參照上述分析進(jìn)行理解。如果想知道更多相關(guān)知識，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。