首頁 > web前端 > js教程 > 主體

在Angular如何使用瀏覽器插件Batarang

亚连
發布: 2018-06-07 14:06:19
原創
1743 人瀏覽過

本篇文章主要介紹了Angular瀏覽器插件Batarang介紹及使用,現在分享給大家,也給大家做個參考。

Angular瀏覽器插件Batarang介紹

對於Angular新手來說,剛接手Angular的時候都會比較痛苦。確實,相對於JQuery、Backbone等,Angular門檻確實相對較高,而且比較難調試。今天帶給大家一個Angular Chrome 插件Batarang的介紹,運用好改插件,會幫助加深對Angular的理解。

準備工作

安裝Batarang:

  1. #方法一:在Chrome應用程式商店中尋找Batarang,並安裝。

  2. 方法二:在網路上尋找Batarang的安裝包,直接在Chrome瀏覽器中安裝。

使用

在已安裝的Batarang插件的瀏覽器中開啟一個Angular應用,並開啟控制台,如下圖:

會發現控制台中多了一個AngularJS的頁面,勾選“Enable”,該控制項就可以使用了:

Models

點開Models,如下圖,左側是該應用下的所有Scope的信息,右側是Scope對應的模型資訊。點選某個作用域,右邊對應的會顯示出該作用域中的所有模型資訊。

點選Scope前的”<”,會跳到Elements中該作用域所在的DOM標籤上。

Performance

Performace展示的是該應用程式的效能,左側顯示的是監控樹,右側顯示的是監控表達式的效能,這個頁面能幫助我們進行效能優化。

Dependenices

#Dependenices展示的指令和服務之間的依賴關係,選定某個指令,可以看到其依賴的服務。

Options

最後是options頁面。有三個選項:”show applications,” “show scopes,” 和 “show bindings.”。每個選項勾選時,在debugger時,對應的內容會在頁面中高亮。


help

#如有任何問題,請查看help

Element

其實我最常用的應該是Element右側的AngularJS Properties標籤。在Element標籤中選定某個標籤時,Element頁面的右側的內容,會多一個AngularJS Properties頁面,該頁面顯示的是選定的html內容的作用域的屬性,該功能對於對Angular Scope的理解非常有用。如果不是很理解Angular Scope,可以多用一個這個功能。

上面是我整理給大家的,希望今後對大家有幫助。

相關文章:

使用vue實作二級路由設定方法

使用mint-ui實現省市區三級連動效果

使用vue2.0.js實作多級連動選擇器

#

以上是在Angular如何使用瀏覽器插件Batarang的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板