AngularJS初探：搭建PhoneCat項目的開發與測試環境

標籤：

AngularJS官方網站提供了一個用於學習的樣本項目：PhoneCat。這是一個Web應用，使用者可以瀏覽一些Android手機，瞭解它們的詳細資料，並進行搜尋和排序操作。

對於PhoneCat項目的開發環境和測試環境的搭建，官方網站上提供了詳細的指導：http://docs.angularjs.org/tutorial。

擷取原始碼

PhoneCat項目的原始碼託管在GitHub上，因此擷取原始碼之前需要安裝Git (http://git-scm.com/download)。安裝Git後，可以通過git clone來下載原始碼：

git clone --depth=14 https://github.com/angular/angular-phonecat.git

–depth=14選項的意思為：僅下載最近14次的代碼提交版本；這麼做可以減少下載的檔案大小，加快下載。

安裝依賴包

PhoneCat是一個Web應用程式，因此最好在Web伺服器中運行，以期獲得最佳結果。官方推薦安裝Node.js (http://nodejs.org/download/)。

PhoneCat項目的運行與測試依賴一些別的工具，可以在安裝Node.js後通過npm命令來安裝這些依賴包。以下命令需在angular-phonecat項目路徑下運行：

npm install

運行該命令後，會在angular-phonecat項目路徑下安裝以下依賴包：

• Bower. 包管理器
• Http-Server. 輕量級Web伺服器
• Karma. 用於運行單元測試
• Protractor. 用於運行端到端測試

運行PhoneCat項目

完成上述工作後，運行PhoneCat項目很簡單，在angular-phonecat項目路徑下運行以下命令即可：

npm start

PhoneCat運行後，可以在瀏覽器中開啟http://localhost:8000/app/index.html來訪問該Web應用。

運行單元測試

PhoneCat項目中的單元測試是使用Karma來完成的，所有的單元測試用例都存放在test/unit目錄下。可以通過執行以下命令來運行單元測試：

npm test

值得一提的是，在運行單元測試前，電腦上必須安裝Google Chrome瀏覽器。

運行端到端測試

PhoneCat項目使用端到端測試來保證Web應用的可操作性，而這個端到端測試是通過使用Protractor來實現的，所有的端到端測試案例都存放在test/e2e目錄下。可以通過執行以下步驟來運行端到端測試：

//更新webdriver，此命令只需運行一次npm run update-webdriver//運行PhoneCatnpm start

開啟另一個命令列視窗，在其中運行：

npm run protractor

AngularJS初探：搭建PhoneCat項目的開發與測試環境