AngularJS 系列教程 ：PhoneCat 應用教程

PhoneCat 教程

本教程將構建一個 Angular 應用。 這款應用能夠顯示 Android 設備列表，你能夠篩選你感興趣的設備，並查看任意設備詳情。

Angular 讓瀏覽器更智能，而不依賴於任何本地插件：

• 如何利用客戶端數據綁定來構建動態數據視圖，並當即根據用戶交互作出相應變化
• 如何讓視圖與數據同步，但不用任何 DOM 操做
• 使用 Karma 和 Protractor 來測試應用
• 如何利用依賴注入和服務來簡化操做，例如獲取應用數據

學完本教程，你應該能夠：

• 建立可在全部現代瀏覽器下運行的 web app
• 使用數據綁定來整合數據和視圖
• 使用 Karma 來建立單元測試
• 使用 Protractor 來建立 end-to-end 測試
• 將應用邏輯從模板中剝離，放到組件和控制器中
• 使用 Angular 服務從服務器獲取數據
• 使用 ngAnimate 模塊爲應用添加動畫
• 模塊化組織 Angular 應用，以便於大型項目擴展
• 可以進一步深刻理解 AngularJS

本教程將演示構建一個應用的完整流程，包括如何進行單元測試和 end-to-end 測試。 每一步底部都有小實驗爲你進一步瞭解 AngularJS 和當前應用提供了建議。

你應該花上幾個小時到一成天的時間來學習本教程。若是你須要的只是 AngularJS 的簡介，能夠查看 Getting Started 。

環境搭建

下面的教程將教你搭建本地環境。 若是隻是想閱讀教程，能夠直接跳到下一步： Step 0 - 啓動。

使用源碼

你應該邊看教程邊在本機嘗試修改示例代碼。這樣，能夠經過實際操做來理解 Angular 代碼並掌握測試工具的使用。

本教程使用 Git 版本控制系統來管理源碼。 學習本教程不須要你瞭解任何關於 Git 的知識，除了安裝和運行一些命令。

安裝 Git

你能夠從 http://git-scm.com/download 下載並安裝 Git。 安裝好以後，你應該能夠在終端中使用 git 命令了。 主要的命令以下：

• git clone ...: 克隆遠程倉庫到本地
• git checkout ...: 檢出特定分支或標籤版本以進行編輯

下載 angular-phonecat

運行如下命令來克隆遠程倉庫 angular-phonecat repository ：

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

該命令在當前目錄下建立了一個 angular-phonecat 子目錄。

--depth=16 選項代表只用獲取最近的 16 個提交。 這使得下載量更小，下載速度更快。

變動當前目錄到 angular-phonecat。

cd angular-phonecat

從如今開始，本教程中的全部命令都假定你的當前目錄爲 angular-phonecat 。

安裝 Node.js

若是你要運行預先配置好的本地 web 服務器和測試工具， 那麼你須要 Node.js v4+。

你能夠從 https://nodejs.org/en/download/ 下載當前操做系統對應的安裝包。

運行下面命令以肯定當前 Node.js 版本：

node --version

在基於 Debian 的發行版中， Node.js 可能和另外一個 node 工具發生命名衝突。 建議同時安裝 nodejs-legacy 包， 它會將 Node.js 命令重命名爲 nodejs.

apt-get install nodejs-legacy npm
nodejs --version
npm --version

若是你須要在本地安裝運行多個版本的 Node.js ， 能夠考慮安裝 Node Version Manager (nvm) 或 Node Version Manager (nvm) for Windows。

將 Node.js 安裝以後， 能夠經過如下命令下載依賴：

npm install

該命令讀取 angular-phonecat 的 package.json 文件，並下載如下工具到 node_modules 目錄：

• Bower - 客戶端包管理工具
• Http-Server - 簡單的靜態 web 服務器
• Karma - 單元測試運行器
• Protractor - end-to-end (E2E) 測試運行器

運行 npm install 的同時也會自動調用 bower 來安裝 AngularJS 框架到 app/bower_components 目錄。

注意 angular-phonecat 項目被配置爲經過 npm scripts 來安裝並運行這些工具。 這意味着在本教程中，你不須要全局安裝這些工具。 查看 安裝輔助工具 以瞭解詳情。

該項目使用了一些 npm 幫助腳原本簡化開發時的經常使用任務:

• npm start: 啓動本地開發 web 服務器
• npm test: 啓動 Karma 單元測試運行器
• npm run protractor: 運行 Protractor end-to-end (E2E) 測試
• npm run update-webdriver: 安裝 Protractor 所需的驅動

安裝輔助工具 （可選）

Bower， Http-Server， Karma 和 Protractor 模塊同時也是可執行程序， 能夠全局安裝並從命令行直接運行。 在本教程中你不用去全局安裝這些程序，但若是確實須要全局安裝，可使用 sudo npm install -g ... 命令。

例如，你能夠這樣安裝 Bower 命令行工具：

sudo npm install -g bower

（在 Windows 下忽略 sudo）

而後你就能夠直接運行 Bower 程序了：

bower install

運行開發服務器

儘管 Angular 應用是純客戶端代碼，也能夠直接從文件系統中打開瀏覽器查看，但最好仍是從 HTTP web 服務器中打開。尤爲是出於安全考慮，對於直接從文件系統中打開的頁面，大多數現代瀏覽器都不容許 javascript 直接發送請求到服務器。

angular-phonecat 配置了一個簡單的開發服務器。經過下面的命令打開服務器：

npm start

這會建立一個服務器監聽 8000 端口。你能夠打開 http://localhost:8000/index.html 來查看應用。

要指定不一樣的IP和端口， 編輯 package.json 中的 "start" 腳本。 你可使用 -a 選項來指定地址， -p 選項來指定端口。你須要同時更新 e2e-test/protractor.conf.js 中的 baseUrl 配置項。

單元測試

咱們使用單元測試來確保 JavaScript 代碼在應用中正常運行。單元測試專一於測試應用獨立的小單元。單元測試文件 (specs) 應該和應用文件放在一塊兒。 這樣能夠便於查找文件，並在應用更新時同步更新它們。同時也使得改變應用結構更加容易，由於測試文件和代碼一塊兒移動。

angular-phonecat 項目使用 Karma 來運行單元測試。 經過如下命令來啓動 Karma ：

npm test

這會啓動 Karma 單元測運行器。 Karma 會讀取項目根目錄。 karma.conf.js 文件。配置文。包括瞭如下內容。

• 打開 Chrome 和 Firefox 瀏覽器並鏈接到 Karma
• 這些瀏覽器中執行全部單元測試
• 在終端中都輸出全部單元測試結果
• 監測全部 JavaScript 文件，當文件發生變化時從新運行測試。

建議始終在後臺運行單元測試。這樣，你在修改代碼時能夠當即得到單元測試反饋。

E2E 測試

咱們使用 E2E (end-to-end) 測試來確保應用按照預期的方式來運行。 E2E 測試用於測試客戶端應用，尤爲是視圖的正確顯示和響應。它經過模擬真實用戶行爲來測試應用。

E2E 測試用例放在 e2e-tests 目錄下面。

angular-phonecat 項目使用 Protractor 運行 E2E 測試。Protractor 依賴於一系列驅動來與瀏覽器交互。 經過下面的命令來安裝這些驅動：

npm run update-webdriver

你沒必要手動來運行這些命令。 npm 腳本在運行測試時會自動執行這些命令。

因爲 Protractor 要與正在運行的應用進行交互，咱們須要啓動服務器：

npm start

而後，在另外一個終端窗口中運行 Protractor 測試腳本：

npm run protractor

Protractor 會讀取 e2e-tests/protractor.conf.js 文件。 配置文件的做用是：

• 打開 Chrome 瀏覽器並鏈接到應用
• 在瀏覽器中執行全部 E2E 測試
• 在終端中顯示測試報告
• 關閉瀏覽器並退出

一般在視圖改變，或須要測試整個應用時運行 E2E 測試。當你肯定要提交變動到遠程倉庫時，也應該運行測試。

常見問題

防火牆/代理問題

Git 和其餘工具常用 git: 協議來從遠程倉庫獲取文件。一些防火牆配置阻擋了 git:// 地址，這經常到致使下載倉庫和依賴時出錯 （例如，企業防火牆就常常阻擋 git:）

若是碰到這種狀況，能夠強制使用 https: 協議。只須要使用以下命令： git config --global url."https://".insteadOf git://

升級 WebDriver 耗時太長

運行 update-webdriver 可能要花上幾秒到幾分鐘的時間（取決於你的硬件配置和網絡環境）。若是你取消了操做（好比用 Ctrl+C ），可能在稍後運行 Protractor 時出錯。

若是碰到這種狀況，能夠刪除 node_modules/ 目錄並從新運行 npm install 。

Protractor 依賴

當下，Protractor 使用了 Selenium Standalone Server，這依賴於本地安裝的 Java Development Kit (JDK) 。 能夠經過 java -version 命令來檢查是否已安裝 JDK。

若是 JDK 未安裝，能夠從 這裏 獲取。

服務器運行錯誤

web 服務器使用了 8000 端口。 若是該端口已經被佔用（好比被其餘的 web 服務器佔用） ，可能出現 EADDRINUSE 錯誤。 在運行 npm start 以前，請確保該端口可用。

設置好了本地環境， 能夠開始下一步： Step 0 - 啓動