abstract：ngularJS官方網(wǎng)站提供了一個(gè)用于學(xué)習(xí)的示例項(xiàng)目：PhoneCat。這是一個(gè)Web應(yīng)用，用戶可以瀏覽一些Android手機(jī)，了解它們的詳細(xì)信息，并進(jìn)行搜索和排序操作。獲取源代碼PhoneCat項(xiàng)目的源代碼托管在GitHub上，因此獲取源代碼之前需要安裝Git,安裝Git后，可以通過(guò)git clone來(lái)下載源代碼：git clone --depth=14 https

ngularJS官方網(wǎng)站提供了一個(gè)用于學(xué)習(xí)的示例項(xiàng)目：PhoneCat。這是一個(gè)Web應(yīng)用，用戶可以瀏覽一些Android手機(jī)，了解它們的詳細(xì)信息，并進(jìn)行搜索和排序操作。

獲取源代碼

PhoneCat項(xiàng)目的源代碼托管在GitHub上，因此獲取源代碼之前需要安裝Git,安裝Git后，可以通過(guò)git clone來(lái)下載源代碼：

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

–depth=14選項(xiàng)的意思為：僅下載最近14次的代碼提交版本；這么做可以減少下載的文件大小，加快下載。

安裝依賴包

PhoneCat是一個(gè)Web應(yīng)用程序，因此最好在Web服務(wù)器中運(yùn)行，以期獲得最佳結(jié)果。官方推薦安裝Node.js

PhoneCat項(xiàng)目的運(yùn)行與測(cè)試依賴一些別的工具，可以在安裝Node.js后通過(guò)npm命令來(lái)安裝這些依賴包。以下命令需在angular-phonecat項(xiàng)目路徑下運(yùn)行：

npm install

運(yùn)行該命令后，會(huì)在angular-phonecat項(xiàng)目路徑下安裝以下依賴包：

Bower . 包管理器

Http-Server . 輕量級(jí)Web服務(wù)器

Karma . 用于運(yùn)行單元測(cè)試

Protractor . 用于運(yùn)行端到端測(cè)試

運(yùn)行PhoneCat項(xiàng)目

完成上述工作后，運(yùn)行PhoneCat項(xiàng)目很簡(jiǎn)單，在angular-phonecat項(xiàng)目路徑下運(yùn)行以下命令即可：

npm start

PhoneCat運(yùn)行后，可以在瀏覽器中打開http://localhost:8000/app/index.html來(lái)訪問(wèn)該Web應(yīng)用。

運(yùn)行單元測(cè)試

PhoneCat項(xiàng)目中的單元測(cè)試是使用Karma來(lái)完成的，所有的單元測(cè)試用例都存放在test/unit目錄下?？梢酝ㄟ^(guò)執(zhí)行以下命令來(lái)運(yùn)行單元測(cè)試：

npm test

注意:在運(yùn)行單元測(cè)試前，計(jì)算機(jī)上必須安裝Google Chrome瀏覽器。

運(yùn)行端到端測(cè)試

PhoneCat項(xiàng)目使用端到端測(cè)試來(lái)保證Web應(yīng)用的可操作性，而這個(gè)端到端測(cè)試是通過(guò)使用Protractor來(lái)實(shí)現(xiàn)的，所有的端到端測(cè)試用例都存放在test/e2e目錄下?？梢酝ㄟ^(guò)執(zhí)行以下步驟來(lái)運(yùn)行端到端測(cè)試：

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

打開另一個(gè)命令行窗口，在其中運(yùn)行:

npm run protractor