Angular的瀏覽器插件Batarang使用詳解

這次帶給大家Angular的瀏覽器插件Batarang使用詳解，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，可以多用一個這個功能。

相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

nodejs使用redis封裝快取的方法

自訂ajax的跨網域元件封裝

express multer實作node圖片上傳的具體步奏

#

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