Angular瀏覽器插件Batarang介紹及使用
Angular瀏覽器插件Batarang介紹
對于Angular新手來說，剛接手Angular的時候都會比較痛苦。確實，相對于JQuery、Backbone等，Angular門檻確實相對較高，而且比較難以調(diào)試。今天給大家?guī)硪粋€Angular Chrome 插件Batarang的介紹，運用好改插件，會幫助加深對Angular的理解。
準備工作
安裝Batarang：
- 方法一：在Chrome應用商店中查找Batarang，并安裝。
- 方法二：在網(wǎng)上查找Batarang的安裝包，直接在Chrome瀏覽器中安裝。
使用
在已安裝的Batarang插件的瀏覽器中打開一個Angular應用，并打開控制臺，如下圖：
會發(fā)現(xiàn)控制臺中多了一個AngularJS的頁面，勾選“Enable”，該控件就可以使用了：
Models
點開Models，如下圖，左側(cè)是該應用下的所有Scope的信息，右側(cè)是Scope對應的模型信息。點擊某個作用域，右側(cè)相應的會顯示出該作用域中的所有模型信息。
點擊Scope前的”<”，會跳到Elements中該作用域所在的DOM標簽上。
Performance
Performace展示的是該應用的性能，左側(cè)顯示的是監(jiān)控樹，右側(cè)顯示的是監(jiān)控表達式的性能，這個頁面能幫助我們進行性能優(yōu)化。
Dependenices
Dependenices展示的指令和服務之間的依賴關系，選定某個指令，可以看到其依賴的服務。
Options
最后是options頁面。有三個選項：”show applications,” “show scopes,” 和 “show bindings.”。每個選項勾選時，在debugger時，相應的內(nèi)容會在頁面高亮。
help
如有任何問題，請查看help
Element
其實我最常用的應該是Element右側(cè)的AngularJS Properties標簽。在Element標簽中選定某個標簽時，Element頁面的右側(cè)的內(nèi)容，會多一個AngularJS Properties頁面，該頁面顯示的是選定的html內(nèi)容的作用域的屬性，該功能對于對Angular Scope的理解非常有用。如果不是很理解Angular Scope，可以多用一個這個功能。
以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關文章
Angular.JS判斷復選框checkbox是否選中并實時顯示
最近因為工作需要做了一個選擇標簽的功能，把一些標簽展示給用戶，用戶選擇自己喜歡的標簽，就類似我們在購物網(wǎng)站看到的那種過濾標簽似的，所以這篇文章就給大家介紹了Angular.JS判斷復選框checkbox是否選中并實時顯示的方法，下面來一起看看吧。2016-11-11
客戶端表單驗證是AngularJS里面最酷的功能之一。 AngularJS表單驗證可以讓你從一開始就寫出一個具有交互性和可相應的現(xiàn)代HTML5表單。在AngularJS中，有許多表單驗證指令。在這里，我們將談談幾個最流行指令，然后我們將討論如何編寫自定義的驗證。2015-01-01
這篇文章主要介紹了Angularjs處理頁面閃爍的解決方法,非常不錯，具有參考借鑒價值，需要的朋友可以參考下2017-03-03
Angular中的$watch、$watchGroup、$watchCollection
這篇文章主要介紹了Angular中的$watch、$watchGroup、$watchCollection ,需要的朋友可以參考下2017-06-06
AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法
今天小編就為大家分享一篇AngularJs1.x自定義指令獨立作用域的函數(shù)傳入?yún)?shù)方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-10-10
這篇文章主要介紹了詳解Angular5 路由傳參的3種方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-04-04
下面小編就為大家?guī)硪黄狝ugularJS從入門到實踐(必看篇)。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-07-07
這篇文章主要介紹了angularjs 緩存的使用詳解，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-03-03
這篇文章主要介紹了AngularJS變量及過濾器Filter用法,結合實例形式分析了AngularJS變量、過濾器及自定義過濾器的相關用法與注意事項,需要的朋友可以參考下2016-11-11
本篇文章主要介紹了Angularjs實現(xiàn)搜索關鍵字高亮顯示的方法，具有一定的參考價值，下面跟著小編一起來看下吧2017-01-01