搭建和學習Angularjs官方示例angular-phonecat項目

1、簡介

最近須要學習angularjs，但是官方的網站在中國不是很友好，訪問不是很方便。

還好找到了下面的一個更齊全點的官方示例angular-phonecat項目的教程網站PhoneCat 入門教程 App 導言

不過在真正進行這個示例項目以前，能夠參考下Angular-Phonecat項目初探 ，對這個學習項目的構成初步瞭解以及瞭解一些環境搭建的問題，而後在正式開始入門教程學習。

這個示例是基於AngularJS1.3.0的，且還須要安裝chrome和Firefox瀏覽器。

2、環境搭建

雖然示例中有詳細的搭建步驟，不過在實際機器(win7)上搭建時仍是有不少問題，簡要說明下須要安裝的環境

• git

• nodejs(內置npm工具)

• jdk

而後若是須要設置代理的話（在公司中常常須要代理才能聯網）還須要配置代理見windows環境下設置命令行CMD、Git和NPM代理

angular-phonecat學習項目

官方angular-phonecat學習項目在github上有step-0~step12個項目checkout點，分別對應着學習步驟0~步驟12。

也能夠在github的該學習項目的託管地址在線查看兩個學習步驟之間的詳細修改https://github.com/angular/angular-phonecat/compare/step-1...step-2 。效果以下：

同時，也能夠經過以下地址在線查看每一個步驟(將地址的step-2換成任意的step-*)的運行效果：http://angular.github.io/angular-phonecat/step-2/app/

git下載源碼

找一個目錄下載angular-phonecat項目的step-0：

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

運行示例項目注意事項

注意事項一：

運行這個測試項目過程當中，有一點須要注意，項目默認的http-server是0.6.1版本的，在最新的chrome瀏覽器上運行會出出現問題（不合法的字符），在按照導言的步驟，從官網clone了項目後，須要修改目錄下的package.json文件，將 原來的

"http-server": "^0.6.1" 修改爲更加新的"http-server": "^0.9.0", 而後在運行命令npm install

注意事項二：

運行項目進行karma單元測試時，會出如今新版本的Firefox上閃退，並在命令行中出現"fix: invalid characters in the headers on Node"的提示信息。這是karma的一個bug，參考fix: invalid characters in the headers on Node 5.6.0

解決方法是，更新karma到0.13.0和karma-firefox-launcher到0.1.7。

如下是我修改後package.json文件

  "devDependencies": {
    "karma": "^0.13.0",
    "karma-chrome-launcher": "^0.2.3",
    "karma-firefox-launcher": "^0.1.7",
    "karma-jasmine": "~0.3.0",
    "protractor": "^3.2.0",
    "http-server": "^0.9.0",
    "tmp": "0.0.23",
    "bower": "^1.7.1",
    "shelljs": "^0.6.0"

  }

注意事項三：

運行protractor端對端自動測試時，須要使用本地的Selenium服務器來控制瀏覽器，而Selenium服務器是經過Java虛擬機運行的，所以在運行以前須要檢查Java Development Kit (JDK) 是否已經安裝。檢查命令是經過命令行界面輸入：

java -version

若是沒有安裝JDK，在運行protractor時會提示Error: listen EACCES 0.0.0.0:63386 at Object.exports._errnoException

注意事項四：

會提示一個gyp的Err，相似以下：

c:\Users\dhb\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\src\win
_delay_load_hook.c(16): fatal error C1083: 沒法打開括文件:「windows.h」: No such file or directory [F:\work\evcp-html\node_modules\utf-8-validate\build\binding.sln]
gyp ERR! build error
gyp ERR! stack Error: `C:\Windows\Microsoft.NET\Framework\v4.0.30319\msbuild.exe` failed with exit code: 1
gyp ERR! stack     at ChildProcess.onExit (C:\Users\dhb\AppData\Roaming\npm\node_modules\npm\node_modules\node-gyp\lib\build.js:276:23)

出現這個一般須要安裝python而且配置python環境變量，以及安裝.net framwork sdk。

好像能夠直接在當前項目的目錄下安裝node-gyp來規避。

npm install node-gyp --save-dev

--save-dev參數能夠將node-gyp軟件寫進package.json依賴配置文件中。

3、單元測試套件karma-jasmine

Karma 是Google 開源的一個基於Node.js 的 JavaScript 測試執行過程管理工具。Karma 項目主頁 http://karma-runner.github.io/0.13/index.html。Karma免去了構建測試測試配置方面的負擔，這樣可讓開發者將主要精力放在構建核心應用邏輯上面。

Karma支持多種測試框架，默認是Jasmine，Jasmine是一個用於測試JavaScript代碼的行爲驅動開發框架。

Jasmine的官方文檔參考：Jasmine Behavior-Driven JavaScript Documentation  上面有很一個很詳細的測試示例。

一個簡單的karma-Jasmine安裝教程能夠參考自動化測試之karma和jasmine

4、自動化端對端測試框架protractor

單元測試工具Karma和jasmine能夠測試控制器和其餘由JavaScript寫的組件, 但不能方便測試DOM操做和咱們的程序進行功能測試。此時，就須要使用protractor端對端測試套件。protractor是自動化集成測試框架，基本信息見 Protractor入門介紹

官方網站地址：http://www.protractortest.org/ 和github https://github.com/angular/protractor

注：不知道是否是protrator官網是Google的緣由，官網打不開，所以相應的文檔能夠參考Github上的Doc文檔：https://github.com/angular/protractor/tree/master/docs

Protractor是一個又AngularJS團隊編寫的端對端測試工具，它是一個對 webdriverJS的封裝，同時Jasmine在這裏被指定用來測試。

什麼是WebDriverJS？首先就要說到webDriver，或者是selenium，它會自動操做你的瀏覽器，所以是用於自動化測試的絕佳工具。不管你在測試你的應用時作了些什麼，如導航到一個頁面，點擊了一個按鈕，在一個輸入框中寫了一些文字，提交了一個表單等等，Selenium均可以替你自動完成這些事。

之因此叫作端對端e2e，由於含有瀏覽器客戶端和Selenium server的服務器端，二者之間經過JSON wire protocol進行交流。對於不一樣語言如ruby，Python等對這個JSON wire protocol進行封裝就叫作對該語言的綁定，其中對於JavaScript的綁定的項目就叫作 WebDriverJS。