angularjs作為一個新興的JavaScript框架，因其具有不少新特性，比如mvc開發模塊，雙向數據綁定等等，使其名聲大噪。我也久聞其大名，然而因為時間問題，一直都沒有去接觸過他。這幾天工作室那邊不是特別忙，於是決定花點時間來親近一下他。
之前買了一本《精通angularjs》,書還沒開始看，今天就翻了幾頁。里面有提到chrome的batarang拓展可以很好的調試angular應用，所以決定先把它下載下載並且安裝了，畢竟，工欲善其事必先利其器嘛。
因為防火牆的原因，chrome是無法直接去Google APP Store獲取到batarang插件的。后來，在網上搜了一下，很多都說可以下載一個batarang的后綴名為“.crx”的文件，然后直接拖到chrome的擴展程序那里進行安裝即可，可是雖然是安裝成功了，但是卻用不了啊。
所以，最后辦法了，只能去github下載了batarang包，然后打算手動的安裝它。本來以為這只是很簡單的事情，可是，哪知道結果遇到了那么多坑啊！廢話不多說了，下面就把我今天的安裝步驟及遇到的坑和大家share一下哈。
第一步，到github上面搜索一下batarang，或者直接到https://github.com/angular/batarang/releases去下載batarang,我選擇為了最新版本的v0.10.4的zip進行下載，如下：
第二步：打開chrome瀏覽器，點擊右上角的那個灰色的按鈕，然后選擇更多工具，然后選擇擴展程序，如下：
第三步：點擊擴展程序之后，來到如下的界面，勾選右上角的“開發者模式”，然后，單擊“加載已解壓的擴展程序...”，如下：
第四步：進入文件選擇界面，把我們剛剛在git上面下載的batarang的解壓后的文件夾選擇中，然后確定：
第五步：我們發現擴展程序下面就會多了一個angularjs batarang的擴展，如下：
第六步：重啟chrome，也即關閉chrome，然后再打開chrome。然后，我們按下f12調出的開發者工具面板，會發現多了一個angularjs按鈕，如下：
但是這里面什么都沒有。一片空白，那么坑終於來了，下面我們一起來研究一下到底是怎么回事了。這時候，我們再次打開“擴展程序”面板，去看個究竟。我們會發現，batarang那里有個錯誤提示，如下：
然后，我們再點擊那個錯誤去查看錯誤的原因，如下：
我們會發現，竟然報出了angular is undefined的錯誤，然后再點擊在“開發者工具中查看”如上圖紅色所示,然后進入到開發者工具面板如下：
我們會發現，全部的地方用到的angular都沒有定義。這是怎么回事呢？是因為我們下載的是源代碼，里面依賴的第三方模板還沒有安裝，那該怎么辦呢？很簡單，只需要在我們的解壓的目錄里面執行 npm install，安裝好依賴之后，再導入瀏覽器就OK啦。